模板字符串：告别字符串拼接地狱

在 ES6 出现之前，如果你想在 JavaScript 里拼一段带变量的 HTML，那简直是一场噩梦。

// ❌ 过去：到处都是引号和加号
var name = '小明';
var age = 25;
var html = '<div class="user">' +
           '<h1>' + name + '</h1>' +
           '<p>年龄：' + age + '</p>' +
           '</div>';

只要少写一个 + 或者漏掉一个单引号，整个代码就会崩掉。更别提那种看一眼就让人眼花缭乱的层级嵌套了。

幸运的是，我们有了模板字符串（Template Literals）。今天，小明就带你看看这个被称为“拯救前端审美”的特性。

一、基础语法：反引号的力量

模板字符串使用反引号（ ` ）而不是单双引号。

1.1 变量嵌入

通过 ${expression} 语法，你可以直接在字符串里插入任何变量或表达式。

// ✅ 现在：清爽利落
const name = '小明';
const age = 25;
const html = `
  <div class="user">
    <h1>${name}</h1>
    <p>年龄：${age}</p>
  </div>
`;

1.2 多行文本

看到了吗？上面的代码直接换行了！在普通字符串里，换行需要写 \n，但在模板字符串里，你看到的换行就是真正的换行。这在写 SQL 语句或者 HTML 模板时非常方便。

二、不只是变量

${} 里面不仅可以放变量，还可以放任何有效的 JavaScript 表达式。

2.1 数学运算

const price = 100;
const tax = 0.1;
console.log(`总价是：${price * (1 + tax)}`);

2.2 函数调用

function sayHi() { return '你好！'; }
console.log(`系统消息：${sayHi()}`);

2.3 三元运算符

const isLogin = true;
console.log(`状态：${isLogin ? '已登录' : '未登录'}`);

三、进阶：标签模板（Tagged Templates）

这才是模板字符串最硬核的玩法。你可以在模板字符串前面加一个函数名，这个函数会自动接收解析后的字符串和变量。

function highlight(strings, ...values) {
  // strings: 被 ${} 分割后的字符串数组
  // values: ${} 里的值
  return strings.reduce((prev, curr, i) => {
    return `${prev}${curr}<span class="highlight">${values[i] || ''}</span>`;
  }, '');
}

const name = '小明';
const result = highlight`欢迎 ${name} 来到我的主页`;
// 结果：'欢迎 <span class="highlight">小明</span> 来到我的主页'

为什么这个很有用？ 流行的 CSS-in-JS 库 styled-components 和 SQL 防注入库，底层都是基于这个原理实现的。

四、注意事项

转义：如果你想在模板字符串里写一个真正的 ${，你需要转义：\$\{。
性能：在大多数场景下，模板字符串和普通拼接性能没区别。但在极端的高频循环里，简单的加号拼接可能会稍微快那么一点点（但通常可以忽略不计）。

总结

反引号定义，${} 嵌入。
支持多行文本，保留所有空格和换行。
可以嵌入复杂表达式。
标签模板是构建高级库的基石。

小明建议： 只要涉及到字符串和变量的混合，无脑使用模板字符串。它不仅让代码更易读，还能有效减少拼写错误导致的 Bug。

“为什么模板字符串用反引号？” “因为单引号和双引号已经为了谁才是正统打得不可开交了，反引号决定渔翁得利。” —— 小明

最后，送你一个冷笑话：字符串 A 问字符串 B ：“你最近怎么变胖了？” 字符串 B 叹了口气：“别提了，自从用了模板字符串，我肚子里塞的东西（变量）越来越多了。”

模板字符串：告别字符串拼接地狱

相关标签