Search⌘ K
AI Features
Home
Courses
Rediscovering JavaScript: ES6, ES7 & ES8

Using Template Literals

Explore how template literals enhance string handling in JavaScript by allowing embedded expressions and multiline strings. Understand the syntax with backticks and ${}, see examples of function calls and nested literals, and learn how they improve code readability and maintenance.

We'll cover the following...

Motivation to bring template literals in ES6

There’s a new noise ordinance in JavaScript; it advises us to use elegant, concise, and pleasant code in place of noisy, verbose, repetitive boilerplate code.

String literals

Single quotes and double quotes are used interchangeably in JavaScript, and both can only contain string literals. To embed the value of a variable or a result of an expression into a string, we traditionally used + to concatenate. However, this can get verbose and noisy, as in the following example.

Javascript (babel-node)
'use strict';
//START:VERBOSE
const name1 = 'Jack';
const name2 = 'Jill';
console.log('Hello ' + name1 + ' and ' + name2);
//END:VERBOSE

Code with multiple +s often gets unwieldy, hard to maintain, and boring to write. This is where template literals come in.

Template literals

Template literals are strings with embedded expressions. The expressions may be a single variable, multiple variables with operators, a function call, or a combination of these; any valid JavaScript expression.

In languages like Ruby and Groovy, single quotes are used for string literals and double quotes for template literals. Since JavaScript has ...

svg viewer