大家好，我卡頌。

成都創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目網(wǎng)站制作、做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元孝義做網(wǎng)站,已為上家服務,為孝義各地企業(yè)和個人服務,聯(lián)系電話:028-86922220

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

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

tagFn`hello ${name}`

本文來聊聊標簽函數(shù)都有哪些有意思的應用。

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

JS中只有一個內(nèi)置標簽函數(shù) —— 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不會處理。

要實現(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中取值拼接字符串。

身份標簽

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

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

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

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

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

自定義標簽函數(shù)

剛才我們已經(jīng)實現(xiàn)了String.raw的簡易版本，在此基礎上做一點修改，就能實現(xiàn)一個「將模版字符串轉換為大寫形式」的標簽函數(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!

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

1、語法校驗

比如，對于HTML字符串，可以使用標簽函數(shù)來自動轉義模板字符串中的特殊字符，以防止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, ">");
    result += strings[i];
  }
  return result;
}

使用方式如下：

let userSuppliedInput = "";
const result = safeHtml`
${userSuppliedInput}
`;

輸出：

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

2、國際化和本地化

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

3、創(chuàng)建DSL

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

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

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

總結

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

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

分享標題：你知道什么是標簽函數(shù)么？
轉載源于：http://uogjgqi.cn/article/dpseisj.html