首先,模板字符串和标签模板是两个东西。
标签模板不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。但是,如果模板字符串中有变量,就不再是简单的调用了,而是要将模板字符串先处理成多个参数,再调用函数。(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]
...
可以解读到:模板字符串中变量必须是由非变量包含着的,如果变量在开始位置或者结束位置且没有非变量包含,那么该位置就是空字符串。