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）的介紹。
有了這個功能，我們在撰寫上就會更快速，也更容易看懂這些組合字串了！

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