ES6的到来，使得JS字符串得到了较大的扩展，其中新增了模板字符串的用法。

一、先与之前的字符串拼接做一个对比

在ES6到来之前，我们拼接HTML字符串需要写成如下样子：

var ul = "

  • " + a.b + ""

ul += "

" + a.c + ""


ul += "

" + a.d + ""


这样写非常的不方便

所以在ES6中增添了字符串模板的功能，现在可以这样写：

var ul =

`

  • ${a.b}
  • ${a.c}
  • ${a.d}

`


感觉是不是方便很多，只需要注意HTML的结构性即可，不要再担心是否会拼错。

下面就来聊聊ES6字符串模板相关知识点。

二、ES6字符串模板基本使用

字符串模板包裹

普通字符串使用单引号或者双引号进行包裹，ES6字符串对其进行了扩展，现在的ES6字符串可以使用反引号 ` 对字符串包裹，这样做也等同于普通的字符串，但更加的方便，如下代码：

var a = 'abc' 等同于 var a = `abc`

同时，使用反引号进行包裹也支持多行字符串，而不需要进行拼接，并且其中的空格和换行都会被保留，如下：

var ul =

`

  • a
  • b
  • c

`


也因为不在使用单双引号，所以也不再需要对单双引号进行转义，但如果需要在字符串中使用到反引号 ` ，那么这个反引号是需要用反斜杠进行转移的，如下：

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