JavaScript模板字符串使用教程

JavaScript模板字符串以反引号（`）定义，彻底革新了字符串处理方式：它天然支持多行文本、嵌入任意表达式（如运算、函数调用、三元判断、可选链等），无需转义特殊字符，大幅提升了代码的可读性与维护性；但需谨记——它不是简单的拼接升级，而是具备语法语义能力的字符串字面量，错误使用单双引号会导致插值失效，缩进会原样保留影响输出，复杂嵌套建议拆解为变量，再配合标签函数（如String.raw、自定义html/sql标签）还能实现自动转义、校验甚至编译优化，真正让字符串既强大又可控。

JavaScript 模板字符串不是“更高级的字符串拼接”，而是支持多行、嵌入表达式、无需转义的字符串字面量——它解决的是传统字符串在可读性、维护性和表达能力上的硬伤。

模板字符串用 `（反引号）而不是 ' 或 "

这是最基础但最容易忽略的点：写成 "Hello ${name}" 不会生效，必须是 `Hello ${name}`。浏览器或 Node.js 遇到单双引号里的 ${...} 会当作普通文本，不会解析为插值。

• ✅ 正确：`Hello ${user.name}`
• ❌ 错误："Hello ${user.name}"（输出就是字面量 Hello ${user.name}）
• ⚠️ 注意：` 在英文键盘是 Esc 下方、Tab 上方那个键，不是单引号

${...} 里可以放任意 JavaScript 表达式，不只是变量

它不是“变量占位符”，而是运行时求值的表达式容器。这意味着你可以直接调用函数、做运算、访问属性链，甚至写三元表达式。

• `Price: $${(price * 1.1).toFixed(2)}` —— 计算 + 格式化一步到位
• `Status: ${isActive ? 'Online' : 'Offline'}` —— 内联条件逻辑
• `ID: ${data?.id ?? 'unknown'}` —— 支持可选链和空值合并
• ⚠️ 注意：不能放语句（如 if、for），只接受表达式

多行字符串天然支持，但缩进会原样保留

换行符会被保留在最终字符串中，所以直接写会多出大量空格和制表符，影响 JSON 输出或 DOM 渲染。

• ✅ 清晰写法：

  `Line 1
  Line 2
  Line 3`

• ⚠️ 常见坑：

  const html = `
    
  Hello
  `;

  ——开头换行和缩进都会变成字符串的一部分
• ? 补救方式：用 .trim() 或模板字符串内手动换行+字符串连接，例如：`` + `

  Hello

  ` + ``

标签函数让模板字符串具备“处理逻辑”的能力

模板字符串本身只是语法糖，但加上前缀函数（如 html`...`、sql`...`），就能实现自动转义、语法校验、甚至编译优化。

• 常见用例：String.raw`C:\temp\notes.txt` —— 避免反斜杠被解释为转义
• 自定义标签示例：

  function upper(strings, ...values) {
    return strings[0] + values.map(v => String(v).toUpperCase()).join('') + strings[1];
  }
  upper`hello ${'world'}`; // → "hello WORLD"

• ⚠️ 注意：标签函数第一个参数是字符串数组（静态部分），后续才是插值结果；不要漏掉对 strings 的处理

真正容易被忽略的是嵌套模板字符串的可读性——当 ${...} 里又出现模板字符串时，反引号层级一多，眼睛就容易看错边界。这时候宁可拆成变量，也别硬塞三层 `...${`...${...}`...}`...。

好了，本文到此结束，带大家了解了《JavaScript模板字符串使用教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！