3

I need to construct a long string with javascript. Thats how i tried to do it:

var html = '<div style="balbalblaba">&nbsp;</div>';
for(i = 1; i <= 400; i++){
   html+=html;
};

When i execute that in firefox its taking ages or makes it crash. what is the best way to do that? What is generally the best way to construct big strings in JS.

can someone help me?

meo
  • 30,872
  • 17
  • 87
  • 123

4 Answers4

12

I assume you mean html += html;.

If you do that, your html string's length will be 37 × 2400 = 9.5 × 10121 which is beyond the limit of any browsers, on any computers, in any[1] known universes can handle.

If you just want to repeat that string 400 times, use

var res = "";
for (var i = 0; i < 400; ++ i)
   res += html;
return res;

or 

var res = [];
for (var i = 0; i < 400; ++ i)
   res.push(html);
return res.join("");

See Repeat String - Javascript for more options.

[1]: As in "this universe".

Community
  • 1
  • 1
kennytm
  • 510,854
  • 105
  • 1,084
  • 1,005
  • +1 but should be "...any browsers and any computers in the _known_ universe..." –  Apr 09 '10 at 19:37
  • thx for the link! Yeah i have made an error while simplifying my example for the post! Thanks a lot for the explanation! How does it comes that it is faster to flatten a array, then to join some strings? – meo Apr 09 '10 at 21:25
  • @david: `Array.join` was more efficient than `+=` for long string. I don't know the situation of JS optimization now but it's still better to build a string using `.join` to cater for older browsers. – kennytm Apr 09 '10 at 21:31
  • oh i don't care about the old browsers for this, its just a visual experiment. I fill the screen with pixels made out of divs. (window.size / pixel.size (10x10)). Now it works, but still its very slow. I wonder how i could optimize this... But that, is gonna be an other question soon. Thx anyway for your excellent answer – meo Apr 09 '10 at 21:42
6

String concatenation is very slow in some browsers (coughIE6*cough*). Joining an array should be much quicker than looping with concatenation:

var arr = new Array(401);
var html = arr.join('<div style="balbalblaba">&nbsp;</div>');
Andy E
  • 338,112
  • 86
  • 474
  • 445
  • You can do away with the `new ` prefix, as just `Array(401)` will suffice. – James Apr 09 '10 at 19:37
  • 2
    @J-P: you can, but the behaviour is exactly the same and I generally prefer to treat the `Array()` object as a constructor when creating arrays with it :-) – Andy E Apr 09 '10 at 19:44
  • 1
    @sterofrog: As I have done, when writing this into my own code. Sometimes I prefer to separate in answers for extra clarity. To each his own, right? ;-) – Andy E Apr 09 '10 at 22:16
1

Another way to do it is by create an Array of stings then using Array.join(''). This is effectively the Python way of building strings, but it should work for JavaScript as well.

Kathy Van Stone
  • 25,531
  • 3
  • 32
  • 40
0
var src = '<div style="balbalblaba">&nbsp;</div>';
var html = '';
for(i = 1; i <= 400; i++){
   html=+src;
};

Your code is doubling the string 400 times.

Devon_C_Miller
  • 16,248
  • 3
  • 45
  • 71