What's the best way to do string building/concatenation in JavaScript?

With ES6, you can use

• Template strings:

  var username = 'craig';console.log(`hello ${username}`);

ES5 and below:

• use the + operator

  var username = 'craig';var joined = 'hello ' + username;

• String's concat(..)

  var username = 'craig';var joined = 'hello '.concat(username);

Alternatively, use Array methods:

• join(..):

  var username = 'craig';var joined = ['hello', username].join(' ');

• Or even fancier, reduce(..) combined with any of the above:

  var a = ['hello', 'world', 'and', 'the', 'milky', 'way'];var b = a.reduce(function(pre, next) {  return pre + ' ' + next;});console.log(b); // hello world and the milky way

I'm disappointed that nobody in the other answers interpreted "best way" as "fastest way"...

I pulled the 2 examples from here and added str.join() and str.reduce() from nishanths's answer above. Here are my results on Firefox 77.0.1 on Linux.

Note: I discovered while testing these that if I place str = str.concat() and str += directly before or after each other, the second one always performs a fair bit better... So I ran these tests individually and commented the others out for the results...

Even still, they varied widely in speed if I reran them, so I measured 3 times for each.

1 character at a time:

• str = str.concat(): 841, 439, 956 ms / 1e7 concat()'s
• ............str +=: 949, 1130, 664 ms / 1e7 +='s
• .........[].join(): 3350, 2911, 3522 ms / 1e7 characters in []
• .......[].reduce(): 3954, 4228, 4547 ms / 1e7 characters in []

26 character string at a time:

• str = str.concat(): 444, 744, 479 ms / 1e7 concat()'s
• ............str +=: 1037, 473, 875 ms / 1e7 +='s
• .........[].join(): 2693, 3394, 3457 ms / 1e7 strings in []
• .......[].reduce(): 2782, 2770, 4520 ms / 1e7 strings in []

So, regardless of whether appending 1 character at a time or a string of 26 at a time:

• Clear winner: basically a tie between str = str.concat() and str +=
• Clear loser: [].reduce(), followed by [].join()

My code, easy to run in a browser console:

{  console.clear();  let concatMe = 'a';  //let concatMe = 'abcdefghijklmnopqrstuvwxyz';  //[].join()  {    s = performance.now();    let str = '', sArr = [];    for (let i = 1e7; i > 0; --i) {      sArr[i] = concatMe;    }    str = sArr.join('');    e = performance.now();    console.log(e - s);    console.log('[].join(): ' + str);  }  //str +=  {    s = performance.now();    let str = '';    for (let i = 1e7; i > 0; --i) {      str += concatMe;    }    e = performance.now();    console.log(e - s);    console.log('str +=: ' + str);  }  //[].reduce()  {    s = performance.now();    let str = '', sArr = [];    for (let i = 1e7; i > 0; --i) {      sArr[i] = concatMe;    }    str = sArr.reduce(function(pre, next) {      return pre + next;    });    e = performance.now();    console.log(e - s);    console.log('[].reduce(): ' + str);  }  //str = str.concat()  {    s = performance.now();    let str = '';    for (let i = 1e7; i > 0; --i) {      str = str.concat(concatMe);    }    e = performance.now();    console.log(e - s);    console.log('str = str.concat(): ' + str);  }  'Done';}