淺談JS中的三種字符串連接方式及其性能比較

更新時間：2016年09月02日 11:31:44 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談JS中的三種字符串連接方式及其性能比較。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

工作中經(jīng)常會碰到要把2個或多個字符串連接成一個字符串的問題，在JS中處理這類問題一般有三種方法，這里將它們一一列出順便也對它們的性能做個具體的比較。

第一種方法用連接符“+”把要連接的字符串連起來：

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

毫無疑問，這種方法是最便捷快速的，如果只連接100個以下的字符串建議用這種方法最方便。

第二種方法以數(shù)組作為中介用 join 連接字符串：

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

w3school 網(wǎng)站介紹說這種方法要比第一種消耗更少的資源，速度也更快，后面我們通過實驗再驗證是否是這樣。

第三種方法利用對象屬性來連接字符串

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();

利用下面代碼對三種方法性能進(jìn)行比較，通過更改 c 的值來調(diào)整連接字符串的個數(shù)：

var str="";
var d1,d2;
var c=5000;//連接字符串的個數(shù)


//------------------------測試第三種方法耗費時間-------
 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());
//-------------------------------------------------------

我調(diào)整 c 分別等于5000、50000、500000、5000000，每個數(shù)值分別測了10次，最后結(jié)果如下：

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

統(tǒng)計5000000的時候在地址欄加入了隨機參數(shù)，應(yīng)該是避免了緩存的影響的。從結(jié)果來看，第一種方法并不比另2種方法消耗多，甚至還更有優(yōu)勢，這點和手冊上的說明明顯不一致。

測試系統(tǒng)：win 7旗艦

瀏覽器：chrome 52.0.2739.0 m

以上這篇淺談JS中的三種字符串連接方式及其性能比較就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: