JavaScript三种字符串连接方式性能实测:+号、数组join与对象属性法

作者:半夏

时间:2026-10-23

浏览:237

本文通过Chrome 52浏览器对JavaScript中三种字符串连接方式(+号、数组join、对象属性)进行实测。结果显示,在连接500万字符时,+号拼接方式耗时约417毫秒,优于数组join的631毫秒和对象属性法的599毫秒。测试表明,+号在大量连接时仍具优势,与部分文档说明存在差异。

文章目录

JavaScript字符串连接的三种方式

第一种方式:使用连接符“+”进行字符串拼接。

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

该方法操作简便且执行速度快,建议在连接字符串长度不超过100字符时使用此方式。

第二种方式:借助数组作为中介,调用join函数完成字符串连接。


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

第三种方式:通过操作对象属性来实现字符串连接。


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

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时,地址栏添加了随机参数以排除缓存干扰。从结果来看,第一种方法并未比另两种方法消耗更多时间,反而更具优势,这与部分手册说明存在明显差异。

测试系统:win 7旗舰

浏览器:chrome 52.0.2739.0 m

总结

以上所述是小编给大家介绍的Javascript三种字符串连接方式及性能比较,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对本站网站的支持!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章