Javascript ES6好用的模版字符串template literal

在 ES6 中，我們多了一個非常好用的模版字符串（template literal），如果你會在 JS 中「放入 HTML 的內容」、或者有「很長的字串包含換行」、又或者會有「字串連結變數」這樣的需求，模版字符串會是非常方便的作法。

另外，在 ES6 中可以將模版字符串和函式結合使用，形成一個標籤模版（tagged template），可以以此過濾 HTML 字串，避免使用者輸入惡意內容。

模版字符串（template literal）的基本應用

模版字符串的使用非常簡單，就是使用反引號" ` "（鍵盤左上角的~），舉例來說，如果我們會在 JS 的字串中放入 HTML 內容，在過去我們可能需要這樣寫：

let component_es5 = 
'<header></header>

\’+ \’

‘+ ‘<img src="img1.jpg" ‘+ ‘

\’+ \’\’ 這麼寫相當麻煩，而且不易閱讀。而在 ES6 中我們可以用反引號快速的解決這樣的狀況：

let component_es6 = `
<header>
    <div class="'banner'">
        <img src="img1.jpg"></img>
    </div>
</header>
`

這樣的作法，會直接輸出如下的結果：

<header>
    <div class="'banner'">
        <img src="img1.jpg"></img>
    </div>
</header>

也就是說，透過反引號包住的內容，會保留所有的換行和空行。

在模版字符串中嵌入變數

另外，在模版字符串中，我們還可以透過 ${…} 這樣的方式，嵌入變量或任何的表達式：

let myName = PJCHENder,
    numA = 4,
    numB = 7;

let content = `Hello, my name is NULL, my lucky number is ${2*(numA + numB)}`;

console.log(content);  // Hello, my name is PJCHENder, my lucky number is 22

我們可以看到透過 ${…}，裡面我們不只可以放入變數，還可以放入表達式（例如${3+4}）。

最後，如果在模版字符串中我們又會使用到反引號的話，這時候我們必須使用跳脫字元 來處理，像是這樣：

var greeting = ``Hello` World!`;

console.log(greeting); // `Hello` World!

資料來源： https://pjchender.blogspot.com/2017/01/javascript-es6-template-literalstagged.html