模板字串符（template literal）是 ES6 中新增的一個相當方便實用的功能，取代以往在 JS 中用 " " 或 ' ' 及 + 輸出字串與變數的功能，使用更簡易的方式達到一樣的效果，我們先來看 airbnb 中關於字串的撰寫建議：

ESLint airbnb 規則

• 6-1.字串請使用單引號 ''
• 6.2 如果字串超過 100 個字元，請使用字串連接符號換行。
• 6.3 請注意，let 與 const 的作用域都只在區塊內
• 6.4 當以程式方式建構字串時，請使用模板字串而不是字串連接

而他的語法就是使用反引號 ` ` 包起來，變數使用 ${ } 包起來即可，這樣就可以很輕易的做到以下：

1. 輸出多行文字（字串需要換行）
2. 字串中插入變數
3. 字串中使用方法、函式

ES6 模板字串符範例

話不多說，我們來看一些範例吧～
假如我們需要使用 JS 動態新增以下包含 HTML 的字串，使用變數帶入飲料名稱及金額：

<ul class="menu">
  <li>
    <h3>
      珍珠奶茶
    </h3>
    <p>60元</p>
  </li>
</ul>

以前的作法就會是：

let price = 50;
let name = '珍珠奶茶';
str ='<ul class="menu"><li><h3>' + name + '</h3><p>' + price + '元</p></li></ul>'

需要使用 ' ' 把 HTML 包起來，還要使用+把變數加進去，而且需要縮成一行才能正常運行，當在多行、多層級的 HTML 樣板時，就會看到相當的眼花，難以閱讀及維護QQ

而改為 ES6 的作法就會是：

let price = 50;
let name = '珍珠奶茶';
str =`
<ul class="menu">
  <li>
    <h3>
      ${name}
    </h3>
    <p>${price}元</p>
  </li>
</ul>
`

相當的一目瞭然！只需要一組反引號` 就可以把所有 HTML 包起來，並且使用${ } 輕易的插入變數，換行也不會有問題，是不是非常的方便又簡單呢！

我們也可以在字串內進行運算，假如我們飲料要打9折：

let price = 50;
let name = '珍珠奶茶';
str =`
<ul class="menu">
  <li>
    <h3>
      ${name}
    </h3>
    <p>${price * 0.9}元</p>
  </li>
</ul>
`

大概就是這樣～是不是超方便的呀！以後不要再用 '我' + year + '歲'這種傻傻的方法組字串啦！快點使用`我${year}歲` 這種前衛的新方法ㄅ！