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