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

I did a quick test in both node and chrome and found in both cases += is faster:

var profile = func => { 
    var start = new Date();
    for (var i = 0; i < 10000000; i++) func('test');
    console.log(new Date() - start);
}
profile(x => "testtesttesttesttest");
profile(x => `${x}${x}${x}${x}${x}`);
profile(x => x + x + x + x + x );
profile(x => { var s = x; s += x; s += x; s += x; s += x; return s; });
profile(x => [x, x, x, x, x].join(""));
profile(x => { var a = [x]; a.push(x); a.push(x); a.push(x); a.push(x); return a.join(""); });

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

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

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

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

[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