在JS中有一類特殊的函數 —— 標簽函數，用于自定義模版字符串的處理邏輯。
不同于一般函數形如fn(argA, argB)的執行方式，標簽函數可以直接跟在模版字符串前面，比如：
tagFn`hello ${name}`
本文來聊聊標簽函數都有哪些有意思的應用。
內置的標簽函數
JS中只有一個內置標簽函數 —— String.raw，用于獲取模字符串的原始字符串形式，即：
-
處理替換(例如替換
${name}為變量實際的值) -
不處理轉義序列(例如
n)
對于如下代碼：
const name = 'Ka Song';
const s1 = `Hello n ${name}`
const s2 = String.raw`Hello n ${name}`
用console.log分別打印s1、s2的結果如下：
之所以s1有換行符，而s2沒有，是因為默認情況，模版字符串會處理轉義字符（比如這里的n），而String.raw不會處理。
要實現一個簡易的String.raw也很簡單，比如下面的myRaw，其中：
-
strings參數是保存原始字符串的數組 -
values參數是保存所有替換變量的數組
function myRaw(strings, ...values) {
let result = '';
for (let i = 0; i < strings.length; i++) {
result += strings.raw[i] || strings[i];
if (i < values.length) {
result += values[i];
}
}
return result;
}
對于模版字符串你好 ${1}我是 ${2}${3}謝謝：
-
strings參數如下：
["你好", "我是", "", "謝謝"]
-
values參數如下：
[1, 2, 3]
myRaw方法會依次從strings和values中取值拼接字符串。
身份標簽
標簽函數的一個有意思的應用場景是「定義身份標簽」，也就是告訴編譯器「接下來這段模版字符串是什么語言」。
舉個例子，我們在JS文件中定義兩個變量（markup與style），IDE此時只認為這是兩個普通的模版字符串（沒有語法高亮）：
現在，我們將String.raw分別重命名為html和css：
const html = String.raw;
const css = String.raw;
IDE有了提示信息后，就能根據提示中的語言對模版字符串進行高亮了：
自定義標簽函數
剛才我們已經實現了String.raw的簡易版本，在此基礎上做一點修改，就能實現一個「將模版字符串轉換為大寫形式」的標簽函數：
function upperCase(strings, ...values) {
let result = "";
for (let i = 0; i < strings.length; i++) {
result += strings[i];
if (i < values.length) {
result += values[i];
}
}
return result.toUpperCase();
}
使用方式如下：
let x = "Hello";
let y = "kasong";
const result = upperCase`${x}, ${y}!`;
輸出：
HELLO, KASONG!
大體來說，標簽函數的應用場景可以分為幾類：
1. 語法校驗
比如，對于HTML字符串，可以使用標簽函數來自動轉義模板字符串中的特殊字符，以防止XSS(跨站腳本攻擊)。下面是一個代碼示例：
function safeHtml(strings, ...values) {
let result = strings[0];
for (let i = 1; i < strings.length; i++) {
let val = String(values[i - 1]);
result += val.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
result += strings[i];
}
return result;
}
使用方式如下：
let userSuppliedInput = "<img src=x onerror=alert('XSS')>";
const result = safeHtml`<div>${userSuppliedInput}</div>`;
輸出：
<div><img src=x onerror=alert('XSS')></div>
對于后端應用，可以創建一個標簽函數，用于轉義SQL語法中不安全的部分，防止SQL注入。
2. 國際化和本地化
標簽函數可以用于處理模板字符串中的文本，使其根據用戶的語言和地區進行適當的轉換。
3. 創建DSL
標簽函數可以用于解析模板字符串中的特定語法，從而創建DSL（領域特定語言）。
比如，可以實現一個css標簽函數，解析字符串中的css語法。使用方式如下：
const style = css`color: ${color}; font-size: ${fontSize}px;`;
總結
標簽函數屬于ES6特性，所以整體兼容性很不錯：
當我們需要處理模版字符串時，可以考慮自定義一個標簽函數。
