String concatenation issues in JavaScript (graphic tutorial)

This article mainly introduces the string connection problem in JS. One of the most common problems in ECMAScript is the performance of string connection. The connection operation will only occur when the join() method is called. You can check the detailed explanation below for the specific operation steps. Interested friends can refer to it.

One of the most common problems in ECMAScript is the performance of string concatenation. Similar to other languages, ECMAScript strings are immutable, that is, their values ​​cannot be changed. Consider the following code:

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

In fact, the steps performed by this code behind the scenes are as follows:

1. Create the storage "hello" " String.
2. Create a string to store "world".
3. Create a string to store the connection result.
4. Copy the current content of str to the result.
5. Copy "world" to the result.
6. Update str so that it points to the result.

Steps 2 to 6 will be executed every time string concatenation is completed, making this operation very resource-consuming. If this process is repeated hundreds, or even thousands, of times, it can cause performance issues. The solution is to use an Array object to store the string, and then use the join() method (parameter is an empty string) to create the final string. Imagine replacing the previous code with the following code:

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

In this way, no matter how many strings are introduced into the array, it will not be a problem, because only the join() method is called Only then will the connection operation occur. At this time, the steps to be performed are as follows:
1. Create a string to store the result
2. Copy each string to the appropriate location in the result

Although this solution is good, But there is a better way. The problem is, this code doesn't reflect exactly what it's intended to do. To make it easier to understand, you can wrap this functionality with the StringBuffer class:

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

The first thing to note about this code is the strings property, which is meant to be a private property. It has only two methods, namely append() and toString() methods. The append() method has a parameter, which appends the parameter to the string array. The toString() method calls the join method of the array and returns the actual concatenated string. To use a StringBuffer object to concatenate a set of strings, you can use the following code:

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

The following code can be used to test the StringBuffer object and the traditional string concatenation method. Performance:

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");

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

What are the frequent mistakes made by novices in JS

Summary of JS EventEmitter usage skills

Use JS for file dragging

The above is the detailed content of String concatenation issues in JavaScript (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!