Explain template literals and tagged template literals. Provide practical examples.

Explain template literals and tagged template literals. Provide practical examples.

Template literals are string literals that allow embedded expressions and multi-line strings.

Basic Template Literals:

const name = 'John';
const age = 30;

// String interpolation
const message = `Hello, my name is ${name} and I am ${age} years old.`;

// Multi-line strings
const html = `
  <div class="user-card">
    <h2>${name}</h2>
    <p>Age: ${age}</p>
  </div>
`;

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

Tagged Template Literals:

function myTag(strings, ...values) {
  return strings.reduce((result, string, i) => {
    return result + string + (values[i] || '');
  }, '');
}

const name = 'John';
const result = myTag`Hello ${name}, you are ${30} years old.`;

// Practical example: SQL query builder
function sql(strings, ...values) {
  return strings.reduce((query, string, i) => {
    const value = values[i];
    const escaped = typeof value === 'string' ? `'${value.replace(/'/g, "''")}'` : value;
    return query + string + (escaped || '');
  }, '');
}

const userId = 123;
const query = sql`SELECT * FROM users WHERE id = ${userId}`;