首先,模板字符串和標簽模板是兩個東西。
標簽模板不是模板,而是函數調用的一種特殊形式。“標簽”指的就是函數,緊跟在后面的模板字符串就是它的參數。但是,如果模板字符串中有變量,就不再是簡單的調用了,而是要將模板字符串先處理成多個參數,再調用函數。( 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] ...
可以解讀到:模板字符串中變量必須是由非變量包含着的,如果變量在開始位置或者結束位置且沒有非變量包含,那么該位置就是空字符串。