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]
...

 

可以解讀到:模板字符串中變量必須是由非變量包含着的,如果變量在開始位置或者結束位置且沒有非變量包含,那么該位置就是空字符串。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM