Template Literals & String Interpolation

Difficulty: Beginner

Question

What are template literals in JavaScript? What features do they provide over regular strings?

Answer

Template literals are string literals enclosed in backticks (`) that provide:

1. String interpolation - embed expressions with ${expression} 2. Multiline strings - no need for \n or string concatenation 3. Tagged templates - process template literals with a function 4. Raw strings - access raw string content without escape processing

Code examples

Interpolation & Multiline

const name = "Alice";
const age = 25;

// String interpolation
console.log(`Hello, ${name}! You are ${age} years old.`);

// Expression interpolation
console.log(`Next year: ${age + 1}`);
console.log(`Is adult: ${age >= 18 ? "Yes" : "No"}`);

// Multiline strings
const html = `
  <div>
    <h1>${name}</h1>
    <p>Age: ${age}</p>
  </div>
`;
console.log(html);

Template literals allow embedding any JS expression inside ${} and naturally support multiline content.

Practical Usage

// Building URLs
const userId = 42;
const url = `/api/users/${userId}/posts`;
console.log(url);

// Conditional messages
const items = 3;
const msg = `You have ${items} item${items !== 1 ? "s" : ""} in cart`;
console.log(msg);

// Nesting templates
const isLoggedIn = true;
const greeting = `${isLoggedIn ? `Welcome back, ${name}!` : "Please log in"}`;
console.log(greeting);

Template literals make string building much cleaner than concatenation.

Key points

• Template literals use backticks (`), not single or double quotes
• Any valid JavaScript expression can be inside ${}
• Template literals can be nested inside each other
• They maintain whitespace and newlines exactly as written

Concepts covered

Template Literals, String Interpolation, Multiline Strings, ES6