JavaScript ES6 - 樣板字面值 (Template literals)

樣板字面值 (Template literals) ES2015 組字串的麻煩,它在 ES2015 規範的先行版本中,也被稱為樣板字串 (template strings),我本身也比較習慣叫它樣板字串。
總之,一起來看看如何使用吧!

傳統組字串

傳統上是使用單引號 '' 或雙引號 "" 來組合字串。
多行的時候,必須插入反斜線 \ 來換行。

範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let originString = '我叫做 ' + people[0].name;
let originUl =
'<ul>\
<li>我叫做 ' +
people[0].name +
'</li>\
<li>我叫做 ' +
people[1].name +
'</li>\
<li>我叫做 ' +
people[2].name +
'</li>\
</ul>';
console.log(originString);
console.log(originUl);

ES2015 使用單雙引號來加總、組合字串的方式,在 ES6 終於得以改善。

樣板字面值(Template literals)

樣板字面值:$ 字號 + 大括號的內部可以插入變數,或者 JavaScript 的原始碼。

例如:

1
2
let newString = `我叫做 ${people[0].name}`;
console.log(newString);

多行的時候,不必加上反斜線,可以直接在 `` 裡面輸入 HTML 的結構。

例如:

1
2
3
4
5
6
7
8
let newUl = `
<ul>
<li>我叫做 ${people[0].name}</li>
<li>我叫做 ${people[1].name}</li>
<li>我叫做 ${people[2].name}</li>
</ul>
`;
console.log(newUl);

排版也比組字串還要更整齊。

map()

剛才有提到 Template literals 裡面也可以寫 JavaScript 原始碼,我們馬上來試試看。

我們將剛才重複的 <li> 改成使用 map() 方法輸出:

1
2
3
4
5
6
let newUl = `
<ul>
${people.map((person) => `<li>我叫做 ${person.name}</li>`).join('')}
</ul>
`;
console.log(newUl);

map() 方法會建立一個新的陣列,其內容為原陣列的每一個元素。

這個範例中,map() 依序得到 people[0]people[1]people[2] 這些物件,
並將 person 作為這些物件的名稱來做回傳。

因此,如果要取得這些物件的 name,就要寫成 person.name 的形式。

關於 map() 方法的 參考文件

join()

join() 方法可以 “將陣列合併成字串”,預設會以英文逗點 , 隔開元素。
如果裡面寫 “空字串”,像是 join(""),則元素之間不會被任何字元給間隔。

關於 join() 方法的 參考文件

最後我們也可以將內容呈現到畫面上,像是使用 jQuery 的語法:

HTML

1
<div id="app"></div>

JavaScript

1
$('#app').html(newUl);

以上就是關於 ES6 加入的樣板字面值(Template literals)的介紹。
有了這個功能,我們在撰寫上就會更快速,也更容易看懂這些組合字串了!

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。