Template Literals

Easy

Template literals (backticks) provide string interpolation and multi-line strings. Replaces messy concatenation with clean syntax.

Interactive Visualization

Destructuring

Old Way
const user = { name: "Alice", age: 25 };
const name = user.name;
const age = user.age;
Modern Way
Click transform to see

Key Points

  • Interpolation: Hello ${name}
  • Multi-line support
  • Expression evaluation
  • Tagged templates

Code Examples

Template Literal Basics

const name = "Alice";
const age = 25;
const msg = `Hello, ${name}! You are ${age}.`;

// Multi-line
const html = `
  <div>
    <h1>Title</h1>
  </div>
`;

Use backticks for interpolation and multi-line strings