Template Literals

Template Literals

What it is

Template literals (template strings) allow embedded expressions and multi-line strings using backticks. Introduced in ES6 (2015), they provide a cleaner way to create strings with dynamic content.

Before this feature

String concatenation was verbose and error-prone:

// Concatenation
const name = "Alice";
const age = 25;
const message = "Hello, " + name + "! You are " + age + " years old.";

// Multi-line strings required escaping
const html = "<div>\n" +
  "  <h1>Title</h1>\n" +
  "  <p>Content</p>\n" +
  "</div>";

// Complex expressions
const price = 19.99;
const quantity = 3;
const total = "Total: $" + (price * quantity).toFixed(2);

After this feature

Template literals provide clean, readable syntax:

// String interpolation
const name = "Alice";
const age = 25;
const message = `Hello, ${name}! You are ${age} years old.`;

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

// Expressions
const price = 19.99;
const quantity = 3;
const total = `Total: $${(price * quantity).toFixed(2)}`;

// Nested templates
const user = { name: "Bob", premium: true };
const badge = `${user.name} ${user.premium ? `⭐` : ``}`;

// Function calls
const formatted = `Date: ${new Date().toLocaleDateString()}`;

// Tagged templates (advanced)
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return `${result}${str}<mark>${values[i] || ''}</mark>`;
  }, '');
}
const term = "JavaScript";
const text = highlight`Learn ${term} today!`;
// "Learn <mark>JavaScript</mark> today!"

Why this is better

• Readable: No more + concatenation
• Multi-line: Natural multi-line strings without \n
• Expressions: Any JavaScript expression inside ${}
• Maintainable: Less error-prone than string concatenation
• Powerful: Tagged templates enable custom string processing

Key notes / edge cases

• Use backticks (`), not quotes
• Whitespace is preserved (including leading/trailing)
• Can nest template literals
• Expressions are coerced to strings
• Tagged templates receive strings and values separately
• Escape backtick with ```

// Whitespace preserved
const text = `
  Line 1
  Line 2
`;
// Includes leading newline and spaces

// Trim if needed
const trimmed = `
  Line 1
  Line 2
`.trim();

// Expressions coerced to string
const count = 5;
const msg = `Count: ${count}`; // "Count: 5"
const obj = { x: 1 };
const msg2 = `Object: ${obj}`; // "Object: [object Object]"

// Escape backtick
const code = `Use \`backticks\` for templates`;

// Conditional content
const user = { name: "Alice", isAdmin: true };
const greeting = `
  Welcome, ${user.name}!
  ${user.isAdmin ? 'You have admin access.' : ''}
`;

Quick practice

1. Create a string “Product: Laptop, Price: $999” using template literal

   Answer

   const product = "Laptop";
   const price = 999;
   const message = `Product: ${product}, Price: $${price}`;

2. Convert: "Hello, " + name + "! Welcome to " + site + "."

   Answer

   `Hello, ${name}! Welcome to ${site}.`

3. Create a multi-line HTML string for a card component

   Answer

   const title = "Article Title";
   const content = "Article content...";
   const card = `
     <div class="card">
       <h2>${title}</h2>
       <p>${content}</p>
     </div>
   `;