3.4.5　模板字面量

模板字面量是ECMAScript 2015引入的新特性，它提供了一種語法糖來幫助構(gòu)造字符串。模板字面量的出現(xiàn)幫助開發(fā)者解決了一些長久以來的痛點(diǎn)，如動(dòng)態(tài)字符串的拼接和創(chuàng)建多行字符串等。模板字符串的基本語法是使用反引號(hào)“`”（鍵盤上數(shù)字鍵1左側(cè)的按鍵）替換了字符串字面量中的單、雙引號(hào)。

3.4.5.1　多行字符串

在使用字符串字面量創(chuàng)建多行字符串時(shí)，需要在每一處換行的位置添加轉(zhuǎn)義字符“\n”，可讀性較差。示例如下：

---

01 const template = "\n<table>\n  <tr>\n    <th>昵稱</th>\n    <th>性別</th>\n
   </tr>\n  <tr>\n    <td>多米</td>\n    <td>女</td>\n  </tr>\n</table>\n";

---

在閱讀代碼時(shí)，很難弄清楚這個(gè)字符串的含義。如果使用模板字面量來創(chuàng)建多行字符串，則更符合心智模型。例如，可以將上例中的字符串改寫為如下的模板字面量：

---

01 const template = `
02 <table>
03   <tr>
04     <th>昵稱</th>
05     <th>性別</th>
06   </tr>
07   <tr>
08     <td>多米</td>
09     <td>女</td>
10   </tr>
11 </table>
12 `;

---

3.4.5.2　字符串占位符

使用字符串占位符能夠?qū)?dòng)態(tài)的內(nèi)容插入生成的字符串中。字符串占位符使用“${}”符號(hào)表示，在大括號(hào)中可以插入任意的JavaScript表達(dá)式。例如，我們可以使用模板字面量來構(gòu)造一個(gè)Web API地址，示例如下：

---

01 const root = 'https://api.github.com';
02 const owner = 'microsoft';
03 const repo = 'TypeScript';
04 
05 // https://api.github.com/repos/microsoft/TypeScript
06 const url = `${root}/repos/${owner}/${repo}`;

---

此例中，我們將Web API地址的組成部分放在了變量里并通過字符串占位符引用它們的值，最終拼接成一個(gè)完整的地址。