&emsp;&emsp;模板字面量（Template Literal）是一種能夠嵌入表達式的格式化字符串，有別于普通字符串，它使用反引號（`）包裹字符序列，而不是雙引號或單引號。模板字面量包含特定形式的占位符（${expression}），由美元符號、大括號以及合法的表達式組成，合法的表達式（expression）可以是變量、算術或函數調用，甚至還可以是模板字面量。在ES6引入模板字面量后，就能避免用若干個加號來實現字符串拼接，而改用更為優雅的語法來替代，下面用新舊兩種方式分別來組合字符串。 ~~~ var name = "strick", age = 29, str; str = "My name is \"" + name + "\". M y age is " + age + "."; //傳統拼接方式 str = `My name is "${name}". My age is ${age}.`; 　　　　 //模板字面量方式 ~~~ &emsp;&emsp;對比上面兩條賦值語句可以得出，無論是代碼可讀性還是簡潔性，新方式都要略勝一籌。因為舊方式中的普通字符串是用雙引號包裹的，所以字符序列中的雙引號要用反斜線（\\）轉義。而模板字面量則無需為雙引號或單引號轉義，但如果出現反引號，那么就得將其轉義。 ## 一、占位符 **1）表達式** &emsp;&emsp;在占位符內，表達式的計算結果會按照一定的規則轉換成字符串，如果計算結果是數字、布爾值、對象或數組等，那么就調它們內置的toString()方法；而如果是null或undefined，那么就用String()函數實現類型轉換，具體如下所示。 ~~~ `${"abc"}`; //"abc" `${123}`; //"123" `${true}`; //"true" `${null}`; //"null" `${undefined}`; //"undefined" `${{ id: 1 }}`; //"[object Object]" `${[1, 2, 3]}`; //"1,2,3" ~~~ &emsp;&emsp;有一點要引起注意，那就是占位符中的變量必須先聲明（可以不初始化），否則將拋出未定義的引用錯誤。下面的school變量就沒有預先聲明，而直接在模板字面量中使用。 ~~~ `I am studying at ${school}.`; //拋出未定義的引用錯誤 ~~~ &emsp;&emsp;前面曾提到過占位符中的表達式可以是模板字面量，這讓占位符變得非常靈活，可以適應更多的場景，處理更為復雜的問題。例如有這么一個需求，為Chrome瀏覽器中的CSS屬性添加瀏覽器前綴-webkit-，可以像下面這樣編寫。 ~~~ let attr = "border-radius"; function isChrome() { return true; //為了簡化演示，省略了瀏覽器嗅探邏輯 } attr = `${isChrome() ? `-webkit-${attr}` : attr}`; console.log(attr); //"-webkit-border-radius" ~~~ **2）作用域** &emsp;&emsp;在占位符中的變量，它的作用域和定義模板字面量時所處的位置有關，而不是調用時的位置。以下面代碼為例，有3個同名的scope變量，分別定義在全局作用域、outer1()函數和inner()函數中，模板字面量作為一個實參傳遞給inner()函數，最后在inner()函數中把模板字面量輸出到控制臺。 ~~~ var scope = "global"; //全局變量 function outer1() { var scope = "outer"; function inner(str) { var scope = "inner"; console.log(str); } inner(`current ${scope}`); } outer1(); 　　//"current outer" ~~~ &emsp;&emsp;根據前面的作用域規則可知，得到的結果是“current outer”。如果模板字面量所處的作用域中沒有該變量，那么就會沿著作用域鏈向上搜索，直到全局作用域為止。在下面的代碼中，注釋了outer2()函數中的scope變量，得到的結果為“current global”。 ~~~ var scope = "global"; //全局變量 function outer2() { //var scope = "outer"; function inner(str) { var scope = "inner"; console.log(str); } inner(`current ${scope}`); } outer2(); 　　//"current global" ~~~ ## 二、多行字符串 &emsp;&emsp;在ES6之前，如果要創建多行字符串，那么得像下面這樣間接實現。 ~~~ let multi1 = "first line \n" + "second line \n" + "third line"; let multi2 = "first line \n\ second line \n\ third line"; ~~~ &emsp;&emsp;第一種是將多段字符串用加號拼接，第二種是在換行之前使用反斜線（\\）。雖然是兩種實現方法，但兩者都需要添加換行符（\\n）。而在ES6引入了模板字面量后，就能原生支持多行字符串，不需要再用上述權宜之計了。具體如下所示，既不需要加號和反斜線，也不需要換行符，代碼言簡意賅。 ~~~ let multi3 = `first line second line third line`; ~~~ &emsp;&emsp;注意，模板字面量能識別空白符，像上面代碼中的多行字符串，其第二行和第三行的開頭都包含了空白符，因此在輸出時都會有縮進。 ## 三、標簽模板 &emsp;&emsp;模板字面量雖然強大，但也有它的局限性，例如下面兩點： &emsp;&emsp;（1）有可能會遭受XSS（跨站腳本攻擊）攻擊，因為無法轉義HTML中的特殊字符（例如“\<”、“\>”等）。 &emsp;&emsp;（2）不能替代模板引擎（例如Mustache、Handlebars等），因為無法在占位符中使用if、while等語句。 **1）調用** &emsp;&emsp;為了解決上述問題，ES6引入了標簽模板（Tagged Template）。標簽模板并不是模板，而是一種特殊方式的函數調用，如下所示。 ~~~ func`<p>${name}</p><p>${age}</p>`; ~~~ &emsp;&emsp;調用func()函數的時候省略了圓括號，函數名后面直接跟模板字面量，這就是標簽模板的調用方式。它一般會包含兩個參數，第一個是由沒有被替換的部分組成的數組，第二個是剩余參數，包含了所有占位符中的計算結果。下面是一個完整的標簽模板的示例。 ~~~ function func(literals, ...substitutions) { console.log(literals); //["<p>", "</p><p>", "</p>", raw] console.log(substitutions); //["strick", 29] } var name = "strick", age = 29; func`<p>${name}</p><p>${age}</p>`; ~~~ &emsp;&emsp;注意觀察兩個參數的輸出結果。literals數組包含三個元素和一個特殊的raw屬性。三個元素分別是第一個占位符之前的部分，兩個占位符之間的部分和第二個占位符后面的部分。剩余參數substitutions由兩個占位符中所引用的變量name和age的值組成。 **2）raw屬性** &emsp;&emsp;這里重點提一下raw屬性，它也是一個數組，包含了literals數組中的三個元素所對應的原始信息，相當于為每個元素調用了一次String對象的raw()方法。注意，String.raw()是一個內置的標簽模板，在調用時要用特殊的形式。 &emsp;&emsp;下面用一個例子來演示String.raw()的功能，先定義一個包含水平制表符（\\t）的字符串，然后在第一次輸出的時候，“\<p>”和“\<\p>”之間會有空格隔開，接著調用String.raw()，再次輸出時就能把“\\t”也一并顯示。其實要在控制臺顯示第二條注釋需要在“\\t”前加一條反斜線（即“\\\\t”）做轉義，這樣才能把“\\t”分成兩個獨立的字符：“\\”和“t”，不再有水平制表符的效果。但此處為了便于理解，省略了反斜線。 ~~~ let html = `<p>\t</p>`; console.log(html); //"<p> </p>" html = String.raw`<p>\t</p>`; console.log(html); //"<p>\t</p>" ~~~ ***** > 原文出處： [博客園-ES6躬行記](https://www.cnblogs.com/strick/category/1372951.html) [知乎專欄-ES6躬行記](https://zhuanlan.zhihu.com/pwes6) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。