Day 13 of 100: Template Literals — Readable Dynamic Strings

Day 13 of 100 — 100 Days of Playwright with TypeScript Challenge. Phase: JavaScript Fundamentals. JavaScript (Days 1-33) → TypeScript (Days 34-63) → Playwright (Days 64-96) → AI Framework Capstone (Days 97-100).

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

String concatenation with + breaks down fast. Template literals fix it.

Backtick Syntax

const name = 'Jane';
const items = 3;

// Old way — error-prone
const msg1 = 'User ' + name + ' has ' + items + ' items';

// Template literal — readable
const msg2 = `User ${name} has ${items} items`;

// Expressions inside
const total = `Total: ${items * 9.99} USD`;

// Multiline — no \n needed
const report = `Test Report
User: ${name}
Items: ${items}`;

In Test Code

const orderId = 1234;

// Dynamic URLs
const endpoint = `/api/orders/${orderId}`;

// Dynamic test names
for (const browser of ['chromium', 'firefox']) {
  console.log(`should login on ${browser}`);
  // Playwright: test(`login works on ${browser}`, ...)
}

// Dynamic selectors (sparingly)
const rowSelector = `[data-row-id="${orderId}"]`;

Tomorrow (Day 14): Spread and rest — copying and gathering.