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
+
operatorvar 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()
andstr +=
- 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';
}
var descriptor = 'awesome';
console.log(`ES6 is ${descriptor}!`);
More: https://developers.google.com/web/updates/2015/01/ES6-Template-Strings?hl=en