17.2 Template Literals

Overview

Template literals (template strings) are string literals that allow embedded expressions, multi-line strings, and string interpolation. They use backticks (`) instead of quotes.

Basic Syntax

┌─────────────────────────────────────────────────────────────────────────┐
│                      Template Literals                                  │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  // Traditional strings                                                 │
│  const str1 = 'Hello, ' + name + '!';                                   │
│  const str2 = "Hello, " + name + "!";                                   │
│                                                                         │
│  // Template literal                                                    │
│  const str3 = `Hello, ${name}!`;                                        │
│                                                                         │
│  // Multi-line (traditional - escaped)                                  │
│  const multi1 = 'Line 1\n' +                                            │
│                 'Line 2\n' +                                            │
│                 'Line 3';                                               │
│                                                                         │
│  // Multi-line (template literal)                                       │
│  const multi2 = `Line 1                                                 │
│  Line 2                                                                 │
│  Line 3`;                                                               │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

String Interpolation

const name = 'Alice';
const age = 30;

// Expression interpolation
console.log(`Name: ${name}, Age: ${age}`);

// Any expression works
console.log(`Next year: ${age + 1}`);
console.log(`Uppercase: ${name.toUpperCase()}`);
console.log(`Even? ${age % 2 === 0 ? 'Yes' : 'No'}`);

// Function calls
console.log(`Random: ${Math.random().toFixed(2)}`);

Multi-line Strings

// HTML templates
const html = `
<div class="card">
    <h2>${title}</h2>
    <p>${content}</p>
</div>
`;

// Preserves whitespace and newlines
const poem = `
    Roses are red,
    Violets are blue,
    Template literals,
    Are awesome too!
`;

Nesting Template Literals

const items = ['apple', 'banana', 'cherry'];

const list = `
<ul>
    ${items.map((item) => `<li>${item}</li>`).join('\n    ')}
</ul>
`;

Tagged Templates

┌─────────────────────────────────────────────────────────────────────────┐
│                      Tagged Templates                                   │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  function tag(strings, ...values) {                                     │
│      // strings: array of string literals                               │
│      // values: array of interpolated values                            │
│      console.log(strings);  // ['Hello, ', '! You are ', ' years old']  │
│      console.log(values);   // ['Alice', 30]                            │
│      return strings[0] + values[0] + strings[1] + values[1];            │
│  }                                                                      │
│                                                                         │
│  const result = tag`Hello, ${name}! You are ${age} years old`;          │
│                                                                         │
│  // Note: No parentheses needed after function name                     │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Common Tagged Template Uses

Raw Strings

// String.raw - ignores escape sequences
console.log(String.raw`Line1\nLine2`);
// Output: 'Line1\nLine2' (literal backslash-n)

// Useful for regex, file paths
const regex = String.raw`\d+\.\d+`;
const path = String.raw`C:\Users\name\Documents`;

Comparison with Traditional Strings

Summary

• •Use backticks for template literals
• •${expression} for interpolation
• •Natural multi-line support
• •Tagged templates for custom processing
• •String.raw for raw strings