首頁 > 開發者 > JavaScript
字串的拼接在我們寫代碼的時候都是用“+=”這個運算子，s += String; 這是我們最為熟知的寫法，不知道大家有沒有注意過沒有，在組合的字串容量有幾十K甚至幾百K的時候，指令碼執行起來很慢，CPU使用率狂高，例如：
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789\n";
var result = "";
for(var i=0; i<2000; i++) result += str;
就這麼一步操作，產生的結果字串是200K，耗時是1.1秒（這個與電腦配置有關），CPU的峰值100%。（為了更直觀地看到效果，我多做了些迴圈）。可想而知就這麼一步操作就消耗了我一秒多的時間，再加上其它的代碼的時間消耗，那整個指令碼塊的執行時間就難以忍受了。那有沒有最佳化的方案呢？還有其它的方法嗎？答案當然是有的，否則我寫這篇文章就是廢話。
更快的方式就是使用數組，在迴圈拼接的時候不是相接拼接到某個字串裡去，而是把字串放到一個數組裡，最後用數組.join("") 得到結果字串，程式碼範例：
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789\n";
var result = "", a = new Array();
for(var i=0; i<2000; i++) a[i] = str;
result = a.join(""); a = null;
大家可以測試測試，組合出一個相同大小的字串所消耗的時間，我這裡測試出來的結果是：<15毫秒，請注意，它的單位是毫秒，也就是說組合出這麼一個200K的字串，兩種模式的時間消耗是差不多兩個數量級。這意味著什嗎？意味著後者已經工作結束吃完中飯回來，前者還在做著苦力。我寫一個測試頁面，大家可以把下面這些代碼拷貝下來另存新檔一個HTM檔案在網頁裡開啟自己來測試一下兩者之間的效率差，反正我測試的是前者要半分鐘才能完成的事，後者0.07秒就搞定了（迴圈10000次）。
<body>
字串拼接次數<input id="totle" value="1000" size="5" maxlength="5">
<input type="button" value="字串拼接法" >
<input type="button" value="數組賦值join法" ><br>
<div id="method1"> </div>
<div id="method2"> </div>
<textarea id="show" style="width: 100%; height: 400"></textarea>
<SCRIPT LANGUAGE="JavaScript">
<!--
//這個被拼接的字串長是100位元組 author: meizz
var str = "01234567891123456789212345678931234567894123456789";
str+= "51234567896123456789712345678981234567899123456789\n";
//方法一
function method1()
{
var result = "";
var totle = parseInt(document.getElementById("totle").value);
var n = new Date().getTime();
for(var i=0; i<totle; i++)
{
result += str;
}
document.getElementById("show").value = result;
var s = "字串拼接法：拼接後的大字串長 "+ result.length +"位元組，"+
"拼接耗時 "+ (new Date().getTime()-n) +"毫秒！";
document.getElementById("method1").innerHTML = s;
}
//方法二
function method2()
{
var result = "";
var totle = parseInt(document.getElementById("totle").value);
var n = new Date().getTime();
var a = new Array();
for(var i=0; i<totle; i++)
{
a[i] = str;
}
result = a.join(""); a=null;
document.getElementById("show").value = result;
var s = "數組賦值join法：拼接後的大字串長 "+ result.length +"位元組，"+
"拼接耗時 "+ (new Date().getTime()-n) +"毫秒！";
document.getElementById("method2").innerHTML = s;
}
//-->
</SCRIPT>
最後我再說幾句，是不是以後字串拼接就一律使用數組join呢？這個要看你的實際需求了，就普通的幾個或者K級的位元組的組合就沒有必要使用數組法了，因為開陣列變數也是有消耗的。若有幾K以上的字串組合，那就是數組的效率高了。
----------------------------------------------------------------------
IE 6.0:
字串拼接法：拼接後的大字串長 1010000位元組，拼接耗時 22089毫秒！
數組賦值join法：拼接後的大字串長 1010000位元組，拼接耗時 218毫秒！
Firefox 1.0:
字串拼接法：拼接後的大字串長 1010000位元組，拼接耗時 1044毫秒！
數組賦值join法：拼接後的大字串長 1010000位元組，拼接耗時 1044毫秒！
Mozilla 1.7:
字串拼接法：拼接後的大字串長 1010000位元組，拼接耗時 1045毫秒！
數組賦值join法：拼接後的大字串長 1010000位元組，拼接耗時 1044毫秒！
Netscape 7.0:
字串拼接法：拼接後的大字串長 1010000位元組，拼接耗時 10273毫秒！
數組賦值join法：拼接後的大字串長 1010000位元組，拼接耗時 1138毫秒！
Opera 7.54:
字串拼接法：拼接後的大字串長 1010000位元組，拼接耗時 6968毫秒！
數組賦值join法：拼接後的大字串長 1010000位元組，拼接耗時 6922毫秒！
迴圈10000次的測試結果表明在IE和Netscape裡可以大大提高效率，而在Firefox Mozilla Opera 裡兩種方法耗時基本相近，這些資料足可以判定數組join法優於傳統字串拼接。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
