es6語(yǔ)法糖(模板字符串)

概念:模板字符串使用反引號(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è)試如下




空格得以保留,多個(gè)li也按我們的預(yù)期被合適的渲染:

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è)試如下:

測(cè)試中 標(biāo)記函數(shù)的第一個(gè)參數(shù)是包含字符串值的數(shù)組,這里的數(shù)組是['that','is a'] ,數(shù)組的值是經(jīng)模板字符串中的${}分隔的‘that’和‘is a’。后續(xù)參數(shù)分別和模板字符串中的${}相對(duì)應(yīng)。

拓展:默認(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è)試如下:

這里添加string.raw后,瀏覽器沒有把 "\n"當(dāng)成換行字符。

缺點(diǎn):

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

測(cè)試如下:


js部分含有\(zhòng)n 特殊符號(hào) 換行



瀏覽器渲染后? 發(fā)現(xiàn)并沒有將\n轉(zhuǎn)義成換行

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容