快捷導(dǎo)航

javascript中字符串拼接詳解

更新時(shí)間：2014年09月26日 12:00:50 投稿：hebedich

字符串拼接是所有程序設(shè)計(jì)語言都需要的操作。當(dāng)拼接結(jié)果較長時(shí)，如何保證效率就成為一個(gè)很重要的問題。本文介紹的是Javascript中的字符串拼接，希望對(duì)你有幫助，一起來看。

最近在研究《javascript高級(jí)程序設(shè)計(jì)》中，有一段關(guān)于字符串特點(diǎn)的描述，原文大概如下：ECMAScript中的字符串是不可變的，也就是說，字符串一旦創(chuàng)建，他們的值就不能改變。要改變某個(gè)變量的保存的的字符串，首先要銷毀原來的字符串，然后再用另外一個(gè)包含新值的字符串填充該變量，例如：

復(fù)制代碼代碼如下:

var lang = "Java";

lang = lang + "Script";

實(shí)現(xiàn)這個(gè)操作的過程如下：首先創(chuàng)建一個(gè)能容納10個(gè)字符的新字符串，然后在這個(gè)字符串中填充“Java”和“Script”,最后一步是銷毀原來的字符串“Java”和“Script”,因?yàn)檫@兩個(gè)字符串已經(jīng)沒用了。但是在低版本的瀏覽器(如IE6)中，字符串拼接速度是很消耗一個(gè)性能的過程。

由此我就聯(lián)想到了Java，在Java中的字符串機(jī)制也和js差不多（即創(chuàng)建了就不能改變，要改變只能銷毀原來的值），但是Java有個(gè)StringBuffer解決了字符串不可變的問題，js且沒有類似的方法。但是我們可以模擬這種緩沖機(jī)制。其原理是利用數(shù)組進(jìn)行拼接，源代碼如下：

復(fù)制代碼代碼如下:

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

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

ps:gist地址如下：https://gist.github.com/hehongwei44/fe71f10e4d2d9295aeab

機(jī)制我們模擬出來了，但是這個(gè)方法和字符串拼接性能上有多少差別了，我們可以測試一下，測試代碼如下：

復(fù)制代碼代碼如下:

var d1 = new Date();
var str = "";
for(var i = 0; i < 10000; i++){
str += "text ";
}
var d2 = new Date();
document.write("測試一花費(fèi): " + (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("測試二花費(fèi): " + (d4.getTime() - d3.getTime())/1000 + "秒");

測試結(jié)果如下：（環(huán)境不同，測試結(jié)果可能不同）：

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

結(jié)論

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

您可能感興趣的文章: