JavaScript 字符串拼接性能优化指南

听雨眠

发布时间：2026-10-15| 5人浏览过

原创

在处理大量数据时，JavaScript 字符串的拼接方式直接影响运行效率。传统的加法运算符（+）会因频繁的内存分配导致性能低下，而使用数组暂存后通过 join 方法合并则是更优的解决方案。

字符串拼接的性能陷阱

在 JavaScript 中，字符串是不可变对象（Immutable）。这意味着当你使用 + 运算符拼接两个字符串时，解释器不能简单地扩展原有内存，而是必须在堆内存中创建一个新的字符串对象来容纳合并后的结果，并将旧对象的引用指向新地址，随后垃圾回收机制（GC）需要回收被丢弃的旧对象。

当循环次数较少时，这种开销微乎其微。然而，当进行成千上万次拼接操作时，频繁的对象创建和销毁会成为显著的 CPU 瓶颈，导致页面响应延迟或脚本执行超时。

性能对比测试

为了直观展示不同方法的效率差异，我们可以编写一个简单的基准测试脚本。以下代码分别测试了直接字符串拼接和使用数组 push 后再转换的耗时情况。

复制代码代码如下:

function xntest(){ 
    // 记录开始时间
    var d1 = new Date(); 
    var str = ""; 
    for(var i = 0; i < 10000; i++){ 
        // 直接拼接
        str += "stext"; 
    } 
    var d2 = new Date(); 
    document.write("字符串拼接方式耗时：" + (d2.getTime() - d1.getTime()) + "毫秒；"); 
    
    // 重置计时器
    d1 = new Date(); 
    var sb = new Array(); 
    for(var i = 0; i < 10000; i++){ 
        // 推入数组
        sb.push("stext"); 
    } 
    // 关键步骤：将数组转换为字符串
    var result = sb.toString(); 
    d2 = new Date(); 
    document.write("数组方式耗时：" + (d2.getTime() - d1.getTime()) + "毫秒；"); 
}

测试结果分析

虽然在不同浏览器引擎和硬件环境下具体数值会有所波动，但通常可以看到：

直接拼接方式：随着字符串长度增加，耗时呈非线性增长，尤其是在早期版本浏览器中更为明显。
数组方式：push 操作是高效的内存分配，而 toString() 在最后一次性完成转换，大幅减少了中间对象的创建。

最佳实践：使用 `join()` 方法

在实际开发中，我们推荐使用 Array.prototype.join() 方法来代替 toString()，因为它提供了分隔符控制的灵活性，且语义更清晰。

操作步骤如下：

第1步：初始化空数组

创建一个容器用于存储待拼接的部分。相比于直接修改一个大字符串，数组的 push 方法在底层通常有更优化的内存管理策略。

第2步：循环追加元素

在循环内部，将需要生成的片段逐个 push 到数组中。此时不涉及字符串合并操作，仅涉及数组末尾添加元素，速度极快。

第3步：调用 `join()` 生成最终结果

循环结束后，调用 array.join('')。如果不需要分隔符，传入空字符串即可。该方法会在内部一次性计算总长度并分配内存，高效地完成拼接。

var parts = [];
for (var i = 0; i < 10000; i++) {
    parts.push("text_" + i);
}
var finalString = parts.join(""); // 高效拼接

现代浏览器的优化现状

需要注意的是，现代主流浏览器（如 Chrome V8、Firefox SpiderMonkey）的 JavaScript 引擎已经对字符串拼接进行了深度优化。对于短字符串或中等长度的拼接，直接使用 + 或模板字面量（Template Literals）通常不会成为性能瓶颈，甚至可能比数组方式更快，因为避免了数组对象本身的开销。

何时必须使用数组方式？