ES6+ 模版字符串
1. 前言
ES6 对字符串进行了扩展，使之更具有表达力，在 ES5 中字符串的 功能 是很单一，只能定义变量，不能在字符串中进行逻辑运算，只能使用 + 通过拼接的方式实现。另外，字符串的拼接和换行都需要借助 + 和 \n 才能实现，很麻烦更容易出错。这无疑限制了我们对字符串的操作。ES6 对 ES5 中存在的问题进行了修复和扩充，本节我们来学习 ES6 中的模版字符串语法，在本节你可以了解一下 内容 ：
字符串换行； 字符串拼接； 字符串中包含逻辑运算； 带 标签 的模版字符串。
下面我们先来看看在 ES5 中字符串都是哪些使用场景，从而更好地对比 ES6 所提供的模版字符串到底有什么好处， 解决 了那些问题。
2. ES5 中的字符串
我们知道在 ES5 中定义 一个 字符串时会把字符串放入引号里，使用 '' （单引号）或 "" （双引号）来包裹字符串。而对于多个字符串的拼接则需要使用 + （加号运算符） 来实现多个字符串的连接。
var a = 'imooc' ; var b = ; console . log ( 'a的值是:' + a + 'b的值是:' + b ) ; // a的值是:1b的值是:2
可以看到在 ES5 中字符串的拼接是比较麻烦的，在 ES5 中字符串还有一种拼接场景 —— 多行拼接，需要使用换行符 \n 和 + 组合实现。看下面的例子：
var str = '第一行 内容 \n' + '第二行 内容 \n' + '第三行 内容 \n' ; console . log ( str ) ; /** 第一行 内容 第二行 内容 第三行 内容 */
上面的 代码 拼接了多行文本字符串，可以看出来如果是很多行的话，很容易出错，而在 web 开发的早期没有模版概念的时候， 数据，然后组装成 DOM 结构插入到 页面 中，其中还涉及到传递变量的问题，下面看 一个 插入 DOM 的示例：
@H_ 502 _137@ < 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 是如何写的。
@H_ 502 _137@ < 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 = ;
var b = ;
// ES5
console . log ( 'a + b 的和是: ' + ( a + b ) ) ; // a + b 的和是: 3
// ES6
console . log ( `a + b 的和是: ${ a + b } ` ) ; // a + b 的和是: 3
var age = ;
console . log ( `小明是 ${ age > ? '成年人' : '未成年人' } ` )
// 小明是未成年人
在上面例子的目标字符串中，可以在 ${} 占位符中直接书写表达式。
3.4 带 标签 的模版字符串
带 标签 的模版字符串类似 函数 的使用，如果我们想在字符串中做一些复杂的逻辑判断，下面先看一下 ES5 的例子：
var age = ;
var str = ''
if ( age > ) {
str = age + '岁成年了' ;
} else {
str = age + '岁还未成年' ;
}
console . log ( 'imooc今年' + str ) ; // imooc今年7岁还未成年
上面的 代码 是根据年龄判断是否成年了，ES5 方式很简单，就是一步一步地拼装数据，ES6 提供了带 标签 的模板字符串，它的使用方式如下：
function isAdult ( strArr , age ) {
var s1 = strArr [ ] ; // strArr是字符串被变量分割后的数组
var str = ''
if ( age > ) {
str = age + '岁成年了' ;
} else {
str = age + '岁还未成年' ;
}
return ` ${ s1 } ${ str } ` ;
}
var test = isAdult `imooc今年 ${ age } `
console . log ( test ) ; // imooc今年7岁还未成年
带 标签 的模板字符串可以把模版字符串的 内容 作为参数传到 函数 中，使用方式和 函数 的 调用 略有不同 fn${expression} 函数 fn 会接收后面表达式作为参数，第 一个 参数是表达式中所有字符串组成的数组，第二个以后的参数是表达式中的变量的值，和变量是一一对应的。
4. 小结
本节通过 ES5 的字符串拼接中存在各种问题和繁琐性，引入了为什么 ES6 会有字符串模版的概念，总结字符串模版的使用有以下几点：
可以对字符串进行拼接和多行字符串的处理； 模板字符串中可以包含表达式，也可以进行逻辑运算； 带 标签 的模板字符串可以把模板字符串的 内容 当作参数传递到 函数 中，进行复杂的逻辑。