詳解JS中三種字串連接方式及其效能比較

這篇文章詳解JS中三種字串連接方式及其效能比較 

工作中常常會碰到要把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
                                                     1   1 1.8
第二種   1   3   0   3   1   3  4  1   4  2.2
第一種   0   0   0   0   0   1  1  1   1  0.5

c=50000

#第三種   22  12     9   14    12   13   13   13   10   12     8    11   11     8     9     8    9     11   10   10   10    13   16  12          10.6

c=500000

第三種104 70 74 69 76 77 69 102 73 73                      9 99 100 98 96 71 94 97                          90 87 83 85 85 83 84 83 88 86                       51 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 41620116 279 616 161 466 4162011     417.5

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

測試系統：win 7旗艦

瀏覽器：chrome 52.0.2739.0 m

以上是詳解JS中三種字串連接方式及其效能比較的詳細內容。更多資訊請關注PHP中文網其他相關文章！