JavaScript字符串拼接应优先用模板字面量，批量处理用map+join，超大文本用数组push+join，固定模板用replace；避免循环中用+=或${}累加，以减少内存开销和提升性能。
JavaScript 字符串拼接看似简单，但不当写法会显著拖慢执行速度、抬高内存占用，尤其在循环中或处理大批量数据时。核心优化方向是减少中间字符串创建次数、利用引擎级预分配机制，并匹配场景选择最合适的工具。
优先用模板字面量替代 + 拼接
模板字面量（反引号）在现代 JS 引擎（如 V8）中已深度优化：引擎能提前估算总长度，直接分配内存并逐段写入，避免频繁复制。它比 + 运算符更安全、可读性更高，也天然支持变量嵌入和多行结构。
- ✅ 推荐写法：
const url = `https://api.com?id=${id}&name=${name}&type=${type}`; - ❌ 避免写法：
const url = "https://api.com?id=" + id + "&name=" + name + "&type=" + type; - ⚠️ 注意：单次拼接用模板字面量没问题；但在 for 循环里反复用
`${a}${b}`累加（即str = `${str}${item}`），性能仍不如数组 join，因每次仍需构造新字符串。
批量拼接首选 map + join
当目标是把数组元素转为格式化字符串（如 URL 参数、CSV 行、HTML 列表项），map() 配合 join() 是最优解。它只产生一次最终字符串，内存开销线性可控，且逻辑清晰、无边界判断。
- ✅ 推荐写法：
const params = ids.map(id => `id=${encodeURIComponent(id)}`).join('&'); - ❌ 不推荐写法：
let str = ''; str += `id=${ids[0]}`; ids.slice(1).forEach(id => str += `&id=${id}`);（手动拆首尾+循环累加，易出错且低效） - ? 小技巧：join 的分隔符可以是任意字符串，包括空字符串
join('')或换行符join('\n')，无需额外 trim 或 replace。
超大文本拼接用数组 push + join
如果拼接内容来自多个来源（如日志块、模板片段、动态生成的 HTML 片段），且数量不可预估或需条件插入，建议先推入数组，最后统一 join。这种方式完全规避了字符串不可变性带来的重复拷贝问题。
立即学习“Java免费学习笔记（深入）”；
- ✅ 推荐写法：
const parts = []; if (showTitle) parts.push(`<h2>${title}</h2>`); parts.push(`<p>${content}</p>`); const html = parts.join(''); - ❌ 避免写法：
let html = ''; if (showTitle) html += `<h2>${title}</h2>`; html += `<p>${content}</p>`;（每次 += 都新建字符串对象） - ? 补充：数组本身轻量，push 是 O(1) 操作；join 则由引擎底层高效实现，实测 10 万次拼接比 += 快 70 倍以上，内存峰值降低 90%。
格式化固定结构用 String.prototype.replace 或正则
对于带占位符的静态模板（如 SQL 模板、邮件正文），比拼接更安全的方式是用 replace 替换命名占位符。它不依赖顺序，可防参数错位，也便于复用与校验。
- ✅ 推荐写法：
const tpl = 'SELECT * FROM users WHERE id = {id} AND status = "{status}"'; const sql = tpl.replace(/{(\w+)}/g, (_, key) => String(params[key] ?? '')); - ⚠️ 注意：避免直接拼接用户输入到 SQL 或 HTML 中；务必配合
encodeURIComponent、DOMPurify或模板引擎做转义。 - ? 进阶：可用
new Function或template literals + eval实现简易模板函数，但仅限可信上下文，生产环境慎用。
