ES6：模板字符串

一、模板字符串与的字符串的单双引号不同，用的是：撇号（``）

二、简单模板字符串

1）单行模板字符串与原来的字符串写法差不多，将单双引号换为撇号即可

let str = `模板字符串与的字符串的单双引号不同，用的是：撇号`

2）多行字符串，只需要用撇号将字符串包裹起来即可

let str = `模板字符串与的字符串
的单双引号不同，用的
是：撇号`

3）如果字符串里需要使用撇号，则需要转义

let str = `模板字符串与的字符串的单双引号不同，用的是：撇号（\`\`）`

4）字符串可以包含html标签

document.getElementById('center').innerHTML = `
    <div>模板字符串与的字符串的单双引号不同</div>
    用的是：<b>撇号</b>
`

5）甚至可以写css代码窝

document.getElementById('center').innerHTML = `
    <style>
        #center{
            color: #f00
        }
    </style>
    <div style='font-size: 30px'>模板字符串与的字符串的单双引号不同</div>
    用的是：<b>撇号</b>
`

 三、变量

1）将变量嵌入模板字符串中，需要用 ${} 将变量包裹起来

let name = '岚风'
let blog = `我的博客名是：${name}`
blog // "我的博客名是：岚风"

2）可运算

let num = 3
let sum = `${num + 5}`
sum // "8"

3）可拼接字符串

let str1 = '模板字符串与的字符串的单双引号不同'
let str2 = '用的是：撇号'
let str = `${str1 + str2}`
str // "模板字符串与的字符串的单双引号不同用的是：撇号"

4）可使用函数

function sum(x,y){
    return x + y
}
let num = `${sum(1,2)}`
num // "3"

4）使用未声明的变量会报错

let num = `${sum}`
// VM101:1 Uncaught ReferenceError: sum is not defined

5）变量为字符串，则不需要声明，且会原样输出字符串

let str = `${'模板字符串与的字符串的单双引号不同用的是：撇号'}`
str // "模板字符串与的字符串的单双引号不同用的是：撇号"

6）可嵌套

let name = '岚风'
let str = `${`我的博客名是：${name}`}`
str // "我的博客名是：岚风"

function sum(str){
    return str
}
let name = '岚风'
let str = `${sum(`我的博客名是：${name}`)}`
str // "我的博客名是：岚风"

四、标签模板（接下列叙述参考于阮大神的：字符串的扩展）

模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能

alert`123`
//等同于
alert(123)

其余详情请前往阮大神的文章去看，我也二懂二懂的，就不记笔记了