ES6+ 模版字符串

1. 前言

ES6 对字符串进行了扩展，使之更具有表达力，在 ES5 中字符串的功能是很单一，只能定义变量，不能在字符串中进行逻辑运算，只能使用 + 通过拼接的方式实现。另外，字符串的拼接和换行都需要借助 + 和 n 才能实现，很麻烦更容易出错。这无疑限制了我们对字符串的操作。ES6 对 ES5 中存在的问题进行了修复和扩充，本节我们来学习 ES6 中的模版字符串语法，在本节你可以了解一下内容：

• 字符串换行；
• 字符串拼接；
• 字符串中包含逻辑运算；
• 带标签的模版字符串。

下面我们先来看看在 ES5 中字符串都是哪些使用场景，从而更好地对比 ES6 所提供的模版字符串到底有什么好处，解决了那些问题。

2. ES5 中的字符串

我们知道在 ES5 中定义一个字符串时会把字符串放入引号里，使用 ''（单引号）或 ""（双引号）来包裹字符串。而对于多个字符串的拼接则需要使用 +（加号运算符） 来实现多个字符串的连接。

var a = 'imooc';
var b = 7;
console.log('a的值是:' + a + 'b的值是:' + b);
// a的值是:1b的值是:2

可以看到在 ES5 中字符串的拼接是比较麻烦的，在 ES5 中字符串还有一种拼接场景 —— 多行拼接，需要使用换行符 n 和 + 组合实现。看下面的例子：

var str = '第一行内容n' +
'第二行内容n' + 
'第三行内容n';
console.log(str);
/**
第一行内容
第二行内容 
第三行内容
*/

上面的代码拼接了多行文本字符串，可以看出来如果是很多行的话，很容易出错，而在 web 开发的早期没有模版概念的时候， 数据，然后组装成 DOM 结构插入到页面中，其中还涉及到传递变量的问题，下面看一个插入 DOM 的示例：

<div id="imooc"></div>
<script type="text/javascript">
    let lang = 'ES6';
    document.getElementById('imooc').innerHTML = '<h1>慕课网' + lang + ' Wiki</h1>' +
      '<p>这里是慕课网Wiki，未经许可不能转载</p>' +
      '<div>Wiki主要内容内容</div>';
</script>

上面的代码就是在早期 web 开发中经常使用的场景，可以看出在拼接时稍有不慎就会出现拼接错误，这也造成了问题排查的难度。

ES6 为了解决以上问题提出了模版字符串的概念，那么下面我们看看模版字符串是怎么解决这些问题的。

3. 模版字符串的使用

有了模版字符串后就不需要使用加号了，通过使用 ````（反引号）中直接定义多行字符串和变量的拼接。如果是变量就包裹在 ${} 的大括号中。另外，在模版字符串中还可以使用表达式和使用函数标签的方式来增加字符串复杂的功能，扩展了字符串的功能。下面我们来看一下模版字符串都有哪些使用场景。

3.1 字符串拼接

在 ES6 中可以使用反引号来声明一个字符变量的值。

let name = `imooc`;

上面例子中我们知道在 ES5 中拼接字符串需要用 + 运算符，但在 ES6 中把字符串写在 ```` 中，如果字符串中有变量可以使用 ${} 把变量放在大括号中。如下实例：

var name = '慕课网';
var lang = 'ES6';
console.log(`这是${name}的${lang}教程！`);
// 这是慕课网的ES6教程！

上面的代码中把变量写在 ${} 的大括号中，在编译的过程会直接替换对应的变量。这种方式很明了地表达了字符串的完整性，更加直观地表达字符串的含义。

3.2 多行字符串

使用 ES6 的模版字符串时，不需要添加换行符，反引号里的内容就是最后结果的直观表达，下面我们看一下上面插入 DOM 的例子使用 ES6 是如何写的。

<div id="imooc"></div>
<script type="text/javascript">
    let lang = 'ES6';
    document.getElementById('imooc').innerHTML = `<h1>慕课网${lang}Wiki</h1>
      <p>这里是慕课网Wiki，未经许可不能转载</p>
      <div>Wiki主要内容</div>`;
</script>

对上述 DOM 进行插入操作，在有变量的地方把变量直接放入 ${} 大括号中即可。

3.3 逻辑运算

有时候需要对变量进行计算或是根据添加进行判断得到不同场景下的字符串，ES5 的做法很笨也是只能通过 + 的方式连接，要么是计算好了然后再连接，这无疑都是很麻烦的，下面看一个求和例子：

var a = 1;
var b = 2;
// ES5
console.log('a + b 的和是: ' + (a + b));   // a + b 的和是: 3
// ES6
console.log(`a + b 的和是: ${a + b}`);     // a + b 的和是: 3
var age = 16;
console.log(`小明是${age > 18 ? '成年人' : '未成年人'}`)
// 小明是未成年人

在上面例子的目标字符串中，可以在 ${} 占位符中直接书写表达式。

3.4 带标签的模版字符串

带标签的模版字符串类似函数的使用，如果我们想在字符串中做一些复杂的逻辑判断，下面先看一下 ES5 的例子：

var age = 7;
var str = ''
if (age > 18) {
  str = age + '岁成年了';
} else {
  str = age + '岁还未成年';
}
console.log('imooc今年' + str); // imooc今年7岁还未成年

上面的代码是根据年龄判断是否成年了，ES5 方式很简单，就是一步一步地拼装数据，ES6 提供了带标签的模板字符串，它的使用方式如下：

function isAdult(strArr, age) {
  var s1 = strArr[0]; // strArr是字符串被变量分割后的数组
  var str = ''
  if (age > 18) {
    str = age + '岁成年了';
  } else {
    str = age + '岁还未成年';
  }
  return `${s1}${str}`;
}
var test = isAdult`imooc今年${age}`
console.log(test);    // imooc今年7岁还未成年

带标签的模板字符串可以把模版字符串的内容作为参数传到函数中，使用方式和函数的调用略有不同 fn${expression} 函数 fn 会接收后面表达式作为参数，第一个参数是表达式中所有字符串组成的数组，第二个以后的参数是表达式中的变量的值，和变量是一一对应的。

4. 小结

本节通过 ES5 的字符串拼接中存在各种问题和繁琐性，引入了为什么 ES6 会有字符串模版的概念，总结字符串模版的使用有以下几点：

1. 可以对字符串进行拼接和多行字符串的处理；
2. 模板字符串中可以包含表达式，也可以进行逻辑运算；
3. 带标签的模板字符串可以把模板字符串的内容当作参数传递到函数中，进行复杂的逻辑。