概念:模板字符串使用反引號(hào)?(` `) 來(lái)代替普通字符串中的用雙引號(hào)和單引號(hào)。模板字符串可以包含特定語(yǔ)法(${expression})的占位符。占位符中的表達(dá)式和周圍的文本會(huì)一起傳遞給一個(gè)默認(rèn)函數(shù),該函數(shù)負(fù)責(zé)將所有的部分連接起來(lái),如果一個(gè)模板字符串由表達(dá)式開頭,則該字符串被稱為帶標(biāo)簽的模板字符串,該表達(dá)式通常是一個(gè)函數(shù),它會(huì)在模板字符串處理后被調(diào)用,在輸出最終結(jié)果前,你都可以通過(guò)該函數(shù)來(lái)對(duì)模板字符串進(jìn)行操作處理。在模版字符串內(nèi)使用反引號(hào)(`)時(shí),需要在它前面加轉(zhuǎn)義符(\)。
基本用法:ES6中允許使用反引號(hào)?`?來(lái)創(chuàng)建字符串,此種方法創(chuàng)建的字符串里面可以包含由美元符號(hào)加花括號(hào)包裹的變量${vraible}。
1、模板字符串是對(duì)常規(guī)JavaScript字符串的重大改進(jìn),不同于在普通字符串中使用單引號(hào)或者雙引號(hào),模板字符串的聲明需要使用反撇號(hào)。
因?yàn)槭褂玫氖欠雌蔡?hào),故可以在模板字符串中隨意使用單雙引號(hào)了,使用時(shí)不再需要考慮轉(zhuǎn)義。
2、模板字符串默認(rèn)支持多行:
????????????在新行中插入的任何字符都是模板字符串中的一部分,使用普通字符串,可以通過(guò)以下的方式獲得多行字符串:

? ? ? ? ? ? 同樣的效果使用模板字符串后:

3、在${}中插入js表達(dá)式。當(dāng)解析到表達(dá)式時(shí),表達(dá)式會(huì)被執(zhí)行,該處將渲染表達(dá)式的值:
? ? ? a、? 如插入日期、數(shù)學(xué)運(yùn)算等,測(cè)試如下

? ? ? b、由于模板字符串本身也是JavaScript表達(dá)式,我們?cè)谀0遄址羞€可以嵌套模板字符串

4、模板字符串簡(jiǎn)潔高效的返回基于html和數(shù)據(jù)生成的字符串:測(cè)試如下



5、標(biāo)記模板
更高級(jí)的形式的模板字符串是帶標(biāo)簽的模板字符串。標(biāo)簽使可以用函數(shù)解析模板字符串。標(biāo)簽函數(shù)的第一個(gè)參數(shù)包含一個(gè)字符串值的數(shù)組。其余的參數(shù)與表達(dá)式相關(guān)。最后,標(biāo)簽函數(shù)可以返回處理好的的字符串(或者它可以返回完全不同的東西 , 如下個(gè)例子所述)。用于該標(biāo)簽的函數(shù)的名稱可以被命名為任何名字。
測(cè)試如下:

拓展:默認(rèn)情況下,JavaScript會(huì)把\解析為轉(zhuǎn)義符號(hào),對(duì)瀏覽器來(lái)說(shuō),以\開頭的字符一般具有特殊的含義。比如說(shuō)\n意味著新行,\u00f1表示?等等。如果你不想瀏覽器執(zhí)行這種特殊解析,可以使用String.raw來(lái)標(biāo)記模板。
在標(biāo)記函數(shù)的第一個(gè)參數(shù)中,存在一個(gè)特殊的屬性raw?,我們可以通過(guò)它來(lái)訪問(wèn)模板字符串的原始字符串,而不經(jīng)過(guò)特殊字符的替換。
另外,使用String.raw()?方法創(chuàng)建原始字符串和使用默認(rèn)模板函數(shù)和字符串連接創(chuàng)建是一樣的。
測(cè)試如下:


缺點(diǎn):
1、模板字符串不會(huì)自動(dòng)轉(zhuǎn)義特殊字符,(但是我們可以通過(guò)標(biāo)簽?zāi)0鍋?lái)解決這個(gè)問(wèn)題)所以為了防止跨腳本攻擊,我們還是要小心處理一些敏感數(shù)據(jù);
測(cè)試如下:



2、?它不是用來(lái)取代其他js模板的,部分原因在于模板字符串不支持循環(huán)和條件語(yǔ)句,而這些是其他js模板擅長(zhǎng)的。