在前端开发中，我们经常需要拼接字符串，比如拼接 HTML 标签、拼接 URL 参数、拼接 SQL 语句等等。在 ES6 中，我们可以使用模板字符串来更方便地完成这些任务。
什么是模板字符串
模板字符串是一种新的字符串语法，使用反引号 ` 包裹字符串内容，其中可以插入变量或表达式，插入的变量或表达式需要用 ${} 包裹。
示例：
const name = 'Tom';
const age = 18;
const message = `我的名字是 ${name}，我今年 ${age} 岁。`;
console.log(message); // 输出：我的名字是 Tom，我今年 18 岁。模板字符串的优点
使用模板字符串可以带来以下优点：
更易读
使用模板字符串可以将字符串的拼接写在一行中，不需要使用加号进行多行拼接，从而使代码更加清晰易读。
示例：
// 传统写法
const message = 'Hello, ' + name + '! ' +
'Welcome to our website. ' +
'You can find more information on our page.';
// 使用模板字符串
const message = `Hello, ${name}! Welcome to our website. You can find more information on our page.`;更易维护
使用模板字符串可以将变量和字符串的拼接写在一起，从而减少代码行数，使代码更加简洁，易于维护。
示例：
// 传统写法
const url = 'https://example.com/api/user?id=' + userId + '&name=' + userName + '&age=' + userAge;
// 使用模板字符串
const url = `https://example.com/api/user?id=${userId}&name=${userName}&age=${userAge}`;更安全
使用模板字符串可以避免 XSS 攻击，因为插入的变量或表达式会被自动转义，从而防止恶意代码的注入。
示例：
// 传统写法
const html = '<div>' + content + '</div>';
// 使用模板字符串
const html = `<div>${content}</div>`;模板字符串的进阶用法
除了基本的插值功能外，模板字符串还有一些进阶用法，可以使代码更加灵活和可维护。
标签模板
标签模板是一种特殊的模板字符串，可以将模板字符串作为参数传递给一个函数，并在函数中对模板字符串进行处理。
示例：
// javascriptcn.com 代码示例
function formatMessage(strings, ...values) {
let result = '';
for (let i = 0; i < values.length; i++) {
result += strings[i];
result += values[i];
}
result += strings[strings.length - 1];
return result;
}
const name = 'Tom';
const age = 18;
const message = formatMessage`我的名字是${name}，我今年${age}岁。`;
console.log(message); // 输出：我的名字是Tom，我今年18岁。多行字符串
使用模板字符串可以非常方便地创建多行字符串，而不需要使用转义符 \n。
示例：
const html = `
<div>
<span>hello</span>
<span>world</span>
</div>
`;总结
使用 ES6 中的模板字符串可以使代码更易读、易维护和更安全。除了基本的插值功能外，标签模板和多行字符串等进阶用法也可以使代码更加灵活和可维护。在实际开发中，我们应该尽可能地使用模板字符串来完成字符串拼接任务。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6552289ad2f5e1655dbe407b