浅谈JS中的三种字符串连接方式及其性能比较
工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题，在JS中处理这类问题一般有三种方法，这里将它们一一列出顺便也对它们的性能做个具体的比较。
第一种方法用连接符“+”把要连接的字符串连起来：
str="a"; str+="b";
毫无疑问，这种方法是最便捷快速的，如果只连接100个以下的字符串建议用这种方法最方便。
第二种方法以数组作为中介用join连接字符串：
vararr=newArray();
arr.push(a);
arr.push(b);
varstr=arr.join("");
w3school网站介绍说这种方法要比第一种消耗更少的资源，速度也更快，后面我们通过实验再验证是否是这样。
第三种方法利用对象属性来连接字符串
functionstringConnect(){
this._str_=newArray();
}
stringConnect.prototype.append=function(a){
this._str_.push(a);
}
stringConnect.prototype.toString=function(){
returnthis._str_.join();
}
varmystr=newstringConnect;
mystr.append("a");
varstr=mystr.toString();
利用下面代码对三种方法性能进行比较，通过更改c的值来调整连接字符串的个数：
varstr="";
vard1,d2;
varc=5000;//连接字符串的个数
//------------------------测试第三种方法耗费时间-------
d1=newDate();
functionstringConnect(){
this._str_=newArray();
}
stringConnect.prototype.append=function(a){
this._str_.push(a);
}
stringConnect.prototype.toString=function(){
returnthis._str_.join("");
}
varmystr=newstringConnect;
for(vari=0;i<c;i++){
mystr.append("a");
}
str=mystr.toString();
d2=newDate();
console.log(d2.getTime()-d1.getTime());
//-----------------------------------------------------
//------------------------测试第二种方法耗费时间-------
d1=newDate();
vararr=newArray();
for(vari=0;i<c;i++){
arr.push("a");
}
str=arr.join("");
d2=newDate();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------
//------------------------测试第一种方法耗费时间-------
d1=newDate();for(vari=0;i<c;i++){
str+="a";
}
d2=newDate();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------
我调整c分别等于5000、50000、500000、5000000，每个数值分别测了10次，最后结果如下：
c=5000
平均耗时（单位毫秒）
第三种32231221111.8
第二种13031341422.2
第一种00000111110.5
c=50000
第三种221291412131313101713.5
第二种813128111189899.7
第一种71251110101013161210.6
c=500000
第三种104707469767769102737378.7
第二种781009999100989671949793.2
第一种9087838585838483888685.4
c=5000000
第三种6518714654441012436787449432444599.1
第二种568842593747417747719549573563631.8
第一种516279616161466416201495510515417.5
统计5000000的时候在地址栏加入了随机参数，应该是避免了缓存的影响的。从结果来看，第一种方法并不比另2种方法消耗多，甚至还更有优势，这点和手册上的说明明显不一致。
测试系统：win7旗舰
浏览器：chrome52.0.2739.0m
以上这篇浅谈JS中的三种字符串连接方式及其性能比较就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。