How to interpolate variables in strings in JavaScript, without concatenation?

Question

I know in PHP we can do something like this:

$hello = "foo"; $my_string = "I pity the $hello"; 

Output: "I pity the foo"

I was wondering if this same thing is possible in JavaScript as well. Using variables inside strings without using concatenation — it looks more concise and elegant to write.

Answer 1

You can take advantage of Template Literals and use this syntax:

`String text ${expression}` 

Template literals are enclosed by the back-tick (` `) (grave accent) instead of double or single quotes.

This feature has been introduced in ES2015 (ES6).

Example

var a = 5; var b = 10; console.log(`Fifteen is ${a + b}.`); // "Fifteen is 15. 

How neat is that?

Bonus:

It also allows for multi-line strings in javascript without escaping, which is great for templates:

return `     <div class="${foo}">          ...     </div> `; 

Browser support:

As this syntax is not supported by older browsers (mostly Internet Explorer), you may want to use Babel/Webpack to transpile your code into ES5 to ensure it will run everywhere.

---

Side note:

Starting from IE8+ you can use basic string formatting inside console.log:

console.log('%s is %d.', 'Fifteen', 15); // Fifteen is 15. 

Answer 2

Prior to Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, nope, that was not possible in javascript. You would have to resort to:

var hello = "foo"; var my_string = "I pity the " + hello;