跳到主要内容

JavaScript 字符串模板

什么是字符串模板?

JavaScript的字符串模板(也称为模板字面量)是ES6(ECMAScript 2015)引入的一项强大特性,它为创建字符串提供了更灵活、更直观的方式。与传统的字符串拼接相比,字符串模板可以让你的代码更加简洁、可读,同时提供了更强大的功能。

备注

字符串模板使用反引号 ` 而不是单引号 ' 或双引号 " 来定义。

基本语法

字符串模板的基本语法非常简单:

javascript
const greeting = `Hello, World!`;
console.log(greeting); // 输出: Hello, World!

看起来很像普通字符串,对吧?但真正的强大之处在于以下特性:

字符串模板的主要特性

1. 多行字符串

使用模板字面量,你可以轻松创建多行字符串,而无需使用换行符 \n

javascript
// 传统方式
const multiLine = "这是第一行\n" +
"这是第二行\n" +
"这是第三行";

// 使用模板字面量
const multiLineTemplate = `这是第一行
这是第二行
这是第三行`;

console.log(multiLineTemplate);
// 输出:
// 这是第一行
// 这是第二行
// 这是第三行

2. 嵌入表达式

你可以在模板字面量中嵌入表达式,使用 ${expression} 语法:

javascript
const name = "小明";
const age = 25;

// 传统方式
const introduction = "我叫" + name + ",今年" + age + "岁。";

// 使用模板字面量
const introTemplate = `我叫${name},今年${age}岁。`;

console.log(introTemplate); // 输出: 我叫小明,今年25岁。

表达式可以包含任何有效的JavaScript表达式,包括函数调用、计算等:

javascript
const price = 19.99;
const quantity = 2;
const total = `总价: ¥${(price * quantity).toFixed(2)}`;

console.log(total); // 输出: 总价: ¥39.98

3. 嵌套模板

你可以在模板字面量中嵌套其他模板:

javascript
const person = { name: "小红", hobbies: ["阅读", "游泳", "旅行"] };

const bio = `
${person.name}喜欢:
${person.hobbies.map(hobby => `- ${hobby}`).join('\n ')}
`;

console.log(bio);
// 输出:
// 小红喜欢:
// - 阅读
// - 游泳
// - 旅行

标签模板字面量

模板字面量还有一个更高级的特性——标签模板。这允许你使用函数来处理模板字面量:

javascript
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

javascript
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查询构建

javascript
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:国际化文本模板

javascript
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传统字符串拼接

让我们比较一下使用字符串模板和传统字符串拼接的区别:

javascript
// 传统字符串拼接
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分,表现优秀!
提示

使用模板字面量不仅代码更简洁,还可以提高代码的可读性,减少出错机会。

性能考虑

虽然字符串模板在大多数情况下非常有用,但在某些高性能要求的场景中,需要谨慎使用。当需要频繁创建大量字符串时,传统方法有时可能更高效。

javascript
// 在循环中频繁拼接字符串的情况
let result = '';
for (let i = 0; i < 1000; i++) {
// 对于非常简单的情况,有时候 += 操作符可能更快
result += i + ',';

// 而不是:
// result = `${result}${i},`;
}
警告

在绝大多数日常开发中,性能差异微不足道。优先考虑代码的可读性和可维护性。

总结

JavaScript字符串模板(模板字面量)是ES6中引入的强大功能,它提供了:

  1. 创建多行字符串的简便方法
  2. 在字符串中嵌入表达式的直观语法
  3. 通过标签模板进行高级字符串处理的能力

与传统字符串拼接相比,字符串模板让代码更加简洁、可读,也更不容易出错。无论是构建HTML、生成SQL查询,还是处理国际化文本,字符串模板都能大大提高开发效率。

练习

  1. 创建一个函数,接收用户信息(姓名、年龄、城市)并返回一个自我介绍的字符串,使用模板字面量。
  2. 使用标签模板实现一个简单的HTML转义函数,能够自动转义嵌入的值中的HTML特殊字符。
  3. 创建一个生成表格HTML的函数,接收表头数组和数据数组,使用字符串模板生成表格HTML代码。

进一步阅读