iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
自我挑戰組

初心者解任務啦!JS 的 30 道任務系列 第 27

[ Day 27 ] - 樣板字面值(Template literals)

  • 分享至 

  • xImage
  •  

說明

在先前的版本中被稱為樣板字串(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

參考資料及學習資源

本日小結

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


上一篇
[ Day 26 ] - 陣列的資料處理 - findIndex
下一篇
[ Day 28 ] - 作用域與範圍鏈
系列文
初心者解任務啦!JS 的 30 道任務30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言