JavaScript中的标签模板字面量有哪些高级用法？
标签模板字面量是JavaScript中非常实用的特性，它允许我们在模板字面量前添加一个标签函数，从而对模板的内容进行自定义处理。除了基础的字符串拼接之外，还有很多高级用法可以应对不同的开发场景。
基础概念回顾
标签模板字面量的基本结构是标签函数紧跟模板字面量，标签函数会接收到两个部分作为参数：一个是模板字符串中被插值分割的静态字符串数组，另一个是所有的插值表达式的值。基础用法示例如下：
function simpleTag(strings, ...values) {
console.log(strings); // 静态字符串数组
console.log(values); // 插值表达式的值数组
return '处理结果';
}
const name = '张三';
const age = 20;
const result = simpleTag`姓名：${name}，年龄：${age}`;
console.log(result); // 输出：处理结果
高级用法一：字符串安全转义
在处理用户输入的内容拼接HTML时，很容易出现XSS注入风险，我们可以通过标签模板字面量实现自动转义功能，避免恶意脚本执行。下面的代码首先定义了转义HTML特殊字符的工具函数，然后封装了安全拼接HTML的标签函数，对用户输入的内容自动进行转义处理。
// 转义HTML特殊字符的函数
function escapeHtml(str) {
if (typeof str !== 'string') return str;
return str.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
// 安全拼接HTML的标签函数
function safeHtml(strings, ...values) {
let result = '';
strings.forEach((str, i) => {
result += str;
if (i < values.length) {
// 对每个插值进行转义处理
result += escapeHtml(values[i]);
}
});
return result;
}
const userInput = '<script>alert("恶意代码")</script>';
const html = safeHtml`用户输入内容：${userInput}`;
console.log(html); // 输出：用户输入内容：<script>alert("恶意代码")</script>
高级用法二：国际化多语言处理
在开发多语言应用时，我们可以通过标签模板字面量实现自动国际化替换，标签函数可以识别模板中的国际化键名，自动替换为对应语言的文本，同时还能处理插值的占位符替换。
// 模拟多语言资源包
const i18nResources = {
zh: {
'welcome': '欢迎，{name}！您有{count}条新消息',
'goodbye': '再见，{name}'
},
en: {
'welcome': 'Welcome, {name}! You have {count} new messages',
'goodbye': 'Goodbye, {name}'
}
};
// 获取当前语言，默认中文
let currentLang = 'zh';
// 国际化标签函数
function i18n(strings, ...keys) {
// 拼接键名，模板中的静态字符串部分拼接成国际化键名
const key = strings.join('{');
// 获取对应语言的模板
let template = i18nResources[currentLang][key] || key;
// 替换模板中的占位符
keys.forEach((value, index) => {
template = template.replace(`{${index}}`, value);
});
return template;
}
const userName = '李四';
const msgCount = 5;
// 使用标签模板字面量调用国际化函数
const welcomeText = i18n`welcome`(userName, msgCount);
console.log(welcomeText); // 输出：欢迎，李四！您有5条新消息
// 切换为英文
currentLang = 'en';
const welcomeTextEn = i18n`welcome`(userName, msgCount);
console.log(welcomeTextEn); // 输出：Welcome, 李四! You have 5 new messages
高级用法三：SQL语句安全拼接
在Node.js后端开发中拼接SQL语句时，如果直接拼接用户输入的内容，很容易出现SQL注入风险。我们可以通过标签模板字面量封装安全的SQL拼接函数，自动对用户输入的参数进行转义，避免注入问题。
// 转义SQL特殊字符的函数
function escapeSql(str) {
if (typeof str !== 'string') return str;
// 转义单引号为两个单引号，避免SQL注入
return str.replace(/'/g, "''");
}
// 安全拼接SQL的标签函数
function safeSql(strings, ...values) {
let result = '';
strings.forEach((str, i) => {
result += str;
if (i < values.length) {
const value = values[i];
// 如果是字符串类型，添加单引号并转义
if (typeof value === 'string') {
result += `'${escapeSql(value)}'`;
} else if (value === null || value === undefined) {
result += 'NULL';
} else {
result += value;
}
}
});
return result;
}
const userId = "1' OR '1'='1"; // 模拟恶意注入的输入
const userName = '测试用户';
// 安全拼接查询SQL
const querySql = safeSql`SELECT * FROM users WHERE id = ${userId} AND name = ${userName}`;
console.log(querySql); // 输出：SELECT * FROM users WHERE id = '1'' OR ''1''=''1' AND name = '测试用户'
高级用法四：样式字符串解析
在CSS-in-JS的场景中，我们可以通过标签模板字面量解析样式字符串，将模板中的样式规则转换为可操作的样式对象，方便后续处理。
// 解析样式字符串的标签函数
function style(strings, ...values) {
// 拼接完整的样式字符串
let styleStr = '';
strings.forEach((str, i) => {
styleStr += str;
if (i < values.length) {
styleStr += values[i];
}
});
// 解析样式字符串为对象
const styleObj = {};
const styleArr = styleStr.split(';').filter(item => item.trim());
styleArr.forEach(item => {
const [key, value] = item.split(':').map(part => part.trim());
if (key && value) {
// 将CSS属性名转换为驼峰命名
const camelKey = key.replace(/-([a-z])/g, (match, p1) => p1.toUpperCase());
styleObj[camelKey] = value;
}
});
return styleObj;
}
const primaryColor = '#409eff';
const paddingValue = '16px';
// 使用标签模板字面量定义样式
const buttonStyle = style`
background-color: ${primaryColor};
color: white;
padding: ${paddingValue} 32px;
border-radius: 4px;
border: none;
cursor: pointer;
`;
console.log(buttonStyle);
// 输出：{ backgroundColor: '#409eff', color: 'white', padding: '16px 32px', borderRadius: '4px', border: 'none', cursor: 'pointer' }
总结
标签模板字面量作为JavaScript的高级特性，通过自定义标签函数可以实现非常多的扩展能力，除了上述介绍的安全转义、国际化、SQL拼接、样式解析之外，还可以用于日志记录、测试断言、代码生成等多个场景。合理运用这一特性，可以让我们的代码更简洁、更安全，也能提高开发效率。
JavaScript标签模板字面量template_literal高级用法修改时间：2026-07-10 20:55:00