3.4.5　模板字面量

模板字面量是ECMAScript 2015引入的新特性，它提供了一种语法糖来帮助构造字符串。模板字面量的出现帮助开发者解决了一些长久以来的痛点，如动态字符串的拼接和创建多行字符串等。模板字符串的基本语法是使用反引号“`”（键盘上数字键1左侧的按键）替换了字符串字面量中的单、双引号。

3.4.5.1　多行字符串

在使用字符串字面量创建多行字符串时，需要在每一处换行的位置添加转义字符“\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";

在阅读代码时，很难弄清楚这个字符串的含义。如果使用模板字面量来创建多行字符串，则更符合心智模型。例如，可以将上例中的字符串改写为如下的模板字面量：

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　字符串占位符

使用字符串占位符能够将动态的内容插入生成的字符串中。字符串占位符使用“${}”符号表示，在大括号中可以插入任意的JavaScript表达式。例如，我们可以使用模板字面量来构造一个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地址的组成部分放在了变量里并通过字符串占位符引用它们的值，最终拼接成一个完整的地址。