Template literals and string interpolation in vanilla JS

Introduced in ES6, template literals provide a simpler way to create strings that span multiple lines or contain data.

Today, we’re going to look at how they work.

The basic syntax

Instead of quotes, template literals start and end with backticks (`). You do not need to concatenate new lines in template literals the way you would with quotes.

let str1 =
	`<h1>Hello, world!</h1>
	<p>How are you today?</p>`;

// logs "<h1>Hello, world!</h1>	<p>How are you today?</p>"
console.log(str1);

The use of the word literal is accurate.

Any spaces or tabs inside the literal are included. In this case, the tab before the p element is included in the string as well.

String interpolation and variables in strings

In programming, string interpolation is the process or replacing variables or placeholders in a string with some other value.

While many coding languages have this feature baked until, for years JavaScript did not.

Early on, people used tools like handlebars.js or mustache.js, or even chained String.replace() methods. Newer libraries like Vue and React and Svelte also provide this functionality.

But with modern JS, you can do this natively!

You can use variables in template literals (sometimes called expressions) by wrapping the name of the variable in curly brackets with a leading dollar sign (${VARIABLE_NAME}).

let greeting = 'Hi, universe!';
let message = 'How is the weather today?';

let str2 =
	`<h1>${greeting}</h1>
	<p>${message}</p>`;

// logs "<h1>Hi, universe!</h1><p>How is the weather today?</p>"
console.log(str2);

Conditionals and functions

You can also use conditionals and functions in template literals.

You can’t use if statements as-is, but you can use ternary operators or wrap your if statement in an immediately invoked function expression (IIFE) that returns a string.

let wizards = ['Hermione', 'Neville', 'Gandalf', 'Radagast'];
let showHeading = true;

let str3 =
	`${showHeading ? '<h1>Awesome Wizards</h1>' : ''}
	${(function () {
		if (wizards.length > 3) {
			return '<p>There are at least three wizards.</p>';
		}
		return '<p>There are fewer than three wizards.</p>';
	})()}
	<ul>
		${wizards.map(function (wizard) {
			return `<li>${wizard}</li>`;
		}).join('')}
	</ul>`;

console.log(str3);

Browser support

Template literals work in all modern browsers on desktop and mobile.

They don’t work in IE, which I think is OK in 2021. But unlike many of the approaches I write about here, they can’t be polyfilled if you do need to support outdated browsers.