寫 JavaScript 的時候大家一定都有過需要將結果組成字串渲染到畫面上的時候吧，初學時我們常用的方法通常都是用 + 號來達成。

let colorArr = ['紅', '橙', '黃', '綠', '藍'];

colorArr.forEach(function(item, index) {
  console.log(index + ' 號是 ' + item + '色');
});

// 0 號是 紅色
// 1 號是 橙色
// 2 號是 黃色
// 3 號是 綠色
// 4 號是 藍色

當一句話裡面有字串和變數時就需要用到很多加號和很多單雙引號，不僅寫的時候容易搞混 (我剛剛寫的時候就一直寫錯 XD)，而且閱讀起來也很不方便。

到底，有沒有更方便撰寫又容易閱讀的方式呢？

沒錯，這個方法就是 ES 6 的 template literals 字串樣板。

我們先直接拿上面的範例來改寫：

let colorArr = ['紅', '橙', '黃', '綠', '藍'];

colorArr.forEach(function(item, index) {
  console.log(`${index} 號是 ${item}色`);
});

是不是變得簡單撰寫又容易閱讀呢？

要使用 template literals 首先得先寫兩個反引號將要組的字串包在中間。
需要帶入變數時則用一個$符號加上一個大括號{}包起來。
這樣就不用再因為哪邊要加+號，或是單引號或雙引號沒包好而搞的頭很大囉！