String Interpolation in Vanilla JavaScript

Jordan Hanson
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.
Solutions Architecture

browse through our blog articles

Blog Archive