JavaScript字符串拼接性能-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_21250/article/details/82230810

本文对比了JavaScript中使用+号与数组join方法进行字符串拼接的性能差异。通过10000次连接测试发现，在现代浏览器如Chrome、Firefox中，两者耗时相近；但在IE6和IE7上，使用join方法明显更优。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript字符串拼接方法：
1. +号： var result = “hello” + ” ” + “world”;
2. 数组join方法：var arr = ["hello", " ", "world"]; arr.join(“”);

示例代码：

<html>
<head>
    <script type="text/javascript">

        function main() {
            var str = "Hello World";
            var tab = "";

            document.getElementById("time1").innerHTML = new Date().getTime();
            for (var i = 0; i < 10000; i++) {
                tab += str + i;
            }

            document.getElementById("time2").innerHTML = new Date().getTime();

            var tab2 = [];

            document.getElementById("time3").innerHTML = new Date().getTime();
            for (var i = 0; i < 10000; i++) {
                tab2.push(str + i);
            }

            document.getElementById("time4").innerHTML = new Date().getTime();
        }
    </script>
</head>
<body onload="main();">
    <div id="time1"></div>
    <div id="time2"></div>
    <div id="time3"></div>
    <div id="time4"></div>
</body>
</html>

选取的数据为10000次连接相加，测试结果如下：
[table]
|浏览器|字条串+|字符串数组join|
|IE6|171毫秒|30毫秒|
|IE7|171毫秒|20毫秒|
|Chrome15|3毫秒|1毫秒|
|Firefox8|1毫秒|1毫秒|
|Opera11.52|3毫秒|3毫秒|
[/table]
现代的浏览器，通过+与通过join在IE上有比较大的不同，如果考虑的是主要为IE6和IE7等用户的话，数据量大，则优先考虑使用数组的join方法为好。
如果数据量小的话或者是数据较短，而语义上有连续的话，使用+为好，直接，并且容易看懂。