[ Day 27 ] - 样板字面值（Template literals）

说明

在先前的版本中被称为样板字串（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()
• 样板字面值

本日小结

样板字面值在组字串的时候非常方便，当然他还有一些进阶的用法！
这边就没有多加介绍说明（消化不良中...）
我们下次见～