你必須知道的JavaScript 中字串串連的效能的一些問題

而JavaScript的核心是ECMAScript 。與其他語言類似，ECMAScript 的字串是不可變的，即它們的值不能改變。

請考慮下面的代碼：

複製代碼 代碼如下:var str = "hello ";
str += "world";實際上，這段代碼在幕後執行的步驟如下：

1.建立儲存 "hello " 的字串。
2.建立儲存 "world" 的字串。
3.建立儲存串連結果的字串。
4.把 str 的當前內容複寫到結果中。
5.把 "world" 複製到結果中。
6.更新 str，使它指向結果。

每次完成字串串連都會執行步驟 2 到 6，使得這種操作非常消耗資源。如果重複這一過程幾百次，甚至幾千次，就會造成效能問題。解決方案是用 Array Object Storage Service字串，然後用 join() 方法（參數是Null 字元串）建立最後的字串。想象用下面的代碼代替前面的代碼：

複製代碼 代碼如下:var arr = new Array();
arr[0] = "hello ";
arr[1] = "world";
var str = arr.join("");

這樣，無論數組中引入多少字串都不成問題，因為只在調用 join() 方法時才會發生串連操作。此時，執行的步驟如下：

1.建立儲存結果的字串
2.把每個字串複製到結果中的合適位置
雖然這種解決方案很好，但還有更好的方法。問題是，這段代碼不能確切反映出它的意圖。要使它更容易理解，可以用 StringBuffer 類打包該功能：

複製代碼 代碼如下:function StringBuffer () {
this._strings_ = new Array();
}

StringBuffer.prototype.append = function(str) {
this._strings_.push(str);
};

StringBuffer.prototype.toString = function() {
return this._strings_.join("");
};

這段代碼首先要注意的是 strings 屬性，本意是私人屬性。它只有兩個方法，即 append() 和 toString() 方法。append() 方法有一個參數，它把該參數附加到字串數組中，toString() 方法調用數組的 join 方法，返回真正串連成的字串。要用 StringBuffer 對象串連一組字串，可以用下面的代碼：複製代碼 代碼如下:var buffer = new StringBuffer ();
buffer.append("hello ");
buffer.append("world");
var result = buffer.toString();

基於上面的實現我們來進行一下已耗用時間對比，即以“+”逐個進行字串串連和我們封裝的工具。可用下面的代碼測試 StringBuffer 對象和傳統的字串串連方法的效能，在chrome控制台輸入一下代碼並運行：複製代碼 代碼如下:var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
str += "text";
}
var d2 = new Date();

console.log("Concatenation with plus: "
+ (d2.getTime() - d1.getTime()) + " milliseconds");

var buffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 10000; i++) {
buffer.append("text");
}
var result = buffer.toString();
d2 = new Date();

console.log("Concatenation with StringBuffer: "
+ (d2.getTime() - d1.getTime()) + " milliseconds");

這段代碼對字串串連進行兩個測試，第一個使用加號，第二個使用 StringBuffer 類。每個操作都串連 10000 個字串。日期值 d1 和 d2 用於判斷完成操作需要的時間。請注意，建立 Date 對象時，如果沒有參數，賦予對象的是當前的日期和時間。要計算串連操作曆經多少時間，把日期的毫秒錶示（用 getTime() 方法的傳回值）相減即可。這是衡量 JavaScript 效能的常見方法。該測試的結果可以協助您比較使用 StringBuffer 類與使用加號的效率差異。

上例運行結果如下：

那麼有人也許會說JavaScript的String對象中不是也封裝一個concat（）方法麼，我們在下面也來用concat（）方法來做同樣的事情，在consoel輸入以下代碼：

複製代碼 代碼如下:var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
str.concat("text");
}
var d2 = new Date();

console.log("Concatenation with plus: "
+ (d2.getTime() - d1.getTime()) + " milliseconds");

我們可以看到做10000次字元竄串連它的耗時是：

由此可以得出結論，當涉及到一定數量的字串串連時，我們在Javascript中封裝一個類似Java中的StringBuffer對象（函數）來進行操作會在效能上得到提升。