JavaScript 字符串模板
什么是字符串模板？
JavaScript的字符串模板（也称为模板字面量）是ES6（ECMAScript 2015）引入的一项强大特性，它为创建字符串提供了更灵活、更直观的方式。与传统的字符串拼接相比，字符串模板可以让你的代码更加简洁、可读，同时提供了更强大的功能。
备注
字符串模板使用反引号 ` 而不是单引号 ' 或双引号 " 来定义。
基本语法
字符串模板的基本语法非常简单：
const greeting = `Hello, World!`;
console.log(greeting); // 输出: Hello, World!
看起来很像普通字符串，对吧？但真正的强大之处在于以下特性：
字符串模板的主要特性
1. 多行字符串
使用模板字面量，你可以轻松创建多行字符串，而无需使用换行符 \n：
// 传统方式
const multiLine = "这是第一行\n" +
"这是第二行\n" +
"这是第三行";
// 使用模板字面量
const multiLineTemplate = `这是第一行
这是第二行
这是第三行`;
console.log(multiLineTemplate);
// 输出:
// 这是第一行
// 这是第二行
// 这是第三行
2. 嵌入表达式
你可以在模板字面量中嵌入表达式，使用 ${expression} 语法：
const name = "小明";
const age = 25;
// 传统方式
const introduction = "我叫" + name + "，今年" + age + "岁。";
// 使用模板字面量
const introTemplate = `我叫${name}，今年${age}岁。`;
console.log(introTemplate); // 输出: 我叫小明，今年25岁。
表达式可以包含任何有效的JavaScript表达式 ，包括函数调用、计算等：
const price = 19.99;
const quantity = 2;
const total = `总价: ¥${(price * quantity).toFixed(2)}`;
console.log(total); // 输出: 总价: ¥39.98
3. 嵌套模板
你可以在模板字面量中嵌套其他模板：
const person = { name: "小红", hobbies: ["阅读", "游泳", "旅行"] };
const bio = `
${person.name}喜欢:
${person.hobbies.map(hobby => `- ${hobby}`).join('\n ')}
`;
console.log(bio);
// 输出:
// 小红喜欢:
// - 阅读
// - 游泳
// - 旅行
标签模板字面量
模板字面量还有一个更高级的特性——标签模板。这允许你使用函数来处理模板字面量：
function highlight(strings, ...values) {
let result = '';
strings.forEach((string, i) => {
result += string;
if (values[i]) {
// 将值用粗体标记包装起来
result += `<b>${values[i]}</b>`;
}
});
return result;
}
const product = "JavaScript完全指南";
const price = 99;
const productInfo = highlight`这本《${product}》仅售${price}元！`;
console.log(productInfo);
// 输出: 这本《<b>JavaScript完全指南</b>》仅售<b>99</b>元！
在上面的例子中，highlight函数接收原始字符串部分和插入的表达式值作为单独的参数，然后可以进行自定义处理。
实际应用案例
案例1：动态生成HTML
function createUserCard(user) {
return `
<div class="user-card">
<h2>${user.name}</h2>
<p>年龄: ${user.age}</p>
<p>职业: ${user.job}</p>
<p>技能: ${user.skills.join(', ')}</p>
</div>
`;
}
const user = {
name: "张三",
age: 28,
job: "前端开发工程师",
skills: ["HTML", "CSS", "JavaScript", "React"]
};
document.body.innerHTML = createUserCard(user);
案例2：SQL查询构建
function buildQuery(table, filters) {
const whereClause = Object.entries(filters)
.map(([key, value]) => `${key} = '${value}'`)
.join(' AND ');
return `
SELECT *
FROM ${table}
WHERE ${whereClause};
`;
}
const query = buildQuery('users', { status: 'active', role: 'admin' });
console.log(query);
// 输出:
// SELECT *
// FROM users
// WHERE status = 'active' AND role = 'admin';
案例3：国际化文本模板
const translations = {
zh: {
welcome: name => `欢迎，${name}！`,
items: count => `你有${count}个项目`
},
en: {
welcome: name => `Welcome, ${name}!`,
items: count => `You have ${count} item${count !== 1 ? 's' : ''}`
}
};
function getMessage(lang, key, ...args) {
return translations[lang][key](...args);
}
console.log(getMessage('zh', 'welcome', '小李')); // 输出: 欢迎，小李！
console.log(getMessage('en', 'items', 5)); // 输出: You have 5 items
字符串模板vs传统字符串拼接
让我们比较一下使用字符串模板和传统字符串拼接的区别：
// 传统字符串拼接
const name = '李明';
const score = 95;
const subject = '数学';
const message1 = name + '在' + subject + '考试中得了' + score + '分，' +
(score >= 90 ? '表现优秀！' : '继续努力！');
// 使用字符串模板
const message2 = `${name}在${subject}考试中得了${score}分，${score >= 90 ? '表现优秀！' : '继续努力！'}`;
console.log(message1); // 李明在数学考试中得了95分，表现优秀！
console.log(message2); // 李明在数学考试中得了95分，表现优秀！
提示
使用模板字面量不仅代码更简洁，还可以提高代码的可读性，减少出错机会。
性能考虑
虽然字符串模板在大多数情况下非常有用，但在某些高性能要求的场景中，需要谨慎使用。当需要频繁创建大量字符串时，传统方法有时可能更高效。
// 在循环中频繁拼接字符串的情况
let result = '';
for (let i = 0; i < 1000; i++) {
// 对于非常简单的情况，有时候 += 操作符可能更快
result += i + ',';
// 而不是:
// result = `${result}${i},`;
}
警告
在绝大多数日常开发中，性能差异微不足道。优先考虑代码的可读性和可维护性。
总结
JavaScript字符串模板（模板字面量）是ES6中引入的强大功能，它提供了：
- 创建多行字符串的简便方法
- 在字符串中嵌入表达式的直观语法
- 通过标签模板进行高级字符串处理的能力
与传统字符串拼接相比，字符串模板让代码更加 简洁、可读，也更不容易出错。无论是构建HTML、生成SQL查询，还是处理国际化文本，字符串模板都能大大提高开发效率。
练习
- 创建一个函数，接收用户信息（姓名、年龄、城市）并返回一个自我介绍的字符串，使用模板字面量。
- 使用标签模板实现一个简单的HTML转义函数，能够自动转义嵌入的值中的HTML特殊字符。
- 创建一个生成表格HTML的函数，接收表头数组和数据数组，使用字符串模板生成表格HTML代码。