JavaScript ES6 - 樣板字面值 (Template literals)
樣板字面值 (Template literals) ES2015 組字串的麻煩,它在 ES2015 規範的先行版本中,也被稱為樣板字串 (template strings),我本身也比較習慣叫它樣板字串。
總之,一起來看看如何使用吧!
傳統組字串
傳統上是使用單引號 ''
或雙引號 ""
來組合字串。
多行的時候,必須插入反斜線 \
來換行。
範例:
1 | let originString = '我叫做 ' + people[0].name; |
ES2015 使用單雙引號來加總、組合字串的方式,在 ES6 終於得以改善。
樣板字面值(Template literals)
樣板字面值:$ 字號 + 大括號的內部可以插入變數,或者 JavaScript 的原始碼。
例如:
1 | let newString = `我叫做 ${people[0].name}`; |
多行的時候,不必加上反斜線,可以直接在 ``
裡面輸入 HTML 的結構。
例如:
1 | let newUl = ` |
排版也比組字串還要更整齊。
map()
剛才有提到 Template literals 裡面也可以寫 JavaScript 原始碼,我們馬上來試試看。
我們將剛才重複的 <li>
改成使用 map()
方法輸出:
1 | let 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)的介紹。
有了這個功能,我們在撰寫上就會更快速,也更容易看懂這些組合字串了!
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。