JavaScript三种字符串拼接方式性能实测与对比

JavaScript字符串拼接概述

工作中常需将2个或多个字符串连接为一个，JS中处理此类问题通常有三种方法，此处逐一列出并比较其性能。

方法一：加号连接符

第一种方案是使用加号（+）运算符进行字符串连接。

str="a";
str+="b";

从代码简洁性和开发便捷性来看，这种方法最为直观。对于连接数量较少（例如100个以内）的场景，推荐使用此方式，因其实现简单且效率足以满足需求。

方法二：数组join方法

第二种方案是通过数组中介，利用数组的join方法完成字符串拼接。

var arr=new Array();
arr.push(a);
arr.push(b);
var str=arr.join("");

部分文档（如w3school）指出，该方法相比直接连接消耗更少的内存资源，且执行速度更快。为了验证这一说法是否准确，下文将通过具体的实验数据进行对比分析。

方法三：对象属性封装

第三种方案是利用自定义对象属性来存储字符串片段，最后统一处理。

function stringConnect(){
  this._str_=new Array();
}
stringConnect.prototype.append=function(a){
  this._str_.push(a);
}
stringConnect.prototype.toString=function(){
  return this._str_.join();
}
  var mystr=new stringConnect;
  mystr.append("a");
  var str=mystr.toString();

性能测试设计与结果分析

为了量化比较这三种方法的性能，我们编写了测试脚本。通过调整变量c的值，可以控制参与连接的字符串数量，从而观察不同数据规模下的表现。

var str="";
var d1,d2;
var c=5000;//连接字符串的个数


//------------------------测试第三种方法耗费时间-------
 d1=new Date();
function stringConnect(){
  this._str_=new Array();
}
stringConnect.prototype.append=function(a){
  this._str_.push(a);
}
stringConnect.prototype.toString=function(){
  return this._str_.join("");
}
  var mystr=new stringConnect;

  for(var i=0;i<c;i++){
    mystr.append("a");
  }
str=mystr.toString();
 d2=new Date();
 console.log(d2.getTime()-d1.getTime());
//-----------------------------------------------------

//------------------------测试第二种方法耗费时间-------
d1=new Date();
  var arr=new Array();
for(var i=0;i<c;i++){
  arr.push("a");
}
str=arr.join("");
  d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

//------------------------测试第一种方法耗费时间-------
d1=new Date();for(var i=0;i<c;i++){
  str+="a";
}
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

测试中，我们将变量c分别设置为5000、50000、500000和5000000，每种情况重复测试10次，取平均值作为最终结果。具体数据如下：

当c=5000时，三种方法的平均耗时（单位：毫秒）对比如下： 第三种方法耗时分别为：3, 2, 2, 3, 1, 2, 2, 1, 1, 1，平均值1.8。 第二种方法耗时分别为：1, 3, 0, 3, 1, 3, 4, 1, 4, 2，平均值2.2。 第一种方法耗时分别为：0, 0, 0, 0, 0, 1, 1, 1, 1, 1，平均值0.5。 在此小规模数据下，第一种方法（加号连接）速度最快。

当c=50000时，测试数据如下：

第三种方法耗时分别为：22, 12, 9, 14, 12, 13, 13, 13, 10, 17，平均值13.5。 第二种方法耗时分别为：8, 13, 12, 8, 11, 11, 8, 9, 8, 9，平均值9.7。 第一种方法耗时分别为：7, 12, 5, 11, 10, 10, 10, 13, 16, 12，平均值10.6。 在中等规模下，第二种方法（join）表现略优，第一种方法紧随其后。

当c=500000时，测试数据如下：

第三种方法耗时分别为：104, 70, 74, 69, 76, 77, 69, 102, 73, 73，平均值78.7。 第二种方法耗时分别为：78, 100, 99, 99, 100, 98, 96, 71, 94, 97，平均值93.2。 第一种方法耗时分别为：90, 87, 83, 85, 85, 83, 84, 83, 88, 86，平均值85.4。 在大规模数据下，第一种方法（加号连接）的平均耗时低于第二种方法，且第三种方法耗时最高。

当c=5000000时，测试数据如下：

第三种方法耗时分别为：651, 871, 465, 444, 1012, 436, 787, 449, 432, 444，平均值599.1。 第二种方法耗时分别为：568, 842, 593, 747, 417, 747, 719, 549, 573, 563，平均值631.8。 第一种方法耗时分别为：516, 279, 616, 161, 466, 416, 201, 495, 510, 515，平均值417.5。 在超大规模数据下，第一种方法（加号连接）优势明显，耗时远低于其他两种方法。

在测试c=5000000时，地址栏加入了随机参数以排除缓存对测试结果的干扰。从整体结果来看，第一种方法（加号连接）不仅没有比另外两种方法消耗更多资源，反而在大数据量下具有显著的性能优势。这一结论与传统手册中关于join方法更优的说法存在明显差异。

测试环境操作系统为Windows 7旗舰版。

测试使用的浏览器为Chrome 52.0.2739.0 m版本。

以上关于JavaScript三种字符串连接方式及其性能比较的内容分享完毕，希望能为开发者提供有价值的参考。