標籤樣板字面值是一種更高級的樣板字面值形式,允許你透過標籤函數操作樣板字面值的輸出。標籤函數的第一個參數是一字串陣列,其餘參數則是處理過的表達式。最終,你可以返回一個經處理後的字串,甚至是完全不一樣的東西(如下述第二個範例中)。標籤函數的名稱可以是任何你想要的。
例 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 },餐點已經準備好囉!`;
因為 str
包含了兩次(您好)&(,餐點已經準備好囉!)所以會回傳兩次 <span>${arg[i]}</span>
就會出現 <span>undefined</span>
加入三元運算子(str,i) => ? ${str}<span>${arg[i]}</span>
: ''就可以 (沒值就回傳'')