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';
}

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.)