Detailed explanation of string concatenation in javascript_javascript skills

Recently, while studying "Javascript Advanced Programming", there was a description of the characteristics of strings. The original text is roughly as follows: Strings in ECMAScript are immutable, that is to say, once strings are created, their values ​​​​are cannot be changed. To change the string stored in a variable, first destroy the original string and then fill the variable with another string containing the new value, for example:

Copy code The code is as follows:

var lang = "Java";
lang = lang "Script";

The process of implementing this operation is as follows: first create a new string that can hold 10 characters, then fill this string with "Java" and "Script", and the last step is to destroy the original string "Java" and "Script", because these two strings are no longer useful. However, in lower version browsers (such as IE6), string concatenation speed is a very performance-consuming process.

This reminds me of Java. The string mechanism in Java is similar to js (that is, it cannot be changed once it is created, and the original value can only be destroyed if you want to change it). However, Java has a StringBuffer to solve the problem of string inability. The problem is that there is no similar method in js. But we can simulate this buffering mechanism. The principle is to use arrays for splicing. The source code is as follows:

Copy code The code is as follows:

function StringBuffer() {
This.__strings__ = new Array();
}
StringBuffer.prototype.append = function (str) {
This.__strings__.push(str);
Return this; //Convenient chain operation
}
StringBuffer.prototype.toString = function () {
Return this.__strings__.join("");
}

/*Test*/
var buffer = new StringBuffer();
buffer.append("Hello ").append("javascript");

var result = buffer.toString();
alert(result);

ps: The gist address is as follows: https://gist.github.com/hehongwei44/fe71f10e4d2d9295aeab

We have simulated the mechanism, but how different is the performance of this method from string splicing? We can test it. The test code is as follows:

Copy code The code is as follows:

var d1 = new Date();
var str = "";
for(var i = 0; i < 10000; i ){
str = "text ";
}
var d2 = new Date();
document.write("Test one cost: " (d2.getTime() - d1.getTime())/1000 "seconds" "
");

var oBuffer = new StringBuffer();
d3 = new Date();
for(var i = 0; i < 10000; i ){
oBuffer.append("text ");
}
var sResult = oBuffer.toString();
d4 = new Date();
document.write("Test 2 cost: " (d4.getTime() - d3.getTime())/1000 "seconds");

The test results are as follows: (The test results may be different depending on the environment):

1. Based on a comparison of 1000 times, the two executions are very fast (basically a few milliseconds) and the time consumption is similar. The difference between the latter and the former will not exceed 10 milliseconds.
2. With 10,000 times as the base, the execution results are similar to the above, but the former has more call charges under IE6.
3. Taking 100,000 times as the base, string splicing obviously takes more time under IE6. Other browsers are not much different, and some are shorter than StringBuffer.

Conclusion

1. When the number of spliced ​​words is less than 1,000 times, boldly use the former. Generally, we rarely encounter situations where the number of spliced ​​words is thousands.
2. Other browsers have no performance problems with splicing, mainly IE6. If the number of splicings is tens of thousands or hundreds of thousands, it is recommended to use StringBuffer simulation for IE6 alone.