String Interpolation in Vanilla JavaScript

Working in Front-End (FE) frameworks really makes you appreciate string interpolation. If you are not working in a FE framework and still want this functionality, Template Literals formerly known as template strings in ES2015 are a great replacement. This handy tool lets you use string interpolation in vanilla javascript.

In ES6 this functionality is already built in so you can use something like the following:

let name = 'Fname Lname';
console.log(`Hello ${name}!`);
//returns Hello Fname Lname!

‍

Notice the “ surrounding the message. This is needed for the functionality.

In ES2015 you will need to create a function and call it.

Example:

var person = 'Fname Lname';

function greeting(person) {
    var name = person;
    return `Hello ${name}!`;
}

console.log( greeting(person) );
//returns Hello Fname Lname!

‍

For a more robust example see the reference below.

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

‍