What are template literals and how are they used?

TL;DR

Template literals are a feature in JavaScript that allow for easier string interpolation and multi-line strings. They are enclosed by backticks (`) instead of single or double quotes. You can embed expressions within template literals using ${expression} syntax.

Example:

const myName = 'John';
const greeting = `Hello, ${myName}!`;
console.log(greeting); // Output: Hello, John!

Introduction to template literals

Template literals are a feature introduced in ES6 (ECMAScript 2015) that provide an easier and more readable way to work with strings in JavaScript. They allow for string interpolation, multi-line strings, and embedded expressions.

Syntax

Template literals are enclosed by backticks (`) instead of single or double quotes. This allows for more flexible string formatting.

String interpolation

Template literals support string interpolation. You can embed expressions within a string using ${expression} syntax.

Example:

const myName = 'John';
const age = 30;
const greeting = `Hello, my name is ${myName} and I am ${age} years old.`;
console.log(greeting); // Output: Hello, my name is John and I am 30 years old.

Multi-line strings

Template literals make it easy to create multi-line strings without the need for escape characters.

Example:

const multiLineString = `This is a string
that spans multiple
lines.`;
console.log(multiLineString);
// Output:
// This is a string
// that spans multiple
// lines.

Tagged templates

Tagged templates allow you to parse template literals with a function. The function can then manipulate the template literal's content before it is output.

Example:

function tag(strings, ...values) {
  console.log(strings); // Array of string literals: ["Hello, ", "!"]
  console.log(values); // Array of values: ["John"]
  return 'Custom tagged template result';
}

const myName = 'John';
const result = tag`Hello, ${myName}!`;
console.log(result); // Output: Custom tagged template result

Nesting template literals

You can nest template literals within each other for more complex string constructions.

Example:

const myName = 'John';
const age = 30;
const nestedTemplate = `Name: ${myName}, Age: ${age}, Info: ${`Name: ${myName}, Age: ${age}`}`;
console.log(nestedTemplate);
// Output: Name: John, Age: 30, Info: Name: John, Age: 30

Further reading

• MDN Web Docs: Template literals

Exercises

const name = 'Ada';
const count = 2;
const message = `${name} has ${count + 1}
items`;
console.log(message);