Javascript之字串拼接詳解

lvxiangan發表於2018-05-25
JavaScript字串
字串拼接是所有程式設計語言都需要的操作。當拼接結果較長時，如何保證效率就成為一個很重要的問題。本文介紹的是Javascript中的字串拼接，希望對你有幫助，一起來看。

最近在研究《javascript高階程式設計》中，有一段關於字串特點的描述，原文大概如下：ECMAScript中的字串是不可變的，也就是說，字串一旦建立，他們的值就不能改變。要改變某個變數的儲存的的字串，首先要銷燬原來的字串，然後再用另外一個包含新值的字串填充該變數，例如： 

var lang = "Java";
lang = lang + "Script";

 實現這個操作的過程如下：首先建立一個能容納10個字元的新字串，然後在這個字串中填充“Java”和“Script”,最後一步是銷燬原來的字串“Java”和“Script”,因為這兩個字串已經沒用了。但是在低版本的瀏覽器(如IE6)中，字串拼接速度是很消耗一個效能的過程。

由此我就聯想到了Java，在Java中的字串機制也和js差不多（即建立了就不能改變，要改變只能銷燬原來的值），但是Java有個StringBuffer解決了字串不可變的問題，js且沒有類似的方法。但是我們可以模擬這種緩衝機制。其原理是利用陣列進行拼接，原始碼如下：

/*測試*/
var buffer = new StringBuffer();
buffer.append("Hello ").append("javascript");

var result = buffer.toString();
alert(result);

 機制我們模擬出來了，但是這個方法和字串拼接效能上有多少差別了，我們可以測試一下，測試程式碼如下：

var d1 = new Date();
var str = "";
for(var i = 0; i < 10000; i++){
    str += "text ";
}
var d2 = new Date();
document.write("測試一花費: " + (d2.getTime() - d1.getTime())/1000 + "秒"+"<br/>");
 

var oBuffer = new StringBuffer();
d3 = new Date();
for(var i = 0; i < 10000; i++){
    oBuffer.append("text ");
}
var sResult = oBuffer.toString();
d4 = new Date();
document.write("測試二花費: " + (d4.getTime() - d3.getTime())/1000 + "秒"); 

 測試結果如下：（環境不同，測試結果可能不同）：

1 在以1000次為基數的情況下，進行比較，兩者執行都非常快(基本都是幾毫秒)耗時都差不多，後者以前者相差不會超過10個毫秒。
2 在以10000次為基數的情況下，執行結果和上面差不多，但是前者在IE6下話費的事件較多。
3 在以100000次為基數的情況下,字串拼接在IE6下，明顯花的時間更多，其他瀏覽器相差不大，有的反而比StringBuffer更短。

 

結論

1 在拼接詞數少於1000次的情況下，大膽的使用前者，一般我們也很少碰到拼接次數上千的情況。
2 其他瀏覽器對於拼接都沒什麼效能問題，主要是IE6，如果拼接次數上萬或者十萬的話，建議單獨對IE6是用StringBuffer模擬。

相關文章