How can I do string interpolation in JavaScript?

How can I do string interpolation in JavaScript?

Consider this code:
var age = 3;

console.log(“I’m ” + age + ” years old!”);

Are there any other ways to insert the value of a variable in to a string, apart from string concatenation?

Solutions/Answers:

Solution 1:

Since ES6, you can use template literals:

let age = 3
console.log(`I'm ${age} years old!`)

P.S. Note the use of backticks: ``.

Solution 2:

tl;dr

Use ECMAScript 2015’s Template String Literals, if applicable.

Explanation

There is no direct way to do it, as per ECMAScript 5 specifications, but ECMAScript 6 has template strings, which were also known as quasi-literals during the drafting of the spec. Use them like this:

> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'

You can use any valid JavaScript expression inside the {}. For example:

> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'

The other important thing is, you don’t have to worry about multi-line strings anymore. You can write them simply as

> `foo
...     bar`
'foo\n    bar'

Note: I used io.js v2.4.0 to evaluate all the template strings shown above. You can also use the latest Chrome to test the above shown examples.

Note: ES6 Specifications are now finalized, but have yet to be implemented by all major browsers.
According to the Mozilla Developer Network pages, this will be implemented for basic support starting in the following versions: Firefox 34, Chrome 41, Internet Explorer 12. If you’re an Opera, Safari, or Internet Explorer user and are curious about this now, this test bed can be used to play around until everyone gets support for this.

Solution 3:

Douglas Crockford’s Remedial JavaScript includes a String.prototype.supplant function. It is short, familiar, and easy to use:

String.prototype.supplant = function (o) {
    return this.replace(/{([^{}]*)}/g,
        function (a, b) {
            var r = o[b];
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

// Usage:
alert("I'm {age} years old!".supplant({ age: 29 }));
alert("The {a} says {n}, {n}, {n}!".supplant({ a: 'cow', n: 'moo' }));

If you don’t want to change String’s prototype, you can always adapt it to be standalone, or place it into some other namespace, or whatever.

Solution 4:

Word of caution: avoid any template system which does’t allow you to escape its own delimiters. For example, There would be no way to output the following using the supplant() method mentioned here.

“I am 3 years old thanks to my {age} variable.”

Simple interpolation may work for small self-contained scripts, but often comes with this design flaw that will limit any serious use. I honestly prefer DOM templates, such as:

<div> I am <span id="age"></span> years old!</div>

And use jQuery manipulation: $('#age').text(3)

Alternately, if you are simply just tired of string concatenation, there’s always alternate syntax:

var age = 3;
var str = ["I'm only", age, "years old"].join(" ");

Solution 5:

Try sprintf. For example:

vsprintf('The first 4 letters of the english alphabet are: %s, %s, %s and %s', ['a', 'b', 'c', 'd']);

Solution 6:

You could use Prototype’s template system if you really feel like using a sledgehammer to crack a nut:

var template = new Template("I'm #{age} years old!");
alert(template.evaluate({age: 21}));