模板字面量支持嵌入表达式、多行字符串和标签模板,可提升代码可读性与灵活性。1. 可在${}中嵌入变量、函数调用或三元运算符,实现动态内容插入;2. 直接换行生成多行字符串,适用于HTML或SQL构建;3. 标签模板通过自定义函数解析模板,用于XSS防护、样式化等;4. 结合逻辑运算符实现条件渲染与默认值处理,增强健壮性。

模板字面量(Template Literals)在JavaScript中不只是用来拼接字符串的简单工具,它还有一些强大的高级用法,能显著提升代码的可读性和灵活性。
1. 嵌入表达式与复杂逻辑
模板字面量支持在${}中嵌入任意JavaScript表达式,包括函数调用、三元运算符、甚至对象属性访问。
例如:
const user = { name: 'Alice', age: 25 };const greeting = `Hello, ${user.name}! You are ${user.age >= 18 ? 'an adult' : 'a minor'}.`;
// 输出:Hello, Alice! You are an adult.
也可以调用函数:
立即学习“Java免费学习笔记(深入)”;
function formatPrice(price) {return `$${price.toFixed(2)}`;
}
const item = `Price: ${formatPrice(19.9)}`; // Price: $19.90
2. 多行字符串(Multiline Strings)
传统字符串需要使用转义字符\n换行,而模板字面量直接支持换行,保持代码结构清晰。
这种写法非常适合生成HTML片段或SQL语句,无需拼接或转义。
3. 标签模板(Tagged Templates)
这是模板字面量最强大的特性之一。通过在模板前添加一个函数名(即“标签”),可以自定义模板的解析方式。
标签函数接收一个字符串数组和若干个表达式值,常用于防止XSS、格式化输出、国际化等场景。
function highlight(strings, ...values) {let result = '';
strings.forEach((str, i) => {
result += str;
if (values[i]) {
result += `${values[i]}`;
}
});
return result;
}
const name = "Bob";
const message = highlight`Hello, ${name}! Welcome!`;
// 返回:Hello, Bob! Welcome!
常见库如styled-components和graphql-tag都基于标签模板实现。
4. 条件嵌入与默认值
可以在模板中结合逻辑运算符实现条件内容插入。
const items = ['apple', 'banana'];const list = `
- ${items.map(item => `
- ${item} `).join('') || '
- No items '}
利用逻辑||或空值合并??处理undefined或null情况:
const output = `Name: ${user.name ?? 'Unknown'}`; 基本上就这些。模板字面量结合表达式、多行支持和标签函数,让字符串处理更灵活、安全且易维护。










