[JS學徒特訓班] JavaScript ES6 樣板字串(Template String)

組字串好方便的呀，用過就回不去了！

以前使用 JavaScript 組字串，都用雙引號” “或是單引號’ ‘將文字放入其中。

但是要特別注意的雙引號裡面不能有雙引號、單引號裡面不能有單引號。而且多行的時候必須插入 反斜線 \ 來換行，組合的字串一長的話，不單會讓程式碼變得很雜亂，而且也難以閱讀。

var data = [
  {
    name: "小華",
    height: 178
  },
  {
    name: "小乖",
    height: 120
  },
  {
    name: "小麗",
    height: 140
  }
]
// 過去的寫法
var content = '我叫做' +data[0].name;
//多行的寫法
var list = '<ul>\
  <li>我叫做 ' + data[0].name + '</li>\
  <li>我叫做 ' + data[1].name + '</li>\
  <li>我叫做 ' + data[2].name + '</li>\
</ul>';

樣版字串基本應用

樣(模)板字串符（Template literals）是 ES6 中新增的一個相當方便實用的功能，取代以往在 JS 中用 雙引號 " 或 單引號 ' 及 + 輸出字串與變數的功能，使用更簡易的方式達到一樣的效果。

PS.在 ES2015 規範的先行版本中被稱為「樣板字串（Template Strings）」

我們先來看看書寫的規則：

1. 使用 反引號 ``包起來
2. 變數使用 ${ }包起來

這樣子不僅方便許多，也不會看程式碼看到眼花撩亂啦~~直接來改寫上面的範例吧！

// 過去的寫法
var content = '我叫做' +data[0].name;

改寫後如下：

var content = `我叫做 ${data[0].name}`;

//多行的寫法
var list = '<ul>\
  <li>我叫做 ' + data[0].name + '</li>\
  <li>我叫做 ' + data[1].name + '</li>\
  <li>我叫做 ' + data[2].name + '</li>\
</ul>';

改寫後如下：

var list = `
<ul>
  <li>我叫做 ${data[0].name} </li>
  <li>我叫做 ${data[1].name} </li>
  <li>我叫做 ${data[2].name} </li>
</ul>
`;

透過反引號包住的內容，會保留所有的換行和空行，所以也不用辛苦的手動加上 反斜線 \ 來換行。

樣版字串嵌入變數

除了使用 ${...}插入變數以外，也能使用函式或計算式。實際範例如下：

1. 在 ${...}中進行運算

var a = 5;
var b = 100;
console.log(`錢包裡有 ${a*b} 元`);
//錢包裡有 500 元

2. 在 ${...}中帶入函式

function func() {
  return 'Hello';
};
console.log(`${func()} World`);
//Hello World

跳脫字元

如果有需要插入特殊字元，一樣可以使用 \ 反斜線來插入：

console.log(`\%%`);
//映出 %%

以上大概就是樣板字串（Template literals）的基本介紹啦，讓撰寫JavaScript時變得更容易、快速！程式碼看起來也順眼很多，真的用過一次就回不去了！

參考資料

1. [JavaScript] 字串與字串的方法
2. JavaScript String (字串)
3. 【ES6 小筆記】JS 組字串好方便！
4. Template String 樣板字串
5. JavaScript ES6 中的模版字符串（template literals）和標籤模版（tagged template）
6. 模板字串(Template String)

你有更多的問題嗎？你有什麼建議呢？
歡迎在下方留言，或加入我的臉書粉絲頁一起討論！

【免費支持】如果你幫我拍手5下，我有機會得到內容創作的酬勞🙂