During work, you often encounter the problem of concatenating 2 or more strings into one string. There are generally three ways to deal with this type of problem in JS. Here are the list of them one by one and make a specific comparison of their performance.
The first method uses the connector "+" to connect the string to be connected:
str="a";str+="b";
There is no doubt that this method is the most convenient and fast. If you only connect less than 100 strings, it is recommended to use this method.
The second method uses an array as an intermediary to connect the string with join:
var arr=new Array();arr.push(a);arr.push(b);var str=arr.join("");The w3school website introduces that this method consumes less resources than the first one and is faster. We will later verify whether this is the case through experiments.
The third method uses object properties 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 compare the performance of the three methods and adjust the number of connection strings by changing the value of c:
var str="";var d1,d2;var c=5000;//Number of connection strings//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- mystr.append("a"); }str=mystr.toString(); d2=new Date(); console.log(d2.getTime()-d1.getTime());//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Date();console.log(d2.getTime()-d1.getTime());//-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------I adjusted c to be equal to 5000, 50000, 500000, and 50000000, respectively. Each value was measured 10 times respectively, and the final result was as follows:
c=5000
Average time in milliseconds
The third type 3 2 2 3 1 2 2 1 1 1 1 1.8
The second type 1 3 0 3 1 3 4 1 4 2 2.2
The first type 0 0 0 0 0 0 1 1 1 1 1 0.5
c=50000
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
The 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 93.2
The first type 90 87 83 85 85 83 84 83 88 86 85.4
c=5000000
The third type 651 871 465 444 1012 436 787 449 432 444 599.1
The second type 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
When counting 5000000, random parameters are added to the address bar, which should avoid the impact of cache. Judging from the results, the first method does not consume more than the other two methods, and it is even more advantageous, which is obviously inconsistent with the instructions in the manual.
Test system: win 7 flagship
Browser: chrome 52.0.2739.0 m
The above article briefly discusses the three string connection methods and performance comparisons in JS are all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.