?2016-2026 Matools All rights reserved,
粵ICP備17059708號
模板字面量（Template
Literal）是一種能夠嵌入表達式的格式化字符串，有別于普通字符串，它使用反引號（`）包裹字符序列，而不是雙引號或單引號。模板字面量包含特定形式的占位符（${expression}），由美元符號、大括號以及合法的表達式組成，合法的表達式（expression）可以是變量、算術(shù)或函數(shù)調(diào)用，甚至還可以是模板字面量。在ES6引入模板字面量后，就能避免用若干個加號來實現(xiàn)字符串拼接，而改用更為優(yōu)雅的語法來替代，下面用新舊兩種方式分別來組合字符串。
var name = "strick", age = 29, str; str = "My name is \"" + name + "\". My age
is " + age + ".";//傳統(tǒng)拼接方式 str = `My name is "${name}". My age is ${age}.`;
//模板字面量方式
對比上面兩條賦值語句可以得出，無論是代碼可讀性還是簡潔性，新方式都要略勝一籌。因為舊方式中的普通字符串是用雙引號包裹的，所以字符序列中的雙引號要用反斜線（\）轉(zhuǎn)義。而模板字面量則無需為雙引號或單引號轉(zhuǎn)義，但如果出現(xiàn)反引號，那么就得將其轉(zhuǎn)義。
一、占位符
1）表達式
在占位符內(nèi)，表達式的計算結(jié)果會按照一定的規(guī)則轉(zhuǎn)換成字符串，如果計算結(jié)果是數(shù)字、布爾值、對象或數(shù)組等，那么就調(diào)它們內(nèi)置的toString()方法；而如果是null或undefined，那么就用String()函數(shù)實現(xiàn)類型轉(zhuǎn)換，具體如下所示。
`${"abc"}`; //"abc" `${123}`; //"123" `${true}`; //"true" `${null}`; //"null"
`${undefined}`;//"undefined" `${{ id: 1 }}`; //"[object Object]" `${[1, 2, 3]}`;
//"1,2,3"
有一點要引起注意，那就是占位符中的變量必須先聲明（可以不初始化），否則將拋出未定義的引用錯誤。下面的school變量就沒有預(yù)先聲明，而直接在模板字面量中使用。
`I am studying at ${school}.`; //拋出未定義的引用錯誤
前面曾提到過占位符中的表達式可以是模板字面量，這讓占位符變得非常靈活，可以適應(yīng)更多的場景，處理更為復(fù)雜的問題。例如有這么一個需求，為Chrome瀏覽器中的CSS屬性添加瀏覽器前綴-webkit-，可以像下面這樣編寫。
let attr = "border-radius"; function isChrome() { return true; //
為了簡化演示，省略了瀏覽器嗅探邏輯 } attr = `${isChrome() ? `-webkit-${attr}` : attr}`;
console.log(attr);//"-webkit-border-radius"
2）作用域
在占位符中的變量，它的作用域和定義模板字面量時所處的位置有關(guān)，而不是調(diào)用時的位置。以下面代碼為例，有3個同名的scope變量，分別定義在全局作用域、outer1()函數(shù)和inner()函數(shù)中，模板字面量作為一個實參傳遞給inner()函數(shù)，最后在inner()函數(shù)中把模板字面量輸出到控制臺。
var scope = "global"; //全局變量 function outer1() { var scope = "outer"; function
inner(str) {var scope = "inner"; console.log(str); } inner(`current ${scope}`);
} outer1(); //"current outer"
根據(jù)前面的作用域規(guī)則可知，得到的結(jié)果是“current
outer”。如果模板字面量所處的作用域中沒有該變量，那么就會沿著作用域鏈向上搜索，直到全局作用域為止。在下面的代碼中，注釋了outer2()函數(shù)中的scope變量，得到的結(jié)果為“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"
二、多行字符串
在ES6之前，如果要創(chuàng)建多行字符串，那么得像下面這樣間接實現(xiàn)。
let multi1 = "first line \n" + "second line \n" + "third line"; let multi2 = "
first line \n\ second line \n\ third line";
第一種是將多段字符串用加號拼接，第二種是在換行之前使用反斜線（\）。雖然是兩種實現(xiàn)方法，但兩者都需要添加換行符（\n）。而在ES6引入了模板字面量后，就能原生支持多行字符串，不需要再用上述權(quán)宜之計了。具體如下所示，既不需要加號和反斜線，也不需要換行符，代碼言簡意賅。
let multi3 = `first line second line third line`;
注意，模板字面量能識別空白符，像上面代碼中的多行字符串，其第二行和第三行的開頭都包含了空白符，因此在輸出時都會有縮進。
三、標簽?zāi)０?br>
模板字面量雖然強大，但也有它的局限性，例如下面兩點：
（1）有可能會遭受XSS（跨站腳本攻擊）攻擊，因為無法轉(zhuǎn)義HTML中的特殊字符（例如“<”、“>”等）。
（2）不能替代模板引擎（例如Mustache、Handlebars等），因為無法在占位符中使用if、while等語句。
1）調(diào)用
為了解決上述問題，ES6引入了標簽?zāi)０澹═agged Template）。標簽?zāi)０宀⒉皇悄０?，而是一種特殊方式的函數(shù)調(diào)用，如下所示。
func`<p>${name}</p><p>${age}</p>`;
調(diào)用func()函數(shù)的時候省略了圓括號，函數(shù)名后面直接跟模板字面量，這就是標簽?zāi)０宓恼{(diào)用方式。它一般會包含兩個參數(shù)，第一個是由沒有被替換的部分組成的數(shù)組，第二個是剩余參數(shù)，包含了所有占位符中的計算結(jié)果。下面是一個完整的標簽?zāi)０宓氖纠?br>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>`;
注意觀察兩個參數(shù)的輸出結(jié)果。literals數(shù)組包含三個元素和一個特殊的raw屬性。三個元素分別是第一個占位符之前的部分，兩個占位符之間的部分和第二個占位符后面的部分。剩余參數(shù)substitutions由兩個占位符中所引用的變量name和age的值組成。
2）raw屬性
這里重點提一下raw屬性，它也是一個數(shù)組，包含了literals數(shù)組中的三個元素所對應(yīng)的原始信息，相當(dāng)于為每個元素調(diào)用了一次String對象的raw()方法。注意，String.raw()是一個內(nèi)置的標簽?zāi)０澹谡{(diào)用時要用特殊的形式。
下面用一個例子來演示String.raw()的功能，先定義一個包含水平制表符（\t）的字符串，然后在第一次輸出的時候，“<p>”和“</p>”之間會有空格隔開，接著調(diào)用String.raw()，再次輸出時就能把“\t”也一并顯示。其實要在控制臺顯示第二條注釋需要在“\t”前加一條反斜線（即“<p>\\t</p>”）做轉(zhuǎn)義，這樣才能把“\t”分成兩個獨立的字符：“\”和“t”，不再有水平制表符的效果。但此處為了便于理解，省略了反斜線。
let html = `<p>\t</p>`; console.log(html); //"<p> </p>" html =
String.raw`<p>\t</p>`; console.log(html);//"<p>\t</p>"
?
熱門工具 換一換