iT邦幫忙

2022 iThome 鐵人賽

DAY 30
0

標籤樣板字面值是一種更高級的樣板字面值形式,允許你透過標籤函數操作樣板字面值的輸出。標籤函數的第一個參數是一字串陣列,其餘參數則是處理過的表達式。最終,你可以返回一個經處理後的字串,甚至是完全不一樣的東西(如下述第二個範例中)。標籤函數的名稱可以是任何你想要的。

例 1
要傳入幾個參數就要寫幾個

function showConsole(strings, arg1) {
    console.log(strings, arg1)
}
const myName = '小明';
showConsole`您好 ${ myName },餐點已經準備好囉!`;

例 2
也可以使用 ... 代表傳入複數參數

function showConsole(strings, ...arg1) { //這裡
    console.log(strings, arg1)
}
const myName = '小明';
showConsole`您好 ${ myName },餐點已經準備好囉! ${2} ${3}`; //跟這裡

例 3
如果要將標籤(html)包入

map 可以直接回傳陣列資料
(str,i) 分別代表 您好 ,餐點已經準備好囉!(str) & 陣列索引位置(i)

const myName = '小明';
const highlight = (strings, ...arg1) => 
/*1.*/    strings.map((str,i) => `${str}<span>${arg[i]}</span>`).join(''); 
/*2*/     strings.map((str,i) => ? `${str}<span>${arg[i]}</span>` : '').join(''); 
const sentence = highlight`您好 ${ myName },餐點已經準備好囉!`;
  1. 因為 str 包含了兩次(您好)&(,餐點已經準備好囉!)所以會回傳兩次 <span>${arg[i]}</span> 就會出現 <span>undefined</span>

  2. 加入三元運算子(str,i) => ? ${str}<span>${arg[i]}</span> : ''就可以 (沒值就回傳'')


上一篇
樣板字面值(Template literals)
系列文
JavaScript亂記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言