Most efficient way to concatenate strings in JavaScript

Question

In JavaScript  I have a loop that has many iterations  and in each iteration  I am creating a huge string with many    operators  Is there a more efficient way to create a string  I was thinking about creating a dynamic array where I keep adding strings to it and then do a join  Can anyone explain and give an example of the fastest way to do this

User · Answer

Three years past since this question was answered but I will provide my answer anyway :)

Actually, accepted answer is not fully correct. Jakub's test uses hardcoded string which allows JS engine to optimize code execution (Google's V8 is really good in this stuff!). But as soon as you use completely random strings (here is JSPerf) then string concatenation will be on a second place.

User · Answer

I wonder why String prototype concat is not getting any love  In my tests  assuming you already have an array of strings   it outperforms all other methods  perf link test Test code  const numStrings   100  const strings       new Array numStrings   map      gt  Math random   toString 36  substring 6     const concatReduce    strs    gt  strs reduce  a  b    gt  a   b    const concatLoop    strs    gt      let result        for  let i   0  i  lt  strings length  i          result    strings i         return result        Case 1  52 570 ops s concatLoop strings       Case 2  96 450 ops s concatReduce strings      Case 3  138 020 ops s strings join         Case 4  169 520 ops s    concat    strings

User · Answer

You can also do string concat with template literals   I updated the other posters  JSPerf tests to include it   for  var res       i   0  i  lt  data length  i        res      res   data i

User · Answer

Seems based on benchmarks at JSPerf that using    is the fastest method  though not necessarily in every browser   For building strings in the DOM  it seems to be better to concatenate the string first and then add to the DOM  rather then iteratively add it to the dom  You should benchmark your own case though    Thanks  zAlbee for correction

User · Answer

I have no comment on the concatenation itself  but I d like to point out that  Jakub Hampl s suggestion      For building strings in the DOM  in some cases it might be better to iteratively add to the DOM  rather then add a huge string at once    is wrong  because it s based on a flawed test  That test never actually appends into the DOM   This fixed test shows that creating the string all at once before rendering it is much  MUCH faster  It s not even a contest    Sorry this is a separate answer  but I don t have enough rep to comment on answers yet

User · Answer

I did a quick test in both node and chrome and found in both cases    is faster  var profile   func   gt         var start   new Date        for  var i   0  i  lt  10000000  i    func  test        console log new Date   - start     profile x   gt   quot testtesttesttesttest quot    profile x   gt     x   x   x   x   x     profile x   gt  x   x   x   x   x    profile x   gt    var s   x  s    x  s    x  s    x  s    x  return s      profile x   gt   x  x  x  x  x  join  quot  quot     profile x   gt    var a    x   a push x   a push x   a push x   a push x   return a join  quot  quot         results in node  7 0 10  assignment  8 template literals  524 plus  382 plus equals  379 array join  1476 array push join  1651  results from chrome 86 0 4240 198   assignment  6 template literals  531 plus  406 plus equals  403 array join  1552 array push join  1813

[javascript] Most efficient way to concatenate strings in JavaScript?

Examples related to javascript

Examples related to string

Examples related to performance

Examples related to concatenation