JavaScript中的标签模板字面量有哪些高级用法？-js教程-PHP中文网

JavaScript中的标签模板字面量有哪些高级用法？

夢幻星辰

发布： 2025-09-25 11:07:01

原创

248人浏览过

标签模板通过自定义函数控制解析逻辑，可实现HTML转义、国际化、CSS注入和DSL构建。1. safeHtml函数对用户输入转义，防止XSS攻击；2. t函数结合语言包实现多语言支持，结构清晰易维护；3. css函数动态生成样式并注入head，避免全局污染；4. query函数构造SQL语句，提升代码可读性。核心在于接收字符串数组和插值数组，实现逻辑处理而非简单拼接。

javascript中的标签模板字面量有哪些高级用法？

JavaScript中的标签模板字面量（Tagged Template Literals）不仅仅是字符串拼接的语法糖，它还能实现更复杂的逻辑处理。通过自定义标签函数，你可以控制模板的解析方式，从而实现诸如国际化、HTML转义、CSS注入、DSL构建等高级功能。

1. 实现安全的HTML转义

在动态生成HTML时，直接插入用户输入可能导致XSS攻击。使用标签模板可以自动对变量进行转义。

示例：创建一个safeHtml标签函数，防止恶意脚本注入：

function safeHtml(strings, ...values) {
  const escape = (str) => 
    String(str).replace(/[&<>"']/g, (match) => ({
      '&': '&',
      '<': '<',
      '>': '>',
      '"': '"',
      "'": '''
    }[match]));
<p>let result = '';
strings.forEach((str, i) => {
result += str + (i < values.length ? escape(values[i]) : '');
});
return result;
}</p><p>const userInput = '<script>alert("xss")</script>';
const html = safeHtml<code><div>${userInput}</div></code>;
// 输出: <div><script>alert("xss")</script></div>

登录后复制

这个方法适用于服务端渲染或前端动态内容插入，能有效提升安全性。

立即学习“Java免费学习笔记（深入）”；

2. 国际化与多语言支持

标签模板可结合语言包实现自然的翻译语法。

例如，定义一个t标签函数，根据当前语言环境返回对应译文：

const translations = {
  en: { greeting: 'Hello', name: 'Name' },
  zh: { greeting: '你好', name: '姓名' }
};
<p>let locale = 'zh';</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2290">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/175686939683618.png" alt="AiPPT模板广场">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2290">AiPPT模板广场</a>
                            <p>AiPPT模板广场-PPT模板-word文档模板-excel表格模板</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AiPPT模板广场">
                                <span>147</span>
                            </div>
                        </div>
                        <a href="/ai/2290" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AiPPT模板广场">
                        </a>
                    </div>
                <p>function t(strings, ...keys) {
const lang = translations[locale];
return strings.map((str, i) => 
str + (keys[i] ? lang[keys[i]] || keys[i] : '')
).join('');
}</p><p>const message = t<code>{greeting}，这是你的 {name}</code>;
// locale为'zh'时输出：“你好，这是你的 姓名”

登录后复制

这种方式让翻译文本结构清晰，便于维护和提取。

3. 构建CSS-in-JS样式系统

许多现代UI库（如styled-components）利用标签模板生成唯一类名并注入CSS。

简单实现一个轻量级CSS注入标签：

function css(strings, ...expressions) {
  const styleText = strings.reduce((acc, str, i) => 
    acc + str + (expressions[i] || ''), ''
  );
<p>const style = document.createElement('style');
style.textContent = styleText;
document.head.appendChild(style);</p><p>return <code>generated-${Date.now()}</code>;
}</p><p>// 使用
const className = css<code> .box { padding: ${'10px'}; background: red; } </code>;

登录后复制

这适合组件化开发中动态样式需求，避免全局污染。

4. 创建领域特定语言（DSL）

标签模板可用于解析结构化数据，比如写一个查询构造器：

function query(strings, ...values) {
  let sql = '';
  strings.forEach((str, i) => {
    sql += str;
    if (i < values.length) {
      if (Array.isArray(values[i])) {
        sql += values[i].map(v => `'${v}'`).join(', ');
      } else {
        sql += `'${values[i]}'`;
      }
    }
  });
  return sql.trim();
}
<p>const userIds = [1, 2, 3];
const stmt = query<code>SELECT * FROM users WHERE id IN (${userIds})</code>;
// 输出: SELECT * FROM users WHERE id IN ('1', '2', '3')

登录后复制

这种模式让代码更具可读性，接近自然语言表达。

基本上就这些——标签模板的强大之处在于你能在字符串解析阶段介入逻辑，不只是拼接，而是转换、校验、封装。只要设计好标签函数，就能创造出符合项目需求的表达方式。不复杂但容易忽略的是，它接收的是两个参数：一个是字符串数组，另一个是插值结果数组，掌握这个结构就能灵活发挥。

以上就是JavaScript中的标签模板字面量有哪些高级用法？的详细内容，更多请关注php中文网其它相关文章！