Splicing of long strings in Javascript

String concatenationIs required by all programming languages. When splicing results are long, how to ensure efficiency becomes a very important issue.

The strcat function of C language directly operates on the memory, which is naturally the most efficient. The string class of C ++ is variable, which is essentially a direct operation on the memory. The efficiency is also quite different. The String class of Java is immutable, string concatenation means that new objects are generated. Therefore, a StringBuffer class dedicated to String concatenation is provided, which also ensures the execution efficiency.

In Javascript, large-scale String concatenation is uncommon, but it is not.

In this case, traditional String concatenation is slow:

 
 

  
  
<Script>
  
  
Function strcat1 (count, substr) // concatenate count substr
  
  
{
  
  
Var result = "";
  
  
For (var I = 0; I <count; ++ I)
  
  
{
  
  
Result + = substr;
  
  
}
  
  
Return result;
  
  
}
  
  
Var begin = new Date ();
  
  
Strcat1 (10000, "substr ");
  
  
Var end = new Date ();
  
  
Alert (end. valueOf ()-begin. valueOf ());
  
  
</Script>
 
 

In my machine) This Code takes 3 seconds. Is there a quick stitching method? The answer is yes. Javascript also provides something similar to StringBuffer, which is an array:

 
 

  
  
<script>   
  
  
function strcat2(count, substr)  
  
  
{  
  
  
var buffer = [];  
  
  
for (var i = 0; i < count; ++i)  
  
  
{  
  
  
buffer.push(substr);  
  
  
}  
  
  
return buffer.join("");  
  
  
}  
  
  
var begin = new Date();  
  
  
strcat2(10000, "substr");   
  
  
var end = new Date();  
  
  
alert(end.valueOf() - begin.valueOf());  
  
  
</script> 
 
 

This code is executed in about 80 milliseconds, dozens of times faster than traditional String concatenation. This is for large-scale String concatenation. For small-scale String concatenation, we can compare the efficiency of the two splicing methods:

 
 

  
  
<script>  
  
  
function strcat1(count, substr)  
  
  
{  
  
  
var result = "";  
  
  
for (var i = 0; i < count; ++i)  
  
  
{  
  
  
result += substr;  
  
  
}  
  
  
return result;  
  
  
}  
  
  
function strcat2(count, substr)  
  
  
{  
  
  
var buffer = [];  
  
  
for (var i = 0; i < count; ++i)  
  
  
{  
  
  
buffer.push(substr);  
  
  
}  
  
  
return buffer.join("");  
  
  
}  
  
  
function test(strcat)  
  
  
{  
  
  
var substr = "substr";  
  
  
var begin = new Date();  
  
  
for (var i = 0; i < 1000; ++i)  
  
  
{  
  
  
strcat(10, substr);  
  
  
}  
  
  
var end = new Date();  
  
  
return end.valueOf() - begin.valueOf();  
  
  
}  
  
  
alert(test(strcat1) + "," + test(strcat2));  
  
  
</script> 
 
 

This round is the winner of the traditional splicing method, and its speed is about twice that of the array method. It can be verified that the fewer splicing times, the greater the advantage of traditional splicing methods. Therefore, in large-scale splicing, if you mix traditional splicing methods and array splicing methods, the speed will be faster:

 
 

  
  
<script>   
  
  
function strcat3(count, substr)  
  
  
{  
  
  
var buffer = [];  
  
  
count /= 5;  
  
  
for (var i = 0; i < count; ++i)  
  
  
{  
  
  
buffer.push(substr + substr + substr + substr + substr);  
  
  
}  
  
  
return buffer.join("");  
  
  
}  
  
  
var begin = new Date();  
  
  
strcat3(10000, "substr");   
  
  
var end = new Date();  
  
  
alert(end.valueOf() - begin.valueOf());  
  
  
</script> 
 
 

This operation takes only 30 milliseconds. Therefore, we recommend that you concatenate long strings in the array mode, supplemented by the traditional method. The following is an example:

 
 

  
  
<script>   
  
  
function doLoad()  
  
  
{  
  
  
var buffer = ["<table style='width:100%' border=1>"];  
  
  
for (var i = 0; i < 100; ++i)  
  
  
{  
  
  
buffer.push("<tr>");  
  
  
for (var j = 0; j < 20; ++j)  
  
  
{  
  
  
buffer.push("<td>" + i + "," + j + "</td>");  
  
  
}  
  
  
buffer.push("</tr>");  
  
  
}  
  
  
buffer.push("</table>");  
  
  
document.body.innerHTML = buffer.join("");  
  
  
}  
  
  
</script>  
  
  
<body onload="doLoad()"></body> 
 
 

Note:

1. The reason for the above difference between the traditional method and the array method is that the time complexity of splicing n strings in the traditional method is O (n ^ 2), but the coefficient is small; the time complexity of the array method is O (n), but the coefficient is large.

2. The above code is successfully debugged in IE6.

I hope this article will help you.