javascript中字符串拼接需注意的問題
更新時間：2010年07月13日 00:35:19 作者：
作為一名.net開發(fā)人員相信大家都知道C#中字符串拼接與StringBuilder的效率差距。
在開發(fā)中大家也都會注意盡量使用StringBuilder而不采用普通的字符串拼接方式。但是可能大部分開發(fā)者卻忽略了js中也需要注意這種效率問題。
下面進行一項性能測試，用事實來說話！
function xntest(){
var d1=new Date();
var str="";
for(var i=0;i<10000;i++){
str+="stext";
}
var d2=new Date();
document.write("字符串拼接方式耗時："+(d2.getTime()- d1.getTime())+"毫秒；");
d1=new Date();
var sb=new StringBuilder();
for(var i=0;i<10000;i++){
sb.append("stext");
}
var result=sb.toString();
d2=new Date();
document.write("數(shù)組方式耗時："+(d2.getTime()- d1.getTime())+"毫秒；");
}
/////利用Array實現(xiàn)的字符串拼接函數(shù)，為方便c#開發(fā)者特意取名StringBuilde以便于理解
function StringBuilder(){
this._strings_=new Array;
}
StringBuilder.prototype.append=function(str){
this._strings_.push(str);
};
StringBuilder.prototype.toString=function(){
return this._strings_.join("");
};
三次執(zhí)行 xntest()函數(shù)后的結(jié)果為：
字符串拼接方式耗時：735毫秒；數(shù)組方式耗時：62毫秒；
字符串拼接方式耗時：766毫秒；數(shù)組方式耗時：63毫秒；
字符串拼接方式耗時：703毫秒；數(shù)組方式耗時：63毫秒；
此例是拼接10000次字符串的性能測試，相信結(jié)果大家有目共睹，有興趣的朋友可以自己測試一下。
所以 ，在前臺開發(fā)中我們也應(yīng)盡量避免大規(guī)模的字符串拼接操作，應(yīng)采用數(shù)組方式來合理提高代碼效率。
下面進行一項性能測試，用事實來說話！
復(fù)制代碼 代碼如下:
function xntest(){
var d1=new Date();
var str="";
for(var i=0;i<10000;i++){
str+="stext";
}
var d2=new Date();
document.write("字符串拼接方式耗時："+(d2.getTime()- d1.getTime())+"毫秒；");
d1=new Date();
var sb=new StringBuilder();
for(var i=0;i<10000;i++){
sb.append("stext");
}
var result=sb.toString();
d2=new Date();
document.write("數(shù)組方式耗時："+(d2.getTime()- d1.getTime())+"毫秒；");
}
/////利用Array實現(xiàn)的字符串拼接函數(shù)，為方便c#開發(fā)者特意取名StringBuilde以便于理解
function StringBuilder(){
this._strings_=new Array;
}
StringBuilder.prototype.append=function(str){
this._strings_.push(str);
};
StringBuilder.prototype.toString=function(){
return this._strings_.join("");
};
三次執(zhí)行 xntest()函數(shù)后的結(jié)果為：
字符串拼接方式耗時：735毫秒；數(shù)組方式耗時：62毫秒；
字符串拼接方式耗時：766毫秒；數(shù)組方式耗時：63毫秒；
字符串拼接方式耗時：703毫秒；數(shù)組方式耗時：63毫秒；
此例是拼接10000次字符串的性能測試，相信結(jié)果大家有目共睹，有興趣的朋友可以自己測試一下。
所以 ，在前臺開發(fā)中我們也應(yīng)盡量避免大規(guī)模的字符串拼接操作，應(yīng)采用數(shù)組方式來合理提高代碼效率。
相關(guān)文章
原生js實現(xiàn)改變隨意改變div屬性style的名稱和值的結(jié)果
在本文將為大家介紹下如何用原生js和jQuery實現(xiàn)隨意改變div屬性，和重置，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
WebApi+Bootstrap+KnockoutJs打造單頁面程序
這篇文章主要介紹了WebApi+Bootstrap+KnockoutJs打造單頁面程序的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要給大家介紹了關(guān)于TypeScript中方法重載的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用TypeScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)動態(tài)星空背景效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
javascript FAQ函數(shù)(提問+回復(fù))
javascript FAQ函數(shù)，當(dāng)點擊問題時顯示下面的回復(fù)內(nèi)容。2009-07-07
基于JS實現(xiàn)帶并發(fā)限制的異步調(diào)度器
這篇文章主要為大家詳細(xì)介紹了如何基于JS實現(xiàn)帶并發(fā)限制的異步調(diào)度器，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價值，需要的可以參考下2023-05-05
詳解webpack+gulp實現(xiàn)自動構(gòu)建部署
這篇文章主要介紹了詳解webpack+gulp實現(xiàn)自動構(gòu)建部署,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
好多情況下flash會出現(xiàn)需要單擊激活，不過一般新版本中直接插入隨然不用激活但代碼較多，下面的方法是個函數(shù)，其實代碼也不少，不過思路很好，大家可以看看。2009-03-03
JavaScript是一種屬于網(wǎng)絡(luò)的腳本語言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā)，CSS（Cascading Style Sheet）層疊樣式表單，今天給大家分享css與javascript重難點，感興趣的朋友一起看看吧2020-06-06
這篇文章主要介紹了JavaScript詞法作用域的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07