工作中經常會碰到要把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中三种字符串连接方式及其性能比较的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。