Template Literals

String interpolation, multiline strings, and tagged templates

Knowledge0%

Learn & Drill

Fluency0%

Drill & Speed

Retention0%

Mastery & Review

Confidence0%

All modes

Practice

Free tier: read the explanation here. Upgrade to Pro for Drills, Speed challenges & Mastery badges.

Upgrade

Knowledge

Fluency

Retention

Knowledge Debt detected

You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.

let, const & var0%

Explanation

use backticks (\`) instead of quotes and support embedded expressions.

String interpolation:

javascript const name = 'Alice'; const age = 30; console.log(${name} is ${age} years old.); // Alice is 30 years old.

Any expression works inside ${}: ``javascript console.log(2 + 2 = ${2 + 2}); // 2 + 2 = 4 console.log(Upper: ${name.toUpperCase()}); // Upper: ALICE

Multiline strings — newlines are literal: ``javascript const html = <div> <p>Hello</p> </div> ;

With regular strings you'd need \n or string concatenation.

Tagged templates — advanced: a function processes the template: ``javascript function highlight(strings, ...values) { return strings.raw[0] + values.map(v => <b>${v}</b>).join(strings.raw[1]); } // Used by libraries like styled-components and sql template literals

Examples

Building a URL

Template literals shine for constructing strings with variables

const baseUrl = 'https://api.example.com';
const userId  = 42;
const endpoint = `${baseUrl}/users/${userId}/profile`;
console.log(endpoint);
// https://api.example.com/users/42/profile

Multiline SQL string

Backtick strings respect line breaks without \n or concatenation

const query = `
  SELECT *
  FROM users
  WHERE active = true
  ORDER BY created_at DESC
  LIMIT 10
`;

How well did you understand this?

Next in JavaScript Core

Promises

Continue

Unlocks

DOM Basics JSX