What's the best way to do string building/concatenation in JavaScript?
JavascriptStringConcatenationConventionsJavascript Problem Overview
Does JavaScript support substitution/interpolation?
Overview
I'm working on a JS project, and as it's getting bigger, keeping strings in good shape is getting a lot harder. I'm wondering what's the easiest and most conventional way to construct or build strings in JavaScript.
My experience so far:
> String concatenation starts looking ugly and becomes harder to maintain as the project becomes more complex.
The most important this at this point is succinctness and readability, think a bunch of moving parts, not just 2-3 variables.
It's also important that it's supported by major browsers as of today (i.e at least ES5 supported).
I'm aware of the JS concatenation shorthand:
var x = 'Hello';
var y = 'world';
console.log(x + ', ' + y);
And of the String.concat function.
I'm looking for something a bit neater.
Ruby and Swift do it in an interesting way.
Ruby
var x = 'Hello'
var y = 'world'
print "#{x}, #{y}"
Swift
var x = "Hello"
var y = "world"
println("\(x), \(y)")
I was thinking that there might be something like that in JavaScript maybe something similar to sprintf.js.
Question
Can this be done without any third party library? If not, what can I use?
Javascript Solutions
Solution 1 - Javascript
With ES6, you can use
-
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:
-
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
Solution 2 - Javascript
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';
}
Solution 3 - Javascript
var descriptor = 'awesome';
console.log(`ES6 is ${descriptor}!`);
More: https://developers.google.com/web/updates/2015/01/ES6-Template-Strings?hl=en
Solution 4 - Javascript
I think replace() deserves mentioning here.
During some conditions, the replace method can serve you well when building strings. Specifically, obviously, when your injecting a dynamic part into an otherwise static string. Example:
var s = 'I am {0} today!';
var result = s.replace('{0}', 'hungry');
// result: 'I am hungry today!'
The placeholder which to replace can obviously be anything. I use "{0}", "{1}" etc out of habit from C#. It just needs to be unique enough not to occur in the string other than where intended.
So, provided we can fiddle with the string parts a bit, OPs example could be solved like this too:
var x = 'Hello {0}';
var y = 'World';
var result = x.replace('{0}', y);
// result: 'Hello World'. -Oh the magic of computing!
Reference for "replace": https://www.w3schools.com/jsreF/jsref_replace.asp
Solution 5 - Javascript
You could use the concat
function.
var hello = "Hello ";
var world = "world!";
var res = hello.concat(world);
Solution 6 - Javascript
You could use Coffeescript, it's made to make javascript code more concise.. For string concatenation, you could do something like this:
first_name = "Marty"
full_name = "#{first_name} McFly"
console.log full_name
Maybe you can start here to see what's offered by coffescript..
Solution 7 - Javascript
**Top 3 Practical Ways to Perform Javascript String Concatenation**
1) Using the concat() method
let list = ['JavaScript',' ', 'String',' ', 'Concatenation'];
let result = ''.concat(...list);
console.log(result);
Output:
JavaScript String Concatenation
2) Using the + and += operators
enter code here
The operator + allows you to concatenate two strings.
For example:
let lang = 'JavaScript';
let result = lang + ' String';
console.log(result);
Output: JavaScript String
3) Using template literals`enter code here`
ES6 introduces the template literals that allow you to perform string interpolation.
The following example shows how to concatenate three strings:
let navbarClass = 'navbar';
let primaryColor = 'primary-color';
let stickyClass = 'sticky-bar';
let className = `${navbarClass} ${primaryColor} ${stickyClass}`;
console.log(className);
Output: navbar primary-color stickyBar