JavaScript 中 String 的拼接与操作性能-js教程-PHP中文网

现代 javascript 字符串拼接无绝对最快方法：小规模用 + 或 += 最简洁高效；大规模循环拼接（万次以上）array.join() 内存更优；模板字符串在可读性与中等规模性能间平衡最佳。

javascript 中 string 的拼接与操作性能

现代 JavaScript 中，字符串拼接没有绝对“最快”的方法，但有明确的适用边界：小规模拼接用 + 或 += 最简洁高效；大规模循环拼接（如万次以上）在旧引擎或极端场景下，Array.join() 仍有价值；而模板字符串（`${x}`）在可读性与中等规模性能间取得了很好平衡。

小量拼接：优先用 + 和 +=

现代引擎（V8、SpiderMonkey、JavaScriptCore）对 + 和 += 做了深度优化。实测显示，在 Chrome 120+、Firefox 125+、Safari 17+ 中，拼接几十个字符串时，+= 比 arr.push().join() 快 2–5 倍，内存占用更低，GC 暂停更少。

适合场景：构建 URL 参数、日志消息、简单 HTML 片段（如 div.innerHTML = '<p>' + name + '</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review"><img src="https://img.php.cn/upload/skill/000/000/081/179084711841712.jpg" alt="Java Maven Code Review" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review" class="overflowclass">Java Maven Code Review</a> <p class="overflowclass">审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。</p> </div> <a rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>'）
注意点：不要在长循环中无节制累积 +=（比如十万次），虽不至于卡死，但会触发更多垃圾回收
误区澄清：str = str + a 与 str += a 在语义和性能上完全等价，无需刻意替换

大量动态拼接：Array.join() 仍有一席之地

当拼接操作发生在高频循环中（例如生成万行表格 HTML），且字符串片段来自变量或函数调用，Array.join() 可避免重复内存分配。Node.js v18 测试表明：10 万次拼接相同短字符串时，arr.push(...).join('') 比连续 += 内存峰值低约 30%，GC 次数减少近半。

推荐写法：const parts = []; for (...) parts.push(piece); return parts.join('');
不建议用 new StringBuffer() 这类手动封装——现代 JS 引擎已内置类似优化，额外封装反而增加开销
IE9 及更早版本是例外：那时 join() 确实显著快于 +=，但这类环境已基本退出主流支持范围

带变量插值：模板字符串是默认选择

模板字符串不是单纯语法糖。Node.js v18 实测：拼接含 3–5 个变量的中等长度字符串（如 `<li id="${id}">${text}</li>`），其耗时仅为 += 的 1/70，内存仅为其 1/80。这是因为引擎在解析阶段就做了常量折叠与插值预编译。

优势明显：天然支持多行、表达式计算、标签函数（如 html`<div>${user.name}</div>`）
性能陷阱：避免在循环内重复定义模板字面量（如 for (...) { const s = `${a}${b}`; }），应提取到循环外或确保 V8 能内联优化
不适用场景：纯静态字符串拼接（如 'prefix' + 'suffix'），此时 + 更轻量

其他方法：谨慎使用或直接规避

String.prototype.concat() 性能稳定但无优势，比 + 慢约 20–40%；String.prototype.concat.apply(str, arr) 在 Chrome/Opera 中曾引发崩溃，现已少见但仍有兼容风险；replace() 做模板填充属于误用——它需正则解析、全局匹配，1000 次替换比 push().join() 慢 2–3 倍。