Javascript三種字符串連接方式及性能比較

這篇文章主要介紹了Javascript三種字符串連接方式及性能比較，本文給大家介紹的非常詳細，具有一定的參考借鑑價值,需要的朋友可以參考下

第一種：用連接符“+”連接字符串

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

這種方法相對以下兩種，最便捷快速。建議100字符以下的連接使用這種連接方式。

第二種：以數組作爲中介，使用jion函數進行連接

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

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

測試系統：win 7旗艦

瀏覽器：chrome 52.0.2739.0 m

總結

以上所述是小編給大家介紹的Javascript三種字符串連接方式及性能比較，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持！