Template Literals

Template literals allow for embedded expressions and help to solve the complex concatenation problem.

They are enclosed by a back-tick character (the button just below the escape key on your keyboard) and are represented by a dollar sign ($) and curly braces ( {} ).

The template literals feature is an ES6 addition in Javascript, and they provide an elegant alternative to the traditional concatenations, especially when the values to be paired are complex

Example

let name = 'Lawson Luke';

//with traditional concatenation
console.log('My name is ' +name); //My name is Lawson Luke

//with template literals
console.log(`My name is ${name}`); //My name is Lawson

Now let’s make things a little complex, shall we?

let name = 'Lawson Luke';
let city = 'Abuja';
let country: 'Nigeria';

//with traditional concatenation
 console.log('My name is '+name + ' '+ 'I reside in '+ city + ', ' + country + '. Thank you.');

//with template literals
console.log(`My name is ${name}. I reside in ${country}, ${city}. Thank you.`);