温故知新——JavaScript中的字符串连接问题最全总结

ECMAScript 中最常见的一个问题是字符串连接的性能。与其余语言相似，ECMAScript 的字符串是不可变的，即它们的值不能改变。请考虑下面的代码：

var str = "hello ";str += "world";

实际上，这段代码在幕后执行的步骤如下：

1、创立存储 “hello ” 的字符串。
2、创立存储 “world” 的字符串。
3、创立存储连接结果的字符串。
4、把 str 的当前内容复制到结果中。
5、把 “world” 复制到结果中。
6、升级 str，使它指向结果。

每次完成字符串连接都会执行步骤 2 到 6，使得这种操作非常消耗资源。假如重复这一过程几百次，甚至几千次，就会造成性能问题。处理方法是用 Array 对象存储字符串，而后用 join() 方法（参数是空字符串）创立最后的字符串。想象用下面的代码代替前面的代码：

var arr = new Array();arr[0] = "hello ";arr[1] = "world";var str = arr.join("");

这样，无论数组中引入多少字符串都不成问题，由于只在调用 join() 方法时才会发生连接操作。此时，执行的步骤如下：
1、创立存储结果的字符串
2、把每个字符串复制到结果中的合适位置

尽管这种处理方案很好，但还有更好的方法。问题是，这段代码不能确切反映出它的用意。要使它更容易了解，可以用 StringBuffer 类打包该功能：

function StringBuffer () { this._strings_ = new Array();}StringBuffer.prototype.append = function(str) { this._strings_.push(str);};StringBuffer.prototype.toString = function() { return this._strings_.join("");};

这段代码首先要注意的是 strings 属性，本意是私有属性。它只有两个方法，即 append() 和 toString() 方法。append() 方法有一个参数，它把该参数附加到字符串数组中，toString() 方法调用数组的 join 方法，返回真正连接成的字符串。要用 StringBuffer 对象连接一组字符串，可以用下面的代码：

var buffer = new StringBuffer ();buffer.append("hello ");buffer.append("world");var result = buffer.toString();

可用下面的代码测试 StringBuffer 对象和传统的字符串连接方法的性能：

var d1 = new Date();var str = "";for (var i=0; i < 10000; i++) { str += "text";}var d2 = new Date();document.write("Concatenation with plus: " + (d2.getTime() - d1.getTime()) + " milliseconds");var buffer = new StringBuffer();d1 = new Date();for (var i=0; i < 10000; i++) { buffer.append("text");}var result = buffer.toString();d2 = new Date();document.write("<br />Concatenation with StringBuffer: " + (d2.getTime() - d1.getTime()) + " milliseconds");

最后

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前台全栈学习交流圈：866109386.欢迎大家进群交流探讨，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终白费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎样办的前台程序员们，祝福大家在往后的工作与面试中一切顺利。