JS String Templates

JavaScript Template Literals: String Interpolation & Tagged Templates

Template literals (delimited by backticks `) enable multi-line strings, embedded expressions, and domain-specific string formatting via tagged template functions.

Template Literal Capabilities

flowchart TD
    Templates["Template Literals (`...`)"] --> Interp["Expression Interpolation: \${expression}"]
    Templates --> Multi["Native Multi-Line Strings"]
    Templates --> Tagged["Tagged Templates: tag`text \${val}`"]

Feature Comparison

Practical Code Example

// Demonstrating Template Literals and Tagged Templates

const user = {
  name: "Maksudur",
  role: "admin",
  ordersCount: 5
};

// 1. Multiline HTML Template String
const userCardHtml = `
  <div class="card">
    <h2>${user.name}</h2>
    <p>Role: <strong>${user.role.toUpperCase()}</strong></p>
    <p>Status: ${user.ordersCount > 0 ? "Active Customer" : "New User"}</p>
  </div>
`;
console.log("Generated HTML Markup:
" + userCardHtml);

// 2. Tagged Template Function for HTML Sanitization
function sanitizeHtml(strings, ...values) {
  return strings.reduce((result, str, i) => {
    let value = values[i - 1];
    if (typeof value === "string") {
      value = value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    }
    return result + value + str;
  });
}

const userInput = "<script>alert('xss')</script>";
const safeCard = sanitizeHtml`<p>Comment: ${userInput}</p>`;
console.log(`Sanitized Output: ${safeCard}`);

Best Practices & Gotchas

• Clean HTML Component Rendering: Template literals provide clean client-side HTML template rendering without external view engines.
• Escape Backticks and Dollar Signs: To include literal ` or ${ inside template strings, escape them with backslashes (\` or \${).
• Use Tagged Templates for SQL / CSS: Libraries like styled-components or pg-template use tagged templates for safe query parsing and CSS scoping.

Self-Check Challenge

Write a template literal expression that calculates the total cost of 3 items priced at $19.99 each and formats it inside a sentence.