深入瞭解模板字符串（ES6）

深入瞭解模板字符串

這次將給大家帶來模板字符串用法和幾大注意要點

用法

模板字符串由一對反引號標識符組成，${}爲取值表達式

let name = "Tony";
let age = 18 ;
name+"今年"+age+"歲" ;
//"Tony今年18歲"
等價於
`${name}今年${age}歲了`;
//"Tony今年18歲"

我們用傳統寫法表達字符串和變量的拼接寫法非常冗餘，ES6的模板字符串就可以很好的解決這個問題

要點

• 模板字符串中如需用反引號，需要用\轉義

let name = "Tony";
let age = 18;
`\`${name}\`今年${age}歲`;
//"`Tony`今年18歲"

• 如果大括號裏面的值不是字符串，則按照一般規則裝換爲字符（toString方法），特別注意的是，如果大括號裏面是對象，則將返回[object Object],如下面代碼

let obj = {};
`abc${obj}`;
//"abc[object Object]"

• 大括號裏面就是執行JavaScript代碼，因此如果大括號內部是字符串，就會將原樣輸出

let x = 1;
let y = 2;

大括號裏面是表達式，計算後輸出
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

大括號裏面是字符串，將原樣輸出
`${"Hello World"}`
//"Hello World"

• 模版字符串所有的空格和縮進都會被保留在輸出之中

let newLis = "<li>1:aaa</li>"
let ul = 
`
<ul>
${newLis}
</ul>
`;
/*
<ul>
  <li>1:aaa</li>
</ul>
*/

• 模板字符串可嵌套

let name = "Tony";
let age = 18 ;
`${name}今年${`${age}`}歲了`;
//"Tony今年18歲了"

• 標籤模板，函數名+模板字符串，其實就是另外一種調用函數的表達

function fn() {
    console.log(arguments);
}
let name = "Tony";
let age = 18 ;
fn`${name}今年${age}歲了`;
//{ '0': [ '', '今年', '歲了' ], '1': 'Tony', '2': 18 }

等同於
fn([ '', '今年', '歲了' ], 'Tony', 18);
//{ '0': [ '', '今年', '歲了' ], '1': 'Tony', '2': 18 }

返回的arguments第一個屬性包含了所有的除了變量外的部分，變量在後面逐個顯示；注意第一個數組個數總是要比變量多一個，可以把${name}今年${name}歲了看成一條線，把每個變量${name} ${name}看成是一個分割點，分割的結果總是分割點多一份；如果變量位於首尾的時候會分割出一個空字符串'';

---

總結

• 模板字符串中如需用反引號，需要用\轉義
• 模版字符串所有的空格和縮進都會被保留在輸出之中
• 字符串裏可以嵌套變量，大括號裏內部可以放入任意的JavaScript表達式，可以進行運算，以及引用對象屬性，函數
• 模板字符串可嵌套
• 使用標籤模板，注意arguments第一個數包含所有非變量部分，且數量總比變量多一個

---

ES6總結系列參考自阮一峯大神的《ES6入門教程》