+=在循环中高频、小段拼接时变慢,array.join()更快;日常简单拼接(5次以内)用+或模板字面量更清晰。拖慢脚本的关键是“碎+频+久”,如for循环中上千次短内容拼接、总次数超100~200次或高频调用场景。

在 JavaScript 中,+= 拼接在循环中高频、小段拼接时明显变慢,Array.join() 更快;但日常简单拼接(如 5 次以内、模板字面量)用 + 完全没问题,甚至更清晰。
哪些情况 += 会悄悄拖慢脚本?
不是拼得“多”才慢,而是拼得“碎+频+久”——尤其在旧设备或性能敏感路径下:
- 在 for/while 循环里反复执行 +=,比如生成 HTML 列表、日志行、CSV 字段
- 单次拼接内容很短(如 "" + id + ""),但循环上千次
- 拼接总次数稳定超过 100~200 次(现代引擎对 ≤ 10 次优化很好,无需担心)
- 该逻辑被高频调用,比如 React 渲染函数、表格导出工具、实时日志格式化
为什么 join() 通常更快?
核心在于字符串不可变性:每次 += 都要创建新字符串、复制全部已有内容;join() 把开销“攒起来”,一次性搞定:
- 数组 push() 只存引用,几乎无内存复制开销
- join() 调用时才扫描所有元素,预估总长度,一次分配最终内存空间
- V8 等主流引擎对 join() 做了深度内联和中间对象消除,实测常快 2–5 倍(万级拼接时差距可达百倍)
怎么选?看场景,不看教条
别为 3 次拼接硬套 join(),也别在渲染列表时还用 +=。实用判断原则:
- 拼接变量少、结构固定 → 优先用模板字符串:
`<li id="${id}">${text}</li>` - 数据已存在数组中(如
userList.map(u => u.name))→ 直接.join(", ") - 需在循环中动态收集片段(如条件拼标签、组装 SQL 参数)→ 先
push()到数组,最后join("") - 仅拼接 2~5 次静态内容(如
"API/" + version + "/users")→ += 或模板都行,可读性优先
动手验证比猜更靠谱
用 console.time() 实测真实数据量下的耗时,比如:
(把 5000 改成你业务中常见的数量级)
console.time('+=');<br>let s = '';<br>for (let i = 0; i console.timeEnd('+=');<br><br>console.time('join');<br>const a = [];<br>for (let i = 0; i const r = a.join('');<br>console.timeEnd('join');
若 join 版快 20% 以上,且该逻辑确实高频执行,就值得切换。











