模板字符串可替代字符串拼接且更安全易读，但需正确使用反引号和${}语法，支持多行、表达式、函数调用；错误用单/双引号包裹会导致变量不解析；它避免拼接常见错误并天然支持可选链与空值合并；纯静态字符串、动态引号需求或极致性能场景下仍宜用字面量；标签模板函数可实现转义、沙箱等dsl能力，但插值逻辑应保持简洁。
能替代，而且更安全、更易读——但得用对地方，否则反而增加出错概率。
模板字符串的基本写法和变量插入
用反引号 ` 包裹，内部用 ${} 插入表达式。它不是简单“换种写法”，而是支持多行、支持嵌套表达式、支持函数调用的字符串构造方式。
常见错误是把单引号或双引号当模板字符串用，比如写成 'Hello ${name}'，这不会解析变量，只会原样输出。
- 正确：
`Hello ${name}` - 支持多行：
`Line 1 Line 2`
- 支持任意表达式：
`Sum: ${a + b}, Valid: ${arr.length > 0}` - 支持函数调用：
`Name: ${getName()}`
为什么它比 + 拼接更安全
拼接容易漏空格、少引号、错顺序，尤其嵌套对象属性时；模板字符串天然避免这些低级错误，且在运行时才求值，便于调试。
立即学习“Java免费学习笔记（深入）”；
典型翻车场景："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 属性值，
`<div class="${cls}">` 比 <code>"<div class='\""' cls>" 好，但如果 <code>cls本身含反引号，就得转义或换方案 - 大量重复拼接循环中：如构建超长日志字符串，
Array.join()或String.concat()在某些引擎下性能略优（不过现代 JS 引擎差异已极小） - 模板字符串里不能直接展开对象：写
${obj}会调用toString()，得到[object Object]，得显式写${JSON.stringify(obj)} - 签名固定：
function html(literals, ...substitutions) { } -
literals是不含插值的字符串数组，substitutions是插值结果数组 - 常见库如
lit-html、styled-components都基于此机制 - 注意：不要自己写“通用模板函数”去替代
eval或服务端渲染，风险极高
标签模板函数：进阶但常被忽略的用法
模板字符串可以配合函数使用，实现 SQL 转义、HTML 沙箱、国际化等逻辑。这不是语法糖，而是真正的 DSL 支持机制。
例如防 XSS 的简单 HTML 渲染函数：html`<div>${userInput}</div>`，其中 html 是你写的函数，能对每个插值做转义。
真正麻烦的不是语法，而是插值里写复杂逻辑时缺乏 IDE 提示、调试困难；建议插值内容尽量保持简单，复杂计算提前赋值给变量再引用。
