JavaScript 字面量模板（Template Literals）指南 – JavaScript 完全手冊（2018版）
小編推薦： ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。
注：本文為 《 JavaScript 完全手冊（2018版） 》第16節，你可以檢視該手冊的完整目錄。
在ES2015（又名ES6）中引入，字面量模板提供了一種宣告字串的新方法，但也提供了一些已經廣泛流行的新有趣的結構。
字面量模板簡介
字面量模板是 ES2015 / ES6 的新功能，與 ES5 及更低版本相比，它允許您以新穎的方式處理字串。
乍一看語法非常簡單，只需使用反引號而不是單引號或雙引號：
const a_string = `something`
它們是獨特的，因為它們提供了許多用引號構建的普通字串所特有的特性：
- 它們提供了很好的語法來定義多行字串
- 它們提供了一種在字串中插入變數和表示式的簡便方法
- 他們允許使用模板標籤建立DSL
讓我們詳細瞭解一下每個特性。
多行字串
在 ES6 之前，要建立一個跨越兩行的字串，您必須在一行的末尾使用 \ 字元：
const string = 'first line\n \ second line'
或者
const string = 'first line\n' + 'second line'
字面量模板使多行字串更加簡單。
使用反引號開啟字面量模板後，只需按 Enter 鍵即可建立一個沒有特殊字元的新行，並按原樣渲染：
const string = `Hey this string is awesome!`
請記住，空格是有意義的，所以這樣做：
const string = `First Second`
上面的程式碼將建立一個這樣的字串：
First Second
解決這個問題的一個簡單方法是使第一行空掉，並在關閉反引號後立即跟隨 trim() 方法，這將消除第一個字元前的任何空格：
const string = ` First Second`.trim()
插值
模板標籤是一種乍聽起來可能不太有用的特性，但實際上它被許多流行的庫所使用，比如 Styled Components 或Apollo ，GraphQL 客戶端/伺服器庫，因此瞭解它是如何工作的必不可少。
在 Styled Components 模板標籤中用於定義CSS字串：
const Button = styled.button` font-size: 1.5em; background-color: black; color: white; `;
在Apollo中，模板標籤用於定義 GraphQL 查詢模式：
const query = gql`
query {
...
}
`
這些示例中 styled.button 和 gql 模板標籤只是 函式 ：
function gql(literals, ...expressions) {
}
這個函式返回一個字串，這個字串可以是任何型別計算的結果。
literals 是一個數組，包含由表示式插值標記的字面量模板內容。
expressions 包含所有插值。
如果我們舉一個上面的例子：
const string = `something ${1 + 2 + 3}`
literals 是一個包含兩個項的陣列。 第一個是 something ，直到第一個插值的字串，第二個是空字串，第一個插值的結尾（我們只有一個）和字串的結尾之間的空格。
在這種情況下， expressions 是一個包含單個項元素的陣列， 6 。
一個更復雜的例子是：
const string = `something
another ${'x'}
new line ${1 + 2 + 3}
test`
在這種情況下， literals 是一個數組，其中第一項是：
something another `
第二個是：
new line `
第三個是：
test`
在這種情況下， expressions 是一個包含兩個項 x 和 6 的陣列。
傳遞這些值的函式可以用這些值做任何事情，這就是這種特性的強大之處。
最簡單的例子是通過簡單地連線 literals 和 expressions 來複制字串插值的作用：
const interpolated = interpolate`I paid ${10}€`
這就是 interpolate 的工作原理：
function interpolate(literals, ...expressions) {
let string = ``
for (const [i, val] of expressions) {
string += literals[i] + val
}
string += literals[literals.length - 1]
return string
}
如果你覺得本文對你有幫助，那就請分享給更多的朋友
關注「前端乾貨精選」加星星，每天都能獲取前端乾貨
