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