聊聊 ES6 中的模版字面量

《深入理解ES6》阅读随笔

在 ES5 中字符串是放在单双引号中使用的。而在 ES6 中还可以把字符串放在两个反撇号（`）之间使用，也就是所谓的模版字面量方式。模版字面量支持创建领域专用语言（DSL），该方式更加安全。模版字面量主要用于应对下面三种情况：
1. 处理多行字符串：在 ES5 中，如果想要在编码时输入多行字符串，可以利用一个通用的引擎 bug，如下所示：

var readme = 'I am \
bug'
console.log(readme) // 输出 I am bug

但是在输出结果时，并没有换行。如果想要输出换行，那么需要通过在字符串中加入 \n 的方式来实现。在 ES6 中，该现象得到了合理处理，我们终于可以快乐的通过模版字面量的方式来在字符串中自由换行了（原来 \n 的方式依然成立），如下所示：

const readme = `I am 
bug`
console.log(readme)  // 输出 I am 
                     //  bug

2. 字符串内嵌变量：在 ES5 中，如果想要在字符串中内嵌变量，需要通过拼接的方式，如下所示：

var name = 'bug'
var result = 'I am ' + name
console.log(result)  // 输出： I am bug

使用这种方式虽然也能实现字符串内嵌变量，但是书写起来并不方便，而且存在安全隐患。在 ES6 中，该也现象得到了合理解决，我们可以将 Javascript 表达式存放在占位符 ${ 和 } 结尾之间，来完成字符串内嵌变量的功能。使用起来既方便，也比原来的写法更安全。实现过程如下所示：

const name = 'bug'
const result = `I am ${name}` 
console.log(result)  // 输出： I am bug

3. HTML 转义能力：该功能才是 ES6 模版字面量的核心功能。下面是一个 HTML 转义中关于模版标签的应用：

const name = "bug";
function readme(list, ...args) {
  let str = "";
  for (let i = 0; i < list.length-1; i++) {
    str += list[i];
    if (args[i] === "bug") {
      args[i] = "new bug";
    }
    str += args[i];
  }
  return str;
}
const result = readme`I am ${name}`;
console.log(result); // 输出： I am new bug