javascript字符串插值本身几乎无性能开销，引擎在编译期优化；真正瓶颈在于高频拼接、嵌套计算、不当对象创建及副作用操作。
JavaScript 中的字符串插值（即模板字面量 `` 里用 ${...} 插入变量）本身几乎没有运行时性能开销，引擎在编译阶段就做了大量优化，真正影响性能的是后续操作——比如高频拼接、嵌套计算、或不当的对象创建。
插值本身不产生额外内存分配
像 `Hello ${name}` 这样的写法，V8 等现代引擎会将其编译为高效的字节码序列。变量 name 的读取和字符串拼接被内联处理，不会临时包装成对象，也不会触发堆内存分配。即使 name 是原始值（如字符串、数字），${name} 不等于 new String(name)，它只是语义上的“求值+连接”，引擎底层直接复用已有字符串缓冲区或使用紧凑的内部表示。
实测表明：单次插值耗时通常在纳秒级，远低于一次 DOM 操作或一次 Promise 微任务调度。
真正的开销来自“副作用”和“重复构造”
以下情况会让插值变成性能瓶颈：
- 在循环中反复拼接长模板，例如
for (let i = 0; i ${data[i].name}`; }—— 每次+=都生成新字符串，旧字符串变垃圾，GC 压力陡增 - 插值表达式含复杂逻辑，如
${user.roles.includes('admin') ? renderAdminPanel() : ''}，每次执行都调用函数、遍历数组、甚至触发渲染 - 误用对象方法导致隐式装箱，例如
${(obj.id || '').toString().padStart(6, '0')}，其中.toString()虽由引擎优化，但.padStart()必须生成新字符串
高效替代方案与实践建议
不需要放弃插值，只需规避常见陷阱：
- 大量静态文本拼接优先用数组
join：先parts.push(`<div>`, name, `</div>`)，最后parts.join('') - 模板结构固定时，封装为纯函数：
const makeItem = ({ id, title }) => `<li data-id="${id}">${title}</li>`，利于 JIT 编译和缓存 - 避免在插值中调用非纯函数（如
Date.now()、Math.random()、DOM 查询），它们无法被引擎提前推断或优化 - 若需动态字段路径（如
${user.profile.name}），用解构代替eval或Function构造器，例如const { profile: { name } } = user
插值是安全、简洁、高性能的语言特性，问题不在它本身，而在我们如何使用它。
