JavaScript Template Literals Guide

Template literals provide powerful string interpolation and multi-line strings with backtick syntax.

Basic Syntax#

// Template literal with backticks
const greeting = `Hello, World!`;

// String interpolation
const name = 'John';
const message = `Hello, ${name}!`;
console.log(message);  // 'Hello, John!'

// Expressions in interpolation
const a = 5;
const b = 10;
console.log(`Sum: ${a + b}`);           // 'Sum: 15'
console.log(`Product: ${a * b}`);       // 'Product: 50'
console.log(`Bigger: ${a > b ? a : b}`); // 'Bigger: 10'

// Function calls
const upper = (s) => s.toUpperCase();
console.log(`Hello, ${upper(name)}!`);  // 'Hello, JOHN!'

Multi-line Strings#

// Multi-line without concatenation
const multiLine = `
  This is a
  multi-line
  string
`;

// Preserves whitespace and newlines
const html = `
<div class="card">
  <h2>Title</h2>
  <p>Content</p>
</div>
`;

// Avoid leading whitespace with trim
const trimmed = `
  Line 1
  Line 2
`.trim();

// Or use dedent pattern
function dedent(str) {
  const lines = str.split('\n');
  const indent = lines[1]?.match(/^\s*/)?.[0].length || 0;
  return lines
    .map(line => line.slice(indent))
    .join('\n')
    .trim();
}

Nested Templates#

// Templates can be nested
const items = ['Apple', 'Banana', 'Orange'];

const list = `
<ul>
  ${items.map(item => `<li>${item}</li>`).join('\n  ')}
</ul>
`;

// Conditional content
const user = { name: 'John', admin: true };

const profile = `
<div class="profile">
  <h2>${user.name}</h2>
  ${user.admin ? `<span class="badge">Admin</span>` : ''}
</div>
`;

// Complex nesting
const data = {
  title: 'Products',
  categories: [
    { name: 'Electronics', items: ['Phone', 'Laptop'] },
    { name: 'Clothing', items: ['Shirt', 'Pants'] }
  ]
};

const catalog = `
<h1>${data.title}</h1>
${data.categories.map(cat => `
  <section>
    <h2>${cat.name}</h2>
    <ul>
      ${cat.items.map(item => `<li>${item}</li>`).join('')}
    </ul>
  </section>
`).join('')}
`;

Tagged Templates#

// Tag function receives parts and values
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] !== undefined
      ? `<mark>${values[i]}</mark>`
      : '';
    return result + str + value;
  }, '');
}

const name = 'JavaScript';
const result = highlight`Learn ${name} today!`;
// 'Learn <mark>JavaScript</mark> today!'

// Tag function parameters
function tag(strings, ...values) {
  console.log(strings);  // Array of string parts
  console.log(values);   // Array of interpolated values
  console.log(strings.raw); // Raw strings (escape sequences not processed)
}

tag`Hello\nWorld ${1} and ${2}`;
// strings: ['Hello\nWorld ', ' and ', '']
// values: [1, 2]
// strings.raw: ['Hello\\nWorld ', ' and ', '']

HTML Escaping#

// Prevent XSS with tagged template
function html(strings, ...values) {
  const escape = (str) =>
    String(str)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');

  return strings.reduce((result, str, i) => {
    const value = values[i] !== undefined ? escape(values[i]) : '';
    return result + str + value;
  }, '');
}

const userInput = '<script>alert("xss")</script>';
const safe = html`<div>${userInput}</div>`;
// '<div>&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;</div>'

// With raw HTML support
function safeHtml(strings, ...values) {
  return strings.reduce((result, str, i) => {
    let value = values[i];
    if (value === undefined) return result + str;

    // Allow marked-safe values
    if (value && value.__safe) {
      value = value.value;
    } else {
      value = escape(String(value));
    }
    return result + str + value;
  }, '');
}

const safe = (value) => ({ __safe: true, value });

CSS-in-JS Pattern#

// Styled component pattern
function css(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] !== undefined ? values[i] : '';
    return result + str + value;
  }, '');
}

const color = 'blue';
const styles = css`
  .button {
    background-color: ${color};
    padding: 10px 20px;
    border-radius: 4px;
  }
`;

// With props
function styled(strings, ...fns) {
  return function(props) {
    return strings.reduce((result, str, i) => {
      const value = fns[i] ? fns[i](props) : '';
      return result + str + value;
    }, '');
  };
}

