JavaScript Tagged Template Literals

Tagged template literals allow custom processing of template strings. Here's how to use them for powerful string transformations.

Basic Syntax#

// Tag function receives strings and values separately
function tag(strings, ...values) {
  console.log('Strings:', strings);
  console.log('Values:', values);
  return strings[0] + values[0] + strings[1];
}

const name = 'World';
const result = tag`Hello, ${name}!`;
// Strings: ['Hello, ', '!']
// Values: ['World']
// Result: 'Hello, World!'

Raw Strings#

function showRaw(strings) {
  console.log('Cooked:', strings[0]);
  console.log('Raw:', strings.raw[0]);
}

showRaw`Line1\nLine2`;
// Cooked: 'Line1
// Line2'
// Raw: 'Line1\\nLine2'

// Built-in String.raw
const path = String.raw`C:\Users\name\file.txt`;
console.log(path); // 'C:\\Users\\name\\file.txt'

HTML Escaping#

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 - 1];
    return result + escape(value) + str;
  });
}

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

SQL Query Builder#

function sql(strings, ...values) {
  const query = strings.reduce((result, str, i) => {
    return result + '$' + i + str;
  });

  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']
// }

CSS-in-JS#

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

  return style.trim();
}

const primaryColor = '#3b82f6';
const padding = 16;

const buttonStyle = css`
  background-color: ${primaryColor};
  padding: ${padding}px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
`;

Internationalization#

const translations = {
  en: {
    greeting: (name) => `Hello, ${name}!`,
    items: (count) => `You have ${count} item${count !== 1 ? 's' : ''}`,
  },
  es: {
    greeting: (name) => `¡Hola, ${name}!`,
    items: (count) => `Tienes ${count} elemento${count !== 1 ? 's' : ''}`,
  },
};

function createI18n(locale) {
  return function t(strings, ...values) {
    const key = strings.join('{}');
    const template = translations[locale]?.[key];

    if (template) {
      return template(...values);
    }

    // Fallback to original
    return strings.reduce((result, str, i) => {
      return result + str + (values[i] ?? '');
    }, '');
  };
}

const t = createI18n('es');
console.log(t`greeting${'Maria'}`); // '¡Hola, Maria!'

Logging with Context#

function log(strings, ...values) {
  const message = strings.reduce((result, str, i) => {
    const value = values[i];
    const formatted =
      typeof value === 'object' ? JSON.stringify(value, null, 2) : value;
    return result + str + (formatted ?? '');
  }, '');

  console.log(`[${new Date().toISOString()}]`, message);

  return message;
}

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

Highlight/Formatting#

// Terminal colors
const colors = {
  red: '\x1b[31m',
  green: '\x1b[32m',
  blue: '\x1b[34m',
  reset: '\x1b[0m',
};

function highlight(color) {
  return function (strings, ...values) {
    return strings.reduce((result, str, i) => {
      const value = values[i];
      const highlighted =
        value !== undefined
          ? `${colors[color]}${value}${colors.reset}`
          : '';
      return result + str + highlighted;
    }, '');
  };
}

const red = highlight('red');
const green = highlight('green');

console.log(red`Error: ${new Error('Something went wrong').message}`);
console.log(green`Success: ${'Operation completed'}`);

GraphQL Queries#

function gql(strings, ...values) {
  const query = strings.reduce((result, str, i) => {
    return result + str + (values[i] ?? '');
  }, '');

  // Parse and validate query (simplified)
  return {
    query: query.trim(),
    parse() {
      // Return AST
      return { kind: 'Document', definitions: [] };
    },
  };
}

const userFields = `
  id
  name
  email
`;

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      ${userFields}
      posts {
        title
      }
    }
  }
`;

Markdown Processing#

function md(strings, ...values) {
  let result = strings.reduce((acc, str, i) => {
    const value = values[i];
    const escaped =
      value !== undefined
        ? String(value).replace(/[*_`]/g, '\\$&')
        : '';
    return acc + str + escaped;
  }, '');

  // Convert to HTML (simplified)
  result = result
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.+?)\*/g, '<em>$1</em>')
    .replace(/`(.+?)`/g, '<code>$1</code>')
    .replace(/\n/g, '<br>');

  return result;
}

