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.

Concatenation is an English word that means “to join.” In the context of JavaScript and other similar programming languages, it refers to joining two or more strings together.

Before ES6, we had to use the plus sign (+) to concatenate strings. Template literals, however, provide a more modular and elegant way to achieve the same result.

Let’s compare these two methods and see how template literals stand out.

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.`);

Summary

Template literals in JavaScript offer a cleaner and more readable way to join strings compared to the traditional method of using the + sign

They allow for the embedding of expressions and variables directly within strings and make string creation more readable and flexible.