Javascript中的長字符串拼接

作者：佚名 2011-07-11 16:00:22

本文介紹的是Javascript中的長字符串拼接，希望對你有幫助，一起來看。

字符串拼接是所有程序設計語言都需要的操作。當拼接結果較長時，如何保證效率就成為一個很重要的問題。

C 語言的 strcat 函數直接操作內存，效率自然最高；C++ 的 string 類是可變的，本質上也是直接操作內存，效率也不在話下；Java 的 String 類不可變，字符串拼接意味著產生新對象，因此提供了專門用于字符串拼接的 StringBuffer 類，也保證了執行效率。

在 Javascript 中，大規模的字符串拼接雖不常見，但也并非沒有。

在這種情況下，傳統的字符串拼接會比較慢：

<script>   
function strcat1(count, substr) //將 count 個 substr 拼接在一起  
{  
var result = "";  
for (var i = 0; i < count; ++i)  
{  
result += substr;  
}  
return result;  
}  
var begin = new Date();  
strcat1(10000, "substr");   
var end = new Date();  
alert(end.valueOf() - begin.valueOf());  
</script>

在筆者的機器上（下同）這段代碼要執行 3 秒鐘。有沒有比較快的拼接方法？答案是肯定的，Javascript 也提供了一個類似 StringBuffer 的東西，那就是數組：

<script>   
function strcat2(count, substr)  
{  
var buffer = [];  
for (var i = 0; i < count; ++i)  
{  
buffer.push(substr);  
}  
return buffer.join("");  
}  
var begin = new Date();  
strcat2(10000, "substr");   
var end = new Date();  
alert(end.valueOf() - begin.valueOf());  
</script>

這段代碼只需執行 80 毫秒左右，比傳統的字符串拼接快了數十倍。這是針對大規模的字符串拼接而言。對于小規模的字符串拼接，我們可以比較一下兩種拼接方法的效率：

<script>  
function strcat1(count, substr)  
{  
var result = "";  
for (var i = 0; i < count; ++i)  
{  
result += substr;  
}  
return result;  
}  
function strcat2(count, substr)  
{  
var buffer = [];  
for (var i = 0; i < count; ++i)  
{  
buffer.push(substr);  
}  
return buffer.join("");  
}  
function test(strcat)  
{  
var substr = "substr";  
var begin = new Date();  
for (var i = 0; i < 1000; ++i)  
{  
strcat(10, substr);  
}  
var end = new Date();  
return end.valueOf() - begin.valueOf();  
}  
alert(test(strcat1) + "," + test(strcat2));  
</script>

這一輪是傳統的拼接方式勝出，其速度大約是數組方式的兩倍多。可以驗證，拼接的次數越少，傳統的拼接方式優勢越大。因此，在大規模的拼接中，如果混用傳統拼接方法和數組拼接方法，速度會更快：

<script>   
function strcat3(count, substr)  
{  
var buffer = [];  
count /= 5;  
for (var i = 0; i < count; ++i)  
{  
buffer.push(substr + substr + substr + substr + substr);  
}  
return buffer.join("");  
}  
var begin = new Date();  
strcat3(10000, "substr");   
var end = new Date();  
alert(end.valueOf() - begin.valueOf());  
</script>

這次只需執行 30 毫秒了。因此，筆者推薦以數組方式為主，適當輔以傳統方式來拼接長字符串。下面是一個實例：

<script>   
function doLoad()  
{  
var buffer = ["<table style='width:100%' border=1>"];  
for (var i = 0; i < 100; ++i)  
{  
buffer.push("<tr>");  
for (var j = 0; j < 20; ++j)  
{  
buffer.push("<td>" + i + "," + j + "</td>");  
}  
buffer.push("</tr>");  
}  
buffer.push("</table>");  
document.body.innerHTML = buffer.join("");  
}  
</script>  
<body onload="doLoad()"></body>

說明：

1、傳統方式與數組方式會有以上差別的原因在于：傳統方式拼接 n 個字符串的時間復雜度為 O(n^2)，但系數較小；數組方式的時間復雜度為 O(n)，但系數較大。

2、以上代碼在 IE6 中調試通過。

希望本文能夠給你帶來幫助。

責任編輯：于鐵來源：互聯昂網

字符串拼接