es6拼接html,ES6中的模板字符串的基本用法

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