建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
大家好，我卡頌。
成都創(chuàng)新互聯(lián)成立于2013年，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站制作、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元孝義做網(wǎng)站,已為上家服務(wù),為孝義各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220
在JS中有一類(lèi)特殊的函數(shù) —— 標(biāo)簽函數(shù)，用于自定義模版字符串的處理邏輯。
不同于一般函數(shù)形如fn(argA, argB)的執(zhí)行方式，標(biāo)簽函數(shù)可以直接跟在模版字符串前面，比如：
tagFn`hello ${name}`本文來(lái)聊聊標(biāo)簽函數(shù)都有哪些有意思的應(yīng)用。
內(nèi)置的標(biāo)簽函數(shù)
JS中只有一個(gè)內(nèi)置標(biāo)簽函數(shù) —— String.raw，用于獲取模字符串的原始字符串形式，即：
- 處理替換(例如替換${name}為變量實(shí)際的值)。
- 不處理轉(zhuǎn)義序列(例如 \n)。
對(duì)于如下代碼：
const name = 'Ka Song';
const s1 = `Hello \n ${name}`
const s2 = String.raw`Hello \n ${name}`用console.log分別打印s1、s2的結(jié)果如下：
之所以s1有換行符，而s2沒(méi)有，是因?yàn)槟J(rèn)情況，模版字符串會(huì)處理轉(zhuǎn)義字符（比如這里的\n），而String.raw不會(huì)處理。
要實(shí)現(xiàn)一個(gè)簡(jiǎn)易的String.raw也很簡(jiǎn)單，比如下面的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;
}對(duì)于模版字符串你好 ${1}我是 ${2}${3}謝謝：
- strings參數(shù)如下：
["你好", "我是", "", "謝謝"]- values參數(shù)如下：
[1, 2, 3]myRaw方法會(huì)依次從strings和values中取值拼接字符串。
身份標(biāo)簽
標(biāo)簽函數(shù)的一個(gè)有意思的應(yīng)用場(chǎng)景是「定義身份標(biāo)簽」，也就是告訴編譯器「接下來(lái)這段模版字符串是什么語(yǔ)言」。
舉個(gè)例子，我們?cè)贘S文件中定義兩個(gè)變量（markup與style），IDE此時(shí)只認(rèn)為這是兩個(gè)普通的模版字符串（沒(méi)有語(yǔ)法高亮）：
現(xiàn)在，我們將String.raw分別重命名為html和css：
const html = String.raw;
const css = String.raw;IDE有了提示信息后，就能根據(jù)提示中的語(yǔ)言對(duì)模版字符串進(jìn)行高亮了：
自定義標(biāo)簽函數(shù)
剛才我們已經(jīng)實(shí)現(xiàn)了String.raw的簡(jiǎn)易版本，在此基礎(chǔ)上做一點(diǎn)修改，就能實(shí)現(xiàn)一個(gè)「將模版字符串轉(zhuǎn)換為大寫(xiě)形式」的標(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!大體來(lái)說(shuō)，標(biāo)簽函數(shù)的應(yīng)用場(chǎng)景可以分為幾類(lèi)：
1、語(yǔ)法校驗(yàn)
比如，對(duì)于HTML字符串，可以使用標(biāo)簽函數(shù)來(lái)自動(dòng)轉(zhuǎn)義模板字符串中的特殊字符，以防止XSS(跨站腳本攻擊)。下面是一個(gè)代碼示例：
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}`;輸出：
對(duì)于后端應(yīng)用，可以創(chuàng)建一個(gè)標(biāo)簽函數(shù)，用于轉(zhuǎn)義SQL語(yǔ)法中不安全的部分，防止SQL注入。
2、國(guó)際化和本地化
標(biāo)簽函數(shù)可以用于處理模板字符串中的文本，使其根據(jù)用戶(hù)的語(yǔ)言和地區(qū)進(jìn)行適當(dāng)?shù)霓D(zhuǎn)換。
3、創(chuàng)建DSL
標(biāo)簽函數(shù)可以用于解析模板字符串中的特定語(yǔ)法，從而創(chuàng)建DSL（領(lǐng)域特定語(yǔ)言）。
比如，可以實(shí)現(xiàn)一個(gè)css標(biāo)簽函數(shù)，解析字符串中的css語(yǔ)法。使用方式如下：
const style = css`color: ${color}; font-size: ${fontSize}px;`;總結(jié)
標(biāo)簽函數(shù)屬于ES6特性，所以整體兼容性很不錯(cuò)：
當(dāng)我們需要處理模版字符串時(shí)，可以考慮自定義一個(gè)標(biāo)簽函數(shù)。
網(wǎng)頁(yè)題目：你知道什么是標(biāo)簽函數(shù)么？
鏈接地址：http://www.dlmjj.cn/article/dpseisj.html
