JavaScript模板字符串怎么用_它能替代拼接吗？_技术教程

模板字符串可替代字符串拼接且更安全易读，但需正确使用反引号和${}语法，支持多行、表达式、函数调用；错误用单/双引号包裹会导致变量不解析；它避免拼接常见错误并天然支持可选链与空值合并；纯静态字符串、动态引号需求或极致性能场景下仍宜用字面量；标签模板函数可实现转义、沙箱等DSL能力，但插值逻辑应保持简洁。

能替代，而且更安全、更易读——但得用对地方，否则反而增加出错概率。

模板字符串的基本写法和变量插入

用反引号 ` 包裹，内部用 ${} 插入表达式。它不是简单“换种写法”，而是支持多行、支持嵌套表达式、支持函数调用的字符串构造方式。

常见错误是把单引号或双引号当模板字符串用，比如写成 'Hello ${name}'，这不会解析变量，只会原样输出。

正确：
```
`Hello ${name}`
```
支持多行：
```
`Line 1
Line 2`
```

支持任意表达式：

`Sum: ${a + b}, Valid: ${arr.length > 0}`

支持函数调用：
```
`Name: ${getName()}`
```

为什么它比 `+` 拼接更安全

拼接容易漏空格、少引号、错顺序，尤其嵌套对象属性时；模板字符串天然避免这些低级错误，且在运行时才求值，便于调试。

典型翻车场景："User: " + user.name + ", age: " + user.profile.age —— 如果 user.profile 是 undefined，直接报 Cannot read property 'age' of undefined；而模板字符串里写 ${user.profile?.age} 就能用可选链安全处理。

拼接难加默认值："Age: " + (user.age || 0)
模板字符串更直观：`Age: ${user.age || 0}`
可选链 + 空值合并也更自然：${user.profile?.city ?? 'Unknown'}

不能无脑替代的所有情况

模板字符串不是万能胶。它在以下场景反而不合适：

纯静态字符串（无变量）：用 'abc' 或 "abc" 更轻量，V8 对字面量有优化
需要动态选择引号类型时：比如生成 HTML 属性值，`` 比 "" 好，但如果 cls 本身含反引号，就得转义或换方案
大量重复拼接循环中：如构建超长日志字符串，Array.join() 或 String.concat() 在某些引擎下性能略优（不过现代 JS 引擎差异已极小）


模板字符串里不能直接展开对象：写 ${obj} 会调用 toString()，得到 [object Object]，得显式写 ${JSON.stringify(obj)}



标签模板函数：进阶但常被忽略的用法
模板字符串可以配合函数使用，实现 SQL 转义、HTML 沙箱、国际化等逻辑。这不是语法糖，而是真正的 DSL 支持机制。
例如防 XSS 的简单 HTML 渲染函数：html`${userInput}`，其中 html 是你写的函数，能对每个插值做转义。

签名固定：function html(literals, ...substitutions) { }


literals 是不含插值的字符串数组，substitutions 是插值结果数组
常见库如 lit-html、styled-components 都基于此机制
注意：不要自己写“通用模板函数”去替代 eval 或服务端渲染，风险极高

真正麻烦的不是语法，而是插值里写复杂逻辑时缺乏 IDE 提示、调试困难；建议插值内容尽量保持简单，复杂计算提前赋值给变量再引用。