JavaScript 中,我们经常会因为各种各样的原因去拼接字符串，可能是为了Html的呈现，可能是为了属性的设置，也可能仅仅是为了输出调试日志。
每次拼接字符串的时候，我们很自然地去考虑它的性能，是不是str=str+a是不是和str+=a性能一样，使用数组Join是不是会更快一些，哪一种才是最好的实现。
的确，我们有诸多方式去拼接字符串，下面本文将会将主流字符串拼接方逐一进行性能评测。
公平起见，我们的测试都是跑在各浏览器的最后一个正式发布版本上，即IE9 ，Chrome19，FF13 及Opera12。
为了测试，我们先构造一个 data,它有个成员，是个100大小的数组。
1: var length = 100;
2: var data = { list: [] };
3: for (var i = 0; i < length; i ++) {
4: data.list.push({
5: str1: 'chsword, 邹健, Zou Jian ',
6: str2: 'http://chsword.cnblogs.com',
7: str3: 'http://www.chsword.net',
8: str4: '"http://weibo.com/chsword","http://t.qq.com/chsword"',
9: str5: 'test'
10: });
11: };
准备好了，那么我们来进行测试，我选定了8种字符串拼接的方法，然后每一种运行1W次的字符串拼接，每一次拼接将元素的五个子元素拼接在一起：
1.str+=str+a;
2.str=str.concat(a);
3.arr.push(a); and arr.join(“”);
4.str=str.concat(a,b,c,d,e);
5.str=str+a;
6.str=String.prototype.concat(str,a,b,c,d,e);
7.str=String.prototype.concat.apply(s, [a,b,c,d,e]);
8.str=String.prototype.concat(str,a);
9.arr[arr.length]=a
我将以上测试运行在这些浏览器上: IE 9, Chrome 19, Firefox 13, Opera 12.
结果为:
注：图表中单位为MS，标记为2000的都是运行了1分钟以上还未停止的。
通过图表，我们可以看到+=的性能在主流浏览器中平均最高，不过，要说明一点，+=操作在IE早期版本中，性能较差。
Array.Join 来拼接字符串，在FF和Chrome中都比+=方法慢上数倍。
另外，还有像String.prototype.concat(str,a,b,c,d,e)这样的操作，如果在Chrome及Opera中大量执行的话，会直接令页面挂掉，所以这些都是不推荐使用的
总结一下，总体看来+=的性能最高，早先的浏览器中，使用Array.Join性能会较高
测试代码 :
1.使用 +=
1: var str="";
2: for (var i = 0; i < number; i ++) {
3: for(var j=0;j<length;j++){
4: str+=data.list[j].str1;
5: str+=data.list[j].str2;
6: str+=data.list[j].str3;
7: str+=data.list[j].str4;
8: str+=data.list[j].str5;
9: }
10: str+="\n";
11: }
2.str.concat
1: var str = "";
2: for (var i = 0; i < number; i++) {
3: for (var j = 0; j < length; j++) {
4: str=str.concat(data.list[j].str1);
5: str=str.concat(data.list[j].str2);
6: str=str.concat(data.list[j].str3);
7: str=str.concat(data.list[j].str4);
8: str=str.concat(data.list[j].str5);
9: }
10: str=str.concat( "\n");
11: }
3.Use Array Join
1: var arr=[];
2: for (var i = 0; i < number; i ++) {
3: for(var j=0;j<length;j++){
4: arr.push(data.list[j].str1);
5: arr.push(data.list[j].str2);
6: arr.push(data.list[j].str3);
7: arr.push(data.list[j].str4);
8: arr.push(data.list[j].str5);
9: }
10: arr.push("\n");
11: }
12: arr.join("");
4.str=str.concat(a,b,c,d,e);
1: var str = "";
2: for (var i = 0; i < number; i++) {
3: for (var j = 0; j < length; j++) {
4: str = str.concat(data.list[j].str1
5: ,data.list[j].str2
6: ,data.list[j].str3
7: ,data.list[j].str4
8: ,data.list[j].str5);
9: }
10: str = str.concat("\n");
11: }
5.str=str+a
1: var str = "";
2: for (var i = 0; i < number; i++) {
3: for (var j = 0; j < length; j++) {
4: str = str + data.list[j].str1;
5: str = str + data.list[j].str2;
6: str = str + data.list[j].str3;
7: str = str + data.list[j].str4;
8: str = str + data.list[j].str5;
9: }
10: str = str + "\n";
11: }
6.str=String.prototype.concat(str,a,b,c,d,e)
1: var str = "";
2: for (var i = 0; i < number; i++) {
3: for (var j = 0; j < length; j++) {
4: str = String.prototype.concat(str,data.list[j].str1,
5: data.list[j].str2,
6: data.list[j].str3,
7: data.list[j].str4,
8: data.list[j].str5);
9: }
10: str = String.prototype.concat(str,"\n");
11: }
7.str=String.prototype.concat.apply(s, [a,b,c,d,e])
1: var str = "";
2: for (var i = 0; i < number; i++) {
3: for (var j = 0; j < length; j++) {
4: str = String.prototype.concat.apply(str, [data.list[j].str1,
5: data.list[j].str2,
6: data.list[j].str3,
7: data.list[j].str4,
8: data.list[j].str5]);
9: }
10: str =String.prototype.concat.apply(str,["\n"]);
11: }
8.str=String.prototype.concat(str,a)
1: var str = "";
2: for (var i = 0; i < number; i++) {
3: for (var j = 0; j < length; j++) {
4: str = String.prototype.concat.call(str,data.list[j].str1);
5: str = String.prototype.concat.call(str,data.list[j].str2);
6: str = String.prototype.concat.call(str,data.list[j].str3);
7: str = String.prototype.concat.call(str, data.list[j].str4);
8: str = String.prototype.concat.call(str,data.list[j].str5);
9: }
10: str = String.prototype.concat(str, "\n");
11: }
1 var arr=[]; 2 for (var i = 0; i < number; i ++) { 3 for(var j=0;j<length;j++){ 4 arr[arr.length]=data.list[j].str1; 5 arr[arr.length]=data.list[j].str2; 6 arr[arr.length]=data.list[j].str3; 7 arr[arr.length]=data.list[j].str4; 8 arr[arr.length]=data.list[j].str5; 9 } 10 arr[arr.length]="\n"; 11 } 12 arr.join("");