ES6的到来，使得JS字符串得到了较大的扩展，其中新增了模板字符串的用法。
一、先与之前的字符串拼接做一个对比
在ES6到来之前，我们拼接HTML字符串需要写成如下样子：
var ul = "<ul><li>" + a.b + "</li>"
ul += "<li>" + a.c + "</li>"
ul += "<li>" + a.d + "</li></ul>"
这样写非常的不方便
所以在ES6中增添了字符串模板的功能，现在可以这样写：
var ul =
`<ul>
<li>${a.b}</li>
<li>${a.c}</li>
<li>${a.d}</li>
</ul>`
感觉是不是方便很多，只需要注意HTML的结构性即可，不要再担心是否会拼错。
下面就来聊聊ES6字符串模板相关知识点。
二、ES6字符串模板基本使用
- 字符串模板包裹
普通字符串使用单引号或者双引号进行包裹，ES6字符串对其进行了扩展，现在的ES6字符串可以使用反引号 ` 对字符串包裹，这样做也等同于普通的字符串，但更加的方便，如下代码：
var a = 'abc' 等同于 var a = `abc`
同时，使用反引号进行包裹也支持多行字符串，而不需要进行拼接，并且其中的空格和换行都会被保留，如下：
var ul =
`<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>`
也因为不在使用单双引号，所以也不再需要对单双引号进行转义，但如果需要在字符串中使用到反引号 ` ，那么这个反引号是需要用反斜杠进行转移的，如下：
var a = ` she say: " he said:' my name is xiaoming ', i\`i\`i\` " `
console.log(a) // she say: " he said:' my name is xiaoming ', i`i`i`
- 插入变量
ES6字符串模板对插入字符串中的变量也做了新的方法，可以使用${插入的变量}的形式直接放入字符串中合适的位置。
1.基本使用例子：
var a = 1
var b = `${a}23`
console.log(b) // 123
2.${}中还可以引入表达式操作，如下代码：
var a = 1,b = 2
var c = `${a + b}`
console.log(c) // 3
3.${}中也可以引入函数，它会先调用函数得出一个结果：
function f(num){return num + num}
var a = `${f(3)} + a`
console.log(a) // 6 + a
三、模板字符串与函数的调用
此外，函数的调用中的参数也可以用模板字符串进行替代，如下代码：
function a(b){
console.log(b)
}
a`1` // 输出 ["1", raw: Array[1]]
但是这种方法并不是很好，比如上述例子我需要的形参是一个数字，而反引号则会将其转化为字符串输出。
此外，多参数时候也与普通函数的调用后输出的结果有所不同
var b = 2,c = 3
function a(b, c){
console.log(b, c)
}
a`${b} +++++ ${c}` // ["", " ++++ ", "", raw: Array[3]] 2
