String Interpolation in Vanilla JavaScript
February 19, 2019
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.
