Javascript 中的长字符串拼接

Javascript 中的长字符串拼接

作者：microsopht 2006-01-21

    字符串拼接是所有程序设计语言都需要的操作。当拼接结果较长时，如何保证效率就成为一个很重要的问题。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%' ];

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

οnlοad="doLoad()"><

/body

>

说明：

    1、传统方式与数组方式会有以上差别的原因在于：传统方式拼接 n 个字符串的时间复杂度为 O(n^2)，但系数较小；数组方式的时间复杂度为 O(n)，但系数较大。

    2、以上代码在 IE6 中调试通过。