const buttonStyle = styled`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: ${props => props.primary ? 'white' : 'black'};
`;

console.log(buttonStyle({ primary: true }));

SQL Query Builder#

// Safe SQL queries
function sql(strings, ...values) {
  const query = strings.reduce((result, str, i) => {
    return result + str + (i < values.length ? `$${i + 1}` : '');
  }, '');

  return {
    text: query,
    values: values
  };
}

const userId = 123;
const status = 'active';

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

// { text: 'SELECT * FROM users WHERE id = $1 AND status = $2',
//   values: [123, 'active'] }

// Execute with parameterized query
// db.query(query.text, query.values);

Internationalization#

// i18n tagged template
const translations = {
  en: {
    'greeting': 'Hello, {0}!',
    'items': 'You have {0} items'
  },
  es: {
    'greeting': '¡Hola, {0}!',
    'items': 'Tienes {0} artículos'
  }
};

function createI18n(locale) {
  return function i18n(strings, ...values) {
    const key = strings.join('{?}').replace(/\{\?\}/g, (_, i) => `{${i}}`);
    let template = translations[locale][key] || key;

    values.forEach((value, i) => {
      template = template.replace(`{${i}}`, value);
    });

    return template;
  };
}

const t = createI18n('es');
console.log(t`greeting ${'Juan'}`);  // '¡Hola, Juan!'
console.log(t`items ${5}`);          // 'Tienes 5 artículos'

Debug Logging#

// Debug tagged template
function debug(strings, ...values) {
  const timestamp = new Date().toISOString();
  const message = strings.reduce((result, str, i) => {
    const value = values[i] !== undefined
      ? JSON.stringify(values[i])
      : '';
    return result + str + value;
  }, '');

  console.log(`[${timestamp}] ${message}`);
  return message;
}

const user = { id: 1, name: 'John' };
debug`User logged in: ${user}`;
// [2024-01-15T10:30:00.000Z] User logged in: {"id":1,"name":"John"}

// Conditional debug
const DEBUG = process.env.NODE_ENV !== 'production';

function log(strings, ...values) {
  if (!DEBUG) return;
  // ... logging logic
}

Regular Expressions#

// Build complex regex with comments
function regex(strings, ...values) {
  const pattern = strings.raw
    .reduce((result, str, i) => {
      const value = values[i] !== undefined ? values[i] : '';
      return result + str + value;
    }, '')
    .replace(/\s+#.*/gm, '')  // Remove comments
    .replace(/\s+/g, '');      // Remove whitespace

  return new RegExp(pattern);
}

const emailRegex = regex`
  ^                    # Start
  [a-zA-Z0-9._%+-]+    # Username
  @                    # @ symbol
  [a-zA-Z0-9.-]+       # Domain
  \.                   # Dot
  [a-zA-Z]{2,}         # TLD
  $                    # End
`;

console.log(emailRegex.test('test@example.com'));  // true

String.raw#

// String.raw preserves escape sequences
console.log(`Line1\nLine2`);
// Line1
// Line2

console.log(String.raw`Line1\nLine2`);
// Line1\nLine2

// Useful for regex and paths
const path = String.raw`C:\Users\John\Documents`;
console.log(path);  // C:\Users\John\Documents

// Custom raw tag
function latex(strings) {
  return strings.raw.join('');
}

const formula = latex`\frac{1}{2}`;
console.log(formula);  // \frac{1}{2}

Best Practices#

Basic Usage:
✓ Use for string interpolation
✓ Use for multi-line strings
✓ Use for HTML/SQL templates
✓ Trim when whitespace matters

Tagged Templates:
✓ Use for escaping (HTML, SQL)
✓ Use for DSLs (CSS-in-JS)
✓ Use for i18n
✓ Document tag function behavior

Performance:
✓ Tagged templates are cached
✓ Avoid complex logic in interpolations
✓ Use for clarity, not everywhere
✓ Consider template caching for repeated use

Avoid:
✗ Overusing for simple strings
✗ Deep nesting without reason
✗ Forgetting to escape user input
✗ Complex expressions in ${}

Template literals simplify string interpolation with ${} syntax and enable multi-line strings. Tagged templates unlock powerful patterns like HTML escaping, CSS-in-JS, SQL query builders, and i18n. Use String.raw when you need literal backslashes. Always escape user input in HTML contexts to prevent XSS vulnerabilities.