Strings & Template Literals `${}`

Variables: const, let & var (The Box Metaphor)

Learn how variables act as labeled containers for data using const, let, and var to manage lexical scope and reassignment safely in modern applications.

1. Working with Text

A string is a sequence of characters used to represent text. In JavaScript, strings can be enclosed in single quotes ('...), double quotes ("..."), or ES6 backticks (...).

2. Why It Matters

Building dynamic user greetings or UI components with traditional plus-sign concatenation ("Hello " + username + "! You have " + count + " items.") is clunky and prone to missing spaces. ES6 template literals make dynamic text interpolation clean and readable.

3. The Pattern: Backticks & Interpolation

Wrap your string in backticks (...) and embed any valid JavaScript expression directly inside ${expression}:

const user = "Alex";
const unreadMessages = 4;
const role = "Admin";

// Clean template literal formatting
const notification = `Welcome back, ${user} (${role})! You have ${unreadMessages} unread messages.`;

console.log(notification);
// Output: "Welcome back, Alex (Admin)! You have 4 unread messages."

Template literals also support multiline formatting natively without needing newline \n escape characters:

const htmlCard = `
  <div class="user-card">
    <h2>${user}</h2>
    <span class="badge">${role}</span>
  </div>
`;

4. How Expression Evaluation Works

Inside ${}, JavaScript evaluates any expression before inserting the string result:

const itemPrice = 29.99;
const taxRate = 0.08;

const summary = `Total price: $${(itemPrice * (1 + taxRate)).toFixed(2)}`;
console.log(summary); // "Total price: $32.39"

5. Common Mistakes

• Using Single Quotes Instead of Backticks: Template interpolation ${user} only evaluates inside backticks (...). Inside single or double quotes, "${user}" will print literally as text.
• Unescaped Backticks: If your text content contains a literal backtick character, escape it with a backslash: \ `.

6. Next Steps

Use template literals for all dynamic text creation. Next, let's explore numbers, arithmetic, and modulo operations in JavaScript!