DIV CSS 佈局教程網

工作中經常會碰到要把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中的三種字符串連接方式及其性能比較就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。