ES6模板字符串之标签模板

首先，模板字符串和标签模板是两个东西。

标签模板不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

但是，如果模板字符串中有变量，就不再是简单的调用了，而是要将模板字符串先处理成多个参数，再调用函数。(ES6标准入门-阮一峰 4.12标签模板)

 

由此引出此文，先上代码：

var a = 5;
var b = 10;

tag`Hello ${ a + b } world ${ a * b }`;
//等同于
tag(['Hello ', ' world ', ''], 15, 50);

这里我产生了疑问，为什么数组第三个参数是空字符串，书中也未曾讲到，很是疑惑。

然后再看下一段代码：

 

var total = 30;
var msg = passthru`The total is ${total} (${total * 1.05} with tax)`;
...
//由此可以得出 上面的方法等同于
var msg = passthru(['The total is ', ' (', ' with tax'], 30, 31.5)

在这段代码中数组参数并没有产生空字符串，原因我也不知道，百度了一番，然后懂了。

 

模板字符串由变量和非变量组成，什么是变量，${}就是变量。模板标签函数调用的第一个参数是数组，是由模板字符串中那些非变量部分组成，包括空格。

 

那么不难理解，假设模板字符串中的变量为A，非变量为B，那么模板字符串的组成可能就是:

tpl1 = ABABA; -> ['', B, B, '']
tpl2 = BAB;   -> [B, B]
tpl3 = ABAB   -> ['', B, B]
...

可以解读到：模板字符串中变量必须是由非变量包含着的，如果变量在开始位置或者结束位置且没有非变量包含，那么该位置就是空字符串。