.jpg)
標(biāo)簽?zāi)０迨?a href="http://www.babyishan.com/tag/javascript">JavaScript中模板字符串的高級(jí)用法，通過在模板字符串前添加一個(gè)函數(shù)名作為“標(biāo)簽”，將模板中的靜態(tài)部分和動(dòng)態(tài)插值分別傳入該函數(shù)進(jìn)行自定義處理。它允許開發(fā)者靈活控制字符串的拼接方式，常用于格式化輸出、防止xss、構(gòu)建html或css片段等場景。其基本形式是定義一個(gè)函數(shù)（如mytag），接收兩個(gè)參數(shù)：strings（模板中的靜態(tài)文本部分）和values（動(dòng)態(tài)插值的值），然后按需組合它們。例如，logcolor函數(shù)可用于高亮控制臺(tái)輸出，safehtml函數(shù)可自動(dòng)轉(zhuǎn)義html字符以防止xss攻擊，css函數(shù)則可用于構(gòu)建樣式字符串。使用時(shí)需要注意：第一個(gè)參數(shù)strings是一個(gè)數(shù)組，包含所有靜態(tài)文本；后續(xù)參數(shù)為變量值，可用…values一次性獲取；strings.raw屬性可用于訪問原始字符串。掌握標(biāo)簽?zāi)０蹇稍谛枰?xì)控制字符串內(nèi)容時(shí)提供強(qiáng)大支持。
格式化輸出、防止 XSS、構(gòu)建 HTML 片段等。
什么是標(biāo)簽?zāi)０澹?/h3>
標(biāo)簽?zāi)０宓幕拘问骄褪窃谀０遄址凹右粋€(gè)“標(biāo)簽”——其實(shí)就是一個(gè)函數(shù)名。這個(gè)函數(shù)會(huì)接收到模板中的靜態(tài)部分和動(dòng)態(tài)插值作為參數(shù)，然后由你決定如何組合它們。
舉個(gè)最簡單的例子：
function myTag(strings, ...values) { console.log(strings); // ["Hello, ", "!", raw: Array] console.log(values); // ["World"] } myTag`Hello, ${"World"}!`;
在這個(gè)例子里，myTag 就是標(biāo)簽函數(shù)，后面的模板字符串會(huì)被拆分成兩個(gè)部分傳入：一部分是不變的文字（strings），另一部分是變量值（values）。
標(biāo)簽?zāi)０迥苡脕碜鍪裁矗?/h3>
1. 自定義字符串處理邏輯
你可以根據(jù)不同的變量做不同的處理。例如，拼接帶顏色的日志信息：
function logColor(strings, ...values) { let str = ''; strings.forEach((s, i) => { str += s; if (i < values.length) { str += `%c${values[i]}%c`; } }); console.log(str, ...Array.from({length: values.length * 2}, (_, i) => i % 2 === 0 ? 'color: red;' : '' )); } logColor`當(dāng)前用戶：${'張三'}，等級(jí)為${5}`;
這樣在控制臺(tái)中，變量部分就可以高亮顯示了。
2. 安全地轉(zhuǎn)義 HTML 內(nèi)容
如果你正在手動(dòng)拼接 HTML 字符串，可以用標(biāo)簽?zāi)０鍋碜詣?dòng)轉(zhuǎn)義某些字符，避免 XSS 攻擊：
function safeHTML(strings, ...values) { const escape = str => str.replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '"') .replace(/'/g, '''); return strings.reduce((result, s, i) => { return result + s + (values[i] ? escape(String(values[i])) : ''); }, ''); } const userInput = '<script>alert("XSS")</script>'; const html = safeHTML`<div>${userInput}</div>`; console.log(html); // 輸出：<div><script>alert("XSS")</script></div>
3. 構(gòu)建結(jié)構(gòu)化的字符串片段
像一些庫（如 styled-components）就利用了標(biāo)簽?zāi)０鍋斫馕?CSS 字符串，并結(jié)合變量進(jìn)行樣式注入：
function css(strings, ...values) { return strings.reduce((acc, s, i) => acc + s + (values[i] || ''), ''); } const color = 'blue'; const styles = css` color: ${color}; font-size: 16px; `; console.log(styles); // 輸出： // color: blue; // font-size: 16px;
使用標(biāo)簽?zāi)０鍟r(shí)需要注意什么？
- 第一個(gè)參數(shù)是字符串?dāng)?shù)組，里面包含了模板中所有的靜態(tài)文本。
- 后續(xù)參數(shù)是變量的值，如果模板中有多個(gè) ${}，就會(huì)對應(yīng)多個(gè)參數(shù)。
- 如果你使用的是展開運(yùn)算符 …values，那就能一次性拿到所有變量值。
- 如果想訪問原始字符串（不處理轉(zhuǎn)義），可以使用 strings.raw 屬性。
總結(jié)一下
標(biāo)簽?zāi)０宀⒉皇潜仨氄莆盏膬?nèi)容，但當(dāng)你需要對字符串進(jìn)行精細(xì)控制的時(shí)候，它非常有用。無論是日志美化、安全轉(zhuǎn)義，還是構(gòu)建 DSL（領(lǐng)域特定語言），都能派上用場。
基本上就這些，理解了結(jié)構(gòu)之后，剩下的就是根據(jù)具體場景去定制你的標(biāo)簽函數(shù)了。
.png)
