模板字符串如何拼接？

本文深入解析了JavaScript中模板字面量（即用反引号`定义的“模板字符串”）的核心用法与实战陷阱：它不仅支持${...}插值、天然多行和原始字符串功能，更需警惕反引号误写为中文符号、插值语法错误、缩进导致的空格污染、IE全版本不兼容等常见坑点，同时强调在服务端渲染、动态代码执行等场景下忽视转义可能引发XSS等严重安全风险——掌握这些细节，才能真正安全、高效地用好这一现代JS必备特性。

JavaScript 中没有叫“模板字面量_”的语法或标准术语，下划线不是合法标识符的一部分，模板字面量_ 这种写法会直接报错：SyntaxError: Invalid or unexpected token。你实际想查的，是反引号（`）包裹的 模板字面量（Template Literal），也常被叫作“模板字符串”。

模板字面量用反引号，不是单引号或双引号

这是最基础但最容易踩的坑：必须用 `，不是 ' 或 "。混用会导致语法错误或静默失败（比如当反引号被误写成中文符号时）。

• `hello ${name}` ✅ 正确
• "hello ${name}" ❌ 变成普通字符串，${name} 不解析
• `hello ${name}`（用了中文反引号 `）❌ 报 Invalid or unexpected token

插值表达式必须写在 ${...} 里，且内部不能有未闭合的括号或引号

${...} 是插值语法的唯一入口，里面是 JS 表达式，不是字符串拼接。常见错误包括：

• 忘记写 $，写成 `hello {name}` → 输出字面量 {name}
• 在 ${...} 里嵌套未闭合的引号：${obj."key"} → 语法错误，应写 ${obj["key"]} 或 ${obj.key}
• 写多层逻辑时漏括号：${a ? b : c + d} 建议加括号明确优先级：${(a ? b : c) + d}

换行和缩进会原样保留，注意空格污染

模板字面量天然支持多行，但缩进空格也会进入最终字符串，容易导致 HTML 渲染错位或 JSON 格式异常。

`
  <p>Hello ${name}</p>
`

上面这段会产生带缩进的字符串，如果用于生成 HTML 片段，

前的两个空格会变成文本节点。解决方法：

• 用 .trim() 或 .replace(/\s+/g, ' ') 清理空白
• 把换行写在插值外，用 \` 拼接多行（不推荐，失去可读性）
• 用 String.raw 避免转义干扰（如路径、正则）：String.raw`C:\Users\name`

性能与兼容性：现代环境放心用，但 IE 完全不支持

模板字面量 是 ES2015（ES6）特性，所有现代浏览器和 Node.js ≥ 4 都支持。但 IE 所有版本都不支持——如果你的项目还需兼容 IE，必须用 Babel 转译，或退回到 + 拼接。

• Node.js 环境：确认 process.version ≥ v4.0.0
• 浏览器环境：查 typeof `x` === 'string' 是否为 true（简单检测）
• 不要在 eval() 或 Function() 构造器里动态拼接模板字面量，容易引发注入风险

真正要注意的不是“怎么写”，而是“在哪写”——比如服务端渲染中模板字面量生成的 HTML 如果含未转义用户输入，就可能触发 XSS；又比如在正则字面量里混用模板字面量，得手动处理 / 和 $ 的转义。这些细节比语法本身更常出问题。

终于介绍完啦！小伙伴们，这篇关于《模板字符串如何拼接？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！