如何更高效的拼接字符串？

最經常使用的鏈接字符串的方法應該是下面幾種：

// 1.=操做符
str = 'a' + 'b' + 'c';
// 2. +=操做符
str = 'a';
str += 'b';
str += 'c';
// 3. Array.join()
str = ['a', 'b', 'c'].join('');
// 4. String.concat()
str = 'a';
str = str.concat('b', 'c');
複製代碼

那麼來看一下這幾種有什麼區別，或者會形成什麼影響。

---

= 和 +=操做符

運行str += 'one' + 'two'會經歷如下4個過程：

1. 在內存中建立一個臨時字符串；
2. 鏈接後的字符串onetwo被賦值給該臨時字符串；
3. 臨時字符串與str當前的值鏈接；
4. 結果賦值給str。

拼接這個短短的字符串就會經歷以上4個步驟，那麼能夠進行優化嗎？請看下面的代碼：

// 1
str += 'one';
str += 'two';
// 2
str = str + 'one' + 'two';
複製代碼

以上兩種方式雖然能達到一樣的效果，可是卻能夠避免產生臨時字符串（也就是4個步驟中的1&2步驟）；在大多數瀏覽器中這樣作會提速10%~40%（IE7以上，IE8效果不明顯，實現機制與此不一樣）。

可是若是將上面的代碼2換成：str = 'one' + str + 'two'，則優化將失效。這與瀏覽器合併字符串時分配內存的方法有關：

除IE外，其餘瀏覽器會嘗試爲表達式左側的字符串分配更多的內存，而後簡單地將第二個字符串拷貝至它的末尾。若是在一個循環中，基礎字符串位於最左端的位置，就能夠避免重複拷貝一個逐漸變大的基礎字符串。

基本字符串能夠理解爲鏈接時排在前面的字符串。也就是說：str + 'one'意味着拷貝one並附加在str以後，而'one' + str則意味着要拷貝str並附加在'one'以後，若是str很大，拷貝過程的性能損耗（內存佔用）就會很高。

說回IE8的實現機制：

在IE8的實現中，鏈接字符串只是記錄現有的字符串的引用來構造新的字符串。在最後時刻（當你真正要使用鏈接後的字符串時），字符串的各個部分纔會逐個拷貝到一個新的「真正的」字符串中，而後用它取代先前的字符串引用，因此並不是每次使用字符串時都發生合併操做。

而IE7的實現機制更糟糕：

每鏈接一對字符串都要把它複製到一塊新分配的內存中。

Array.join() 和 String.prototype.concat()

大多數瀏覽器中，數組項合併比其餘字符串鏈接方法更慢

Array.join()當把全部的數組的元素鏈接在一塊兒時，瀏覽器會分配足夠的內存來存放整個字符串，並且不會屢次拷貝最終字符串中相同的部分。

字符串的原生方法concat()能接收任意數量的參數，並將每個參數附加到所調用的字符串上。可是多數狀況下，使用concat()比使用簡單的+和+=稍慢，尤爲在IE，Opera和Chrome中慢得更明顯。

---

在《高性能JavaScript》看到了就記錄一下，方便之後查看。