Details of string concatenation in javascript

In a recent review of javascript advanced programming, there is a description of the characteristics of strings that goes something like this: strings in ECMAScript are immutable, meaning that once strings are created, their values cannot be changed. To change the saved string of a variable, first destroy the original string and then populate the variable with another string containing the new value, for example:

var lang = "Java";

lang = lang + "Script";

  This is done by first creating a new 10-character string, then populating the string with "Java" and "Script", and finally destroying the original strings "Java" and "Script" because they are no longer useful. But in lower versions of browsers, such as IE6, string splicing speed is a very expensive process.

This brings me to Java, where the string mechanism is similar to js (that is, it cannot be changed if it is created, and the original value can only be destroyed if it is changed), but Java has a StringBuffer to solve the problem of immutable strings, and js has no similar method. But we can simulate this buffering mechanism. The principle is to use the array to splice, the source 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("");

}


var buffer = new StringBuffer();

buffer.append("Hello ").append("javascript");
var result = buffer.toString();

alert(result); 

  Ps: the gist address is as follows: (link: https://gist.github.com/hehongwei44/fe71f10e4d2d9295aeab)

We have simulated the mechanism, but this method and string splicing performance how much difference, we can test, test code as follows:

var d1 = new Date();

var str = "";

for(var i = 0; i < 10000; i++){

    str += "text ";

}

var d2 = new Date();

document.write(" Test cost : " + (d2.getTime() - d1.getTime())/1000 + " seconds "+"<br/>");
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. On a base of 1000, both are very fast (typically a few milliseconds) and take about the same amount of time to execute, with the latter within 10 milliseconds of the former.
  2. In the case of base 10,000 times, the execution result is similar to the above, but the former has more call fee events under IE6.
  3. At a base of 100,000 times, string splicing in IE6 takes significantly more time than in other browsers, some of which are shorter than StringBuffer.

conclusion

1. When the number of splicing words is less than 1000 times, use the former boldly. Generally, we seldom encounter the situation where the number of splicing is thousands of times.
  2. Other browsers have no performance problems for splicing, mainly IE6. If splicing times are tens of thousands or hundreds of thousands, it is recommended to use StringBuffer simulation for IE6 alone.