JavaScript中的字符串连接

ref：

这篇文章将会介绍一些能够提高你的JavaScript代码性能的建议和技巧。

原文参见http://hi.baidu.com/forain/blog/item/62e8918fc2eb4aff513d929c.html

 

问题

大多数JavaScript开发者都习惯于使用 JavaScript提供的简单的字符串处理，比如连接字符串的”+”运算符：

var str = “Hello” + “ World”;

这句代码可读性很好，对于连接小的字符串是很方便的。但是利用这样的方法去操作许多的字符串（比如当你要动态的创建整个页面内容）时，代码性能将被严重影响。

解决方案

数组对象的join方法使我们可以将数组里的所有元素连接成为一个字符串，在这个连接过程中，join方法还允许我们设定一个字符作为分隔符插入在各个元素中间昨晚间隔。如果我们将我们要连接的文字段落的各个部分分别赋予给一个数组的各个元素，然后利用join方法将他们连接在一起（分隔符设置为空），我们可以得到与“+”操作同样的结果。这种方法类似于JAVA中的StringBuffer对象。

 

var buffer = new Array();buffer[buffer.length] = "Hello";buffer[buffer.length] = " World"; buffer.join("");测试

利用数组join方法连接字符串的好处在于它确确实实地提高了代码的效率。为了说明这个结论，作者做了一个测试，测试结果如下：

方法

浏览器

最小值

最大值

平均值

传统的字符串连接操作

IE 6

460ms

810ms

646ms

FF 1.5B1

15ms

47ms

26ms

利用数组的join方法

IE 6

15ms

32ms

26ms

FF 1.5B1

15ms

31ms

20ms

结论

在你的JavaScript应用中使用数组的join方法能够提高你的代码效率，给用户带来更加流畅的体验。

测试方法

function test1(){
    var cycles = 10000;
    var tp1 = new Date().valueOf();
    var buffer = ""; 
  for (var i = 0; i < cycles; i++)
    buffer += "0123456789";
    var tp2 = new Date().valueOf(); 
    alert(tp2 - tp1);
}

 function test2(){ 
     var tp1 = new Date().valueOf(); 
     var buffer = new Array(); 
  for (var i = 0; i < cycles; i++) 
     buffer[buffer.length] = "0123456789";
     var str = buffer.join(""); 
     var tp2 = new Date().valueOf(); alert(tp2 - tp1);
}