const code = 'console.log()';
const text = md`
  **Bold text** and *italic text*
  Code: ${code}
`;

Regex Builder#

function regex(flags = '') {
  return function (strings, ...values) {
    const pattern = strings.reduce((result, str, i) => {
      const value = values[i];
      // Escape special regex characters in interpolated values
      const escaped =
        value !== undefined
          ? String(value).replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
          : '';
      return result + str + escaped;
    }, '');

    return new RegExp(pattern, flags);
  };
}

const re = regex('gi');
const searchTerm = 'hello (world)';
const pattern = re`^${searchTerm}$`;
// /^hello \(world\)$/gi

Dedent/Trim#

function dedent(strings, ...values) {
  // Reconstruct full string
  let result = strings.reduce((acc, str, i) => {
    return acc + str + (values[i] ?? '');
  }, '');

  // Find minimum indentation
  const lines = result.split('\n');
  const minIndent = lines
    .filter((line) => line.trim())
    .reduce((min, line) => {
      const indent = line.match(/^\s*/)[0].length;
      return Math.min(min, indent);
    }, Infinity);

  // Remove indentation
  return lines
    .map((line) => line.slice(minIndent))
    .join('\n')
    .trim();
}

const code = dedent`
  function hello() {
    console.log('Hello');
  }
`;
// No leading indentation

Caching Tag#

function createCachedTag() {
  const cache = new Map();

  return function cached(strings, ...values) {
    const key = strings.join('\0');

    if (!cache.has(key)) {
      cache.set(key, {
        template: strings,
        results: new Map(),
      });
    }

    const entry = cache.get(key);
    const valuesKey = JSON.stringify(values);

    if (!entry.results.has(valuesKey)) {
      const result = strings.reduce((acc, str, i) => {
        return acc + str + (values[i] ?? '');
      }, '');
      entry.results.set(valuesKey, result);
    }

    return entry.results.get(valuesKey);
  };
}

const cached = createCachedTag();
// Repeated calls with same values return cached result

Type Coercion#

function typed(strings, ...values) {
  return strings.reduce((result, str, i) => {
    let value = values[i];

    // Type coercion based on context
    if (str.endsWith('$')) {
      value = typeof value === 'number' ? value.toFixed(2) : value;
    } else if (str.endsWith('%')) {
      value = typeof value === 'number' ? (value * 100).toFixed(1) : value;
    } else if (str.endsWith('#')) {
      value = typeof value === 'number' ? value.toLocaleString() : value;
    }

    return result + str.replace(/[$%#]$/, '') + (value ?? '');
  }, '');
}

const price = 19.99;
const rate = 0.156;
const count = 1234567;

console.log(typed`Price: $${price}, Rate: %${rate}, Count: #${count}`);
// 'Price: 19.99, Rate: 15.6, Count: 1,234,567'

Best Practices#

Use Cases:
✓ HTML/SQL escaping
✓ CSS-in-JS libraries
✓ Query builders
✓ i18n systems
✓ DSL creation

Patterns:
✓ Return transformed strings
✓ Return structured objects
✓ Chain multiple tags
✓ Cache expensive operations

Performance:
✓ strings array is cached by engine
✓ Use Map for result caching
✓ Avoid heavy computation in tags
✓ Consider lazy evaluation

Avoid:
✗ Side effects in tags
✗ Mutating the strings array
✗ Ignoring strings.raw when needed
✗ Over-complex transformations

Tagged template literals enable powerful string processing by separating static strings from dynamic values. Use them for safe HTML/SQL escaping, building DSLs, creating CSS-in-JS solutions, and implementing i18n systems. The tag function receives the template parts separately, allowing custom processing, validation, and transformation while maintaining clean syntax at the call site.