JS中三种字符串连接方式及其性能比较

工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题，在JS中处理这类问题一般有三种方法，这里将它们一一列出顺便也对它们的性能做个具体的比较。

第一种方法用连接符“+”把要连接的字符串连起来：

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

毫无疑问，这种方法是最便捷快速的，如果只连接100个以下的字符串建议用这种方法最方便。

第二种方法以数组作为中介用 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

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

统计5000000的时候在地址栏加入了随机参数，应该是避免了缓存的影响的。从结果来看，第一种方法并不比另2种方法消耗多，甚至还更有优势，这点和手册上的说明明显不一致。

测试系统：win 7旗舰

浏览器：chrome 52.0.2739.0 m

JS中三种字符串连接方式及其性能比较相关推荐

Sql Server中三种字符串合并方法的性能比较
最近正在处理一个合并字符吕的存储过程,在一个测试系统的开发中,要使用到字符串合并功能,直接在Sql中做. 示例: 有表內容﹕ 名称內容 ...
广域网中三种链路连接方式
广域网的通信方式有三种:点到点连接.电路交换和分组交换. 1．点到点连接点到点(PPP)连接也称为线路租用,它是电信运营商为两个用户点提供专用的连接通信通道,是一种永久式的专用物理通道,比如DDN( ...
电信设置的nat 虚拟服务器192.168.1.3 是什么,VMware WorkStation的三种网络连接方式详解...
一. 首先贴出本人在网络上找到与VMware网络连接相关的知识安装完虚拟机后,默认安装了两个虚拟网卡,VMnet1和VMnet8,其他的未安装(当然也可以手动安装其他的).其中VMnet1是host ...
虚拟机linux和主机网络连接,linux虚拟机中和主机三种网络连接方式的区别
linux虚拟机中和主机三种网络连接方式的区别在介绍网络模式之前,关于网络的几个简单命令的使用 ifup eth0 //启动网卡eth0 ifdown eth0 //关闭网卡eth0 /etc/ne ...
VMWare学习总结（2）——VMware中三种网络连接的区别
1.概述大家在安装完虚拟机后,默认安装了如下图的两块虚拟网卡--VMnet1和VMnet8,其中VMnet1是host网卡,用于host方式连接网络:VMnet8是NAT网卡,用于NAT方式连接网络 ...
VMware中三种网络连接的区别
VMware中三种网络连接的区别 1.概述 2.bridged(桥接模式) 3.NAT(网络地址转换模式) 4.host-only(主机模式) 5.replicate physical network ...
VM虚拟机-三种网络连接方式（桥接、NAT、仅主机模式）
目录虚拟机网络连接一.Bridged(桥接) 二.NAT(网络地址转换) 三.Host-Only(仅主机) 在vmware workstation中如何配置网络连接方式一.桥接二.NAT 三. ...
如何在vmware内抓包？（一文讲明白vmware的三种网络连接方式）
我们有时做主机之间的渗透测试,需要看网络发包的详细内容,但虚拟机内部如何抓包呢? vmware的虚拟网络编辑器有三种模式: ╔ HostOnly(仅主机) ╠ Bridge(桥接) ╚ NAT(代理) ...
VM虚拟机-三种网络连接方式（桥接、NAT、仅主机模式
目录虚拟机网络连接一.Bridged(桥接) 二.NAT(网络地址转换) 三.Host-Only(仅主机) 在vmware workstation中如何配置网络连接方式一.桥接二.NAT 三. ...

JS中三种字符串连接方式及其性能比较

JS中三种字符串连接方式及其性能比较相关推荐

最新文章

热门文章