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)

其余詳情請前往阮大神的文章去看，我也二懂二懂的，就不記筆記了