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

Question

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?

Answer 1

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