title: Template Literals and String Patterns slug: template-literals order: 2 language: javascript lesson_type: coding validationRules: [] hints:

• "Use backticks ` and ${} for template literals."
• "Multi-line template literals preserve newlines automatically."
• "Tagged templates let you process a template: tag\text ${val}``."

Template Literals and String Patterns

Template literals (backtick strings) make string construction expressive and readable.

Embedding expressions

const name = "Alice";
const score = 92;
const message = `${name} scored ${score} points (${score >= 90 ? "A" : "B"})`;
// "Alice scored 92 points (A)"

Multi-line strings

const html = `
<div class="card">
  <h2>${name}</h2>
  <p>Score: ${score}</p>
</div>
`.trim();

Common string building patterns

Slug from title

function toSlug(title) {
    return title
        .toLowerCase()
        .trim()
        .replace(/\s+/g, "-")
        .replace(/[^a-z0-9-]/g, "");
}
toSlug("Hello, World!"); // "hello-world"

Capitalize first letter

function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}