模闆字面量 是允許嵌入表達式的字元串字面量。
你可以使用多行字元串和字元串插值功能。它們在ES2015規範的先前版本中被稱為“模闆字元串”。
文法
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`
tag `string text ${expression} string text` 描述
模闆字元串使用反引号 (
) 來代替普通字元串中的用雙引号和單引号。模闆字元串可以包含特定文法（
${expression}
）的占位符。占位符中的表達式和周圍的文本會一起傳遞給一個預設函數，該函數負責将所有的部分連接配接起來，如果一個模闆字元串由表達式開頭，則該字元串被稱為帶标簽的模闆字元串，該表達式通常是一個函數，它會在模闆字元串處理後被調用，在輸出最終結果前，你都可以通過該函數來對模闆字元串進行操作處理。在模版字元串内使用反引号（`）時，需要在它前面加轉義符（\）。
`\`` === "`" // --> true 多行字元串
在新行中插入的任何字元都是模闆字元串中的一部分，使用普通字元串，你可以通過以下的方式獲得多行字元串：
console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2" 要獲得同樣效果的多行字元串，隻需使用如下代碼：
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2" 插入表達式
在普通字元串中嵌入表達式，必須使用如下文法：
var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20." 現在通過模闆字元串，我們可以使用一種更優雅的方式來表示：
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20." 嵌套模闆
在某些時候，嵌套模闆是具有可配置字元串的最簡單也是更可讀的方法。 在模闆中，隻需在模闆内的占位符
${ }
内使用它們，就可以輕松地使用内部反引号。 例如，如果條件 a 是真的，那麼傳回這個模闆化的文字。
一個普通字元串例子：
var classes = 'header'
classes += (false ?
'' : true ?
' icon-expander' : ' icon-collapser'); 輸出：header icon-expander
在ES2015中使用模闆文字而沒有嵌套：
var classes = `header ${ false ? '' :
(true ? 'icon-expander' : 'icon-collapser') }`; 在ES2015的嵌套模闆字面量中：
var classes = `header ${ false ? '' :
`icon-${true ? 'icon-expander' : 'icon-collapser'}` }`; 輸出：header icon-icon-expander
帶标簽的模闆字元串
更進階的形式的模闆字元串是帶标簽的模闆字元串。标簽使您可以用函數解析模闆字元串。标簽函數的第一個參數包含一個字元串值的數組。其餘的參數與表達式相關。最後，你的函數可以傳回處理好的的字元串（或者它可以傳回完全不同的東西 , 如下個例子所述）。用于該标簽的函數的名稱可以被命名為任何名字。
var person = 'Mike';
var age = 28;
function myTag(strings, personExp, ageExp) {
var str0 = strings[0]; // "that "
var str1 = strings[1]; // " is a "
// There is technically a string after
// the final expression (in our example),
// but it is empty (""), so disregard.
// var str2 = strings[2];
var ageStr;
if (ageExp > 99){
ageStr = 'centenarian';
} else {
ageStr = 'youngster';
}
return str0 + personExp + str1 + ageStr;
}
var output = myTag`that ${ person } is a ${ age }`;
console.log(output);
// that Mike is a youngster 标簽函數并不一定需要傳回一個字元串。可以傳回其他資料類型，比如數組、json等
原始字元串
在标簽函數的第一個參數中，存在一個特殊的屬性
raw
，我們可以通過它來通路模闆字元串的原始字元串，而不經過特殊字元的替換。
function tag(strings) {
console.log(strings.raw[0]);
}
tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2" 另外，使用
String.raw()
方法建立原始字元串和使用預設模闆函數和字元串連接配接建立是一樣的。
var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"
str.length;
// 6
str.split('').join(',');
// "H,i,\,n,5,!"
研究了一下，其實模闆字元串中的占位符${expression}相當于分隔符，将模闆字元串分割，
function tag(strings) {
console.log(strings.raw[0]);
console.log(strings.raw[1]);
console.log(strings.raw[2]);
}
tag`${document.cookie}`;
//0,1都是空，3是undefined
tag`aaa${document.cookie}`;
//0是aaa,1是空，3是undefined
tag`aaa${document.cookie}bbb`;
//0是aaa,1是bbb，3是undefined
tag`aaa${document.cookie}bbb${document}ccc`;
//0是aaa,1是bbb，3是ccc 從上面例子可以看出占位符${expression}相當于分隔符，将模闆字元串分割。
帶标簽的模闆字面量及轉義序列
自ES2016起，帶标簽的模版字面量遵守以下轉義序列的規則：
- Unicode字元以"\u"開頭，例如
\u00A9
- Unicode碼位用"\u{}"表示，例如
\u{2F804}
- 十六進制以"\x"開頭，例如
\xA9
- 八進制以""和數字開頭，例如
\251
注：八進制好像不管用
參考資料
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)