首頁 > web前端 > js教程 > JavaScript中的字串連接問題(圖文教學)

JavaScript中的字串連接問題(圖文教學)

亚连
發布: 2018-05-19 09:32:51
原創
1568 人瀏覽過

這篇文章主要介紹了JS中的字串連接問題,ECMAScript 中最常見的一個問題是字串連接的效能。在呼叫 join() 方法時才會發生連接操作,具體操作步驟大家可查看下文的詳細講解,有興趣的小夥伴們可以參考一下。

ECMAScript 中最常見的一個問題是字串連接的效能。與其他語言類似,ECMAScript 的字串是不可變的,即它們的值不能改變。請考慮下面的程式碼:

var str = "hello ";
str += "world";
登入後複製

實際上,這段程式碼在幕後執行的步驟如下:

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

每次完成字串連線都會執行步驟 2 到 6,使得這種操作非常消耗資源。如果重複這個過程幾百次,甚至幾千次,就會造成效能問題。解決方法是用 Array 物件儲存字串,然後用 join() 方法(參數是空字串)建立最後的字串。想像用下面的程式碼取代前面的程式碼:

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 物件和傳統的字串連接方法的效能:

var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
 str += "text";
}
var d2 = new Date();
document.write("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();
document.write("<br />Concatenation with StringBuffer: "
 + (d2.getTime() - d1.getTime()) + " milliseconds");
登入後複製

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

JS新手使用頻繁出錯點有哪些

JS EventEmitter使用技巧總結

使用JS進行檔案拖曳

以上是JavaScript中的字串連接問題(圖文教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板