說明

在先前的版本中被稱為樣板字串（template strings）
早期在組字串資料時會用大量的 " + "

語法

• 要組成的字串使用兩個反引號（`）包住，要插入變數時則使用 ${變數}

範例如下：

const food = '炸蝦堡';
const dinner = `我今天晚餐吃${food}`;
console.log(dinner);

執行結果

• 在 ${ } 中，不一定只能放變數，也可以放運算式

範例如下

const food = '';
const dinner = `我今天晚餐吃${food || '什麼好呢～'}`;
console.log(dinner);

執行結果

巢狀結構

除了變數和運算式之外，在樣板字面值中也可以使用災狀結構
寫法如下

HTML 的部份

  <div class="list">
  </div>

JS的部份

const list = document.querySelector('.list');
const data = [
  {
    foodName: '炸蝦堡',
    cash: 50
  },
  {
    foodName: '巧克力塔',
    cash: 500
  }
];


const randerList = `<ul>
 ${ data.map((item) => `<li>想吃${ item.foodName }，一個 ${ item.cash } 元</li>`).join('')} 
 </ul>`;  // 這邊使用 join('') 去除逗號

//console.log(randerList);
list.innerHTML = randerList;

執行結果
![](https://i.imgur.com/04Qrdtc.png

參考資料及學習資源

• 六角學院 - JavaScript 必修篇 - 前端修練全攻略
• Array.prototype.join()
• 樣板字面值

本日小結

樣板字面值在組字串的時候非常方便，當然他還有一些進階的用法！
這邊就沒有多加介紹說明（消化不良中...）
我們下次見～