大家好，我卡頌。

在JS中有一類特殊的函數(shù) —— 標(biāo)簽函數(shù)，用于自定義模版字符串的處理邏輯。

不同于一般函數(shù)形如fn(argA, argB)的執(zhí)行方式，標(biāo)簽函數(shù)可以直接跟在模版字符串前面，比如：

tagFn`hello ${name}`

本文來聊聊標(biāo)簽函數(shù)都有哪些有意思的應(yīng)用。

內(nèi)置的標(biāo)簽函數(shù)

JS中只有一個內(nèi)置標(biāo)簽函數(shù) —— String.raw，用于獲取模字符串的原始字符串形式，即：

• 處理替換(例如替換${name}為變量實際的值)。
• 不處理轉(zhuǎn)義序列(例如 \n)。

對于如下代碼：

const name = 'Ka Song';

const s1 = `Hello \n ${name}`
const s2 = String.raw`Hello \n ${name}`

用console.log分別打印s1、s2的結(jié)果如下：

之所以s1有換行符，而s2沒有，是因為默認(rèn)情況，模版字符串會處理轉(zhuǎn)義字符（比如這里的\n），而String.raw不會處理。

要實現(xiàn)一個簡易的String.raw也很簡單，比如下面的myRaw，其中：

• strings參數(shù)是保存原始字符串的數(shù)組。
• values參數(shù)是保存所有替換變量的數(shù)組。

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參數(shù)如下：

["你好", "我是", "", "謝謝"]

• values參數(shù)如下：

[1, 2, 3]

myRaw方法會依次從strings和values中取值拼接字符串。

身份標(biāo)簽

標(biāo)簽函數(shù)的一個有意思的應(yīng)用場景是「定義身份標(biāo)簽」，也就是告訴編譯器「接下來這段模版字符串是什么語言」。

舉個例子，我們在JS文件中定義兩個變量（markup與style），IDE此時只認(rèn)為這是兩個普通的模版字符串（沒有語法高亮）：

現(xiàn)在，我們將String.raw分別重命名為html和css：

const html = String.raw;
const css = String.raw;

IDE有了提示信息后，就能根據(jù)提示中的語言對模版字符串進(jìn)行高亮了：

自定義標(biāo)簽函數(shù)

剛才我們已經(jīng)實現(xiàn)了String.raw的簡易版本，在此基礎(chǔ)上做一點修改，就能實現(xiàn)一個「將模版字符串轉(zhuǎn)換為大寫形式」的標(biāo)簽函數(shù)：

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!

大體來說，標(biāo)簽函數(shù)的應(yīng)用場景可以分為幾類：

1、語法校驗

比如，對于HTML字符串，可以使用標(biāo)簽函數(shù)來自動轉(zhuǎn)義模板字符串中的特殊字符，以防止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 notallow=alert('XSS')>";
const result = safeHtml`<div>${userSuppliedInput}</div>`;

輸出：

<div><img src=x notallow=alert('XSS')></div>

對于后端應(yīng)用，可以創(chuàng)建一個標(biāo)簽函數(shù)，用于轉(zhuǎn)義SQL語法中不安全的部分，防止SQL注入。

2、國際化和本地化

標(biāo)簽函數(shù)可以用于處理模板字符串中的文本，使其根據(jù)用戶的語言和地區(qū)進(jìn)行適當(dāng)?shù)霓D(zhuǎn)換。

3、創(chuàng)建DSL

標(biāo)簽函數(shù)可以用于解析模板字符串中的特定語法，從而創(chuàng)建DSL（領(lǐng)域特定語言）。

比如，可以實現(xiàn)一個css標(biāo)簽函數(shù)，解析字符串中的css語法。使用方式如下：

const style = css`color: ${color}; font-size: ${fontSize}px;`;

總結(jié)

標(biāo)簽函數(shù)屬于ES6特性，所以整體兼容性很不錯：

當(dāng)我們需要處理模版字符串時，可以考慮自定義一個標(biāo)簽函數(shù)。