Search⌘ K
Home
Courses
The Complete Guide to Modern JavaScript

Template Literals

Explore the ES6 template literals feature to simplify string interpolation and multi-line strings. Learn to use backticks, embed expressions with ${}, nest templates, apply ternary operators, and pass functions within template literals for cleaner, more readable JavaScript code.

We'll cover the following...

Template literals were called template strings prior to ES6… Let’s have a look at what’s changed in the way we interpolate strings in ES6.

 

Interpolating strings #

We used to write the following in ES5 in order to interpolate strings:

Javascript (babel-node)
var name = "Alberto";
var greeting = 'Hello my name is ' + name;
console.log(greeting);
// Hello my name is Alberto

In ES6, we can use backticks to make our lives easier. We also need to wrap our variable names in ${}

Javascript (babel-node)
let name  = "Alberto";
const greeting = `Hello my name is ${name}`;
console.log(greeting);
// Hello my name is Alberto

 

Expression interpolations #

In ES5 we used to write the following:

Javascript (babel-node)
var a = 1;
var b = 10;
console.log('1 * 10 is ' + ( a * b));
// 1 * 10 is 10

In ES6 we can use backticks to reduce our typing:

Javascript (babel-node)
var a = 1;
var b = 10;
console.log(`1 * 10 is ${a * b}`);
// 1 * 10 is 10
...