在 ES6 中,我們多了一個非常好用的模版字符串(template literal),如果你會在 JS 中「放入 HTML 的內容」、或者有「很長的字串包含換行」、又或者會有「字串連結變數」這樣的需求,模版字符串會是非常方便的作法。
另外,在 ES6 中可以將模版字符串和函式結合使用,形成一個標籤模版(tagged template),可以以此過濾 HTML 字串,避免使用者輸入惡意內容。
模版字符串(template literal)的基本應用
模版字符串的使用非常簡單,就是使用反引號" ` "(鍵盤左上角的~),舉例來說,如果我們會在 JS 的字串中放入 HTML 內容,在過去我們可能需要這樣寫:
let component_es5 =
'<header>
'+
'
'+
'<img src="img1.jpg"
'+
'
'+
''
這麼寫相當麻煩,而且不易閱讀。而在 ES6 中我們可以用反引號快速的解決這樣的狀況:
let component_es6 = `
<header>
<div class='banner'>
<img src="/img1.jpg>
</div>
</header>
`
這樣的作法,會直接輸出如下的結果:
<header>
<div class='banner'>
<img src="img1.jpg>
</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