Detailed explanation of three string connection methods in JS and their performance comparison

This article explains in detail the three string connection methods in JS and their performance comparison

In work, we often encounter the need to connect 2 or more When it comes to concatenating strings into one string, there are generally three ways to deal with this type of problem in JS. Here we list them one by one and also make a specific comparison of their performance.

The first method is to use the connector "+" to connect the strings to be connected:

str="a";
str+="b";

There is no doubt that this method is the most convenient and fastest , if you only connect less than 100 strings, it is recommended to use this method as the most convenient.

The second method is to use array as an intermediary and use join to connect the string:

var arr=new Array();
arr.push(a);
arr.push(b);
var str=arr.join("");

w3school website Introduction says this This method consumes less resources and is faster than the first method. We will verify whether this is the case through experiments later.

The third method uses objectproperties to connect strings

function stringConnect(){
    this._str_=new Array();
}
stringConnect.prototype.append=function(a){
    this._str_.push(a);
}
stringConnect.prototype.toString=function(){
    return this._str_.join();
}
    var mystr=new stringConnect;
    mystr.append("a");
    var str=mystr.toString();

Use the following code to connect the three To compare the performance of two methods, adjust the number of connection strings by changing the value of c:

var str="";
var d1,d2;
var c=5000;//连接字符串的个数

//------------------------测试第三种方法耗费时间-------
 d1=new Date();
function stringConnect(){
    this._str_=new Array();
}
stringConnect.prototype.append=function(a){
    this._str_.push(a);
}
stringConnect.prototype.toString=function(){
    return this._str_.join("");
}
    var mystr=new stringConnect;

    for(var i=0;i<c;i++){
        mystr.append("a");
    }
str=mystr.toString();
 d2=new Date();
 console.log(d2.getTime()-d1.getTime());
//-----------------------------------------------------

//------------------------测试第二种方法耗费时间-------
d1=new Date();
    var arr=new Array();
for(var i=0;i<c;i++){
    arr.push("a");
}
str=arr.join("");
    d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

//------------------------测试第一种方法耗费时间-------
d1=new Date();for(var i=0;i<c;i++){
    str+="a";
}
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

I adjust c to equal 5000, 50000, 500000, 5000000 respectively, and each value is respectively Measured 10 times, the final result is as follows:

##c=5000

                                                                                                              ‐                         to  3 2 2 3 1 2 2 1 1 1 1.8
Second type 1 3 0 3 1 3 4 1 4 2 2.2
First type 0 0 0 0 0 1 1 1 1 1                                                                                                                                                                                                                                                                    The third type 22 12 9 14 12 13 13 13 10 17 13.5
The second type 8 13 12 8 11 11 8 9 8 9 9.7
First type 7 12 5 11 10 10 10 13 16 12 10.6

c=500000

The third type 104 70 74 69 76 77 69 102 73 73           78.7
The second type 78 100 99 99 100 98 96 71 94 97                                                                                                                                                  90 87 83 85 85 83 84 83 88 86 85.4

c=5000000

The third type651 871 465 444 1012 436 787 449 432 444 599.1

Second 568 842 593 747 417 747 719 549 573 563 631.8
The first type 516 279 616 161 466 416 201 495 510 515 417.5

Random parameters were added to the address bar when counting 5000000, which should avoid the impact of caching. Judging from the results, the first method does not consume more than the other two methods, and is even more advantageous. This is obviously inconsistent with the instructions in the manual.

Test system: win 7 flagship

Browser: chrome 52.0.2739.0 m

The above is the detailed content of Detailed explanation of three string connection methods in JS and their performance comparison. For more information, please follow other related articles on the PHP Chinese website!