What Are Template Literals and Tagged Template Functions in JavaScript?

Template literals are backtick-enclosed strings that embed expressions via ${…} syntax, while tagged template functions are special processors that receive a template's raw strings and evaluated values as separate arguments to control final output assembly.

Template literals and tagged template functions provide powerful alternatives to traditional string concatenation in JavaScript. According to the lydiahallie/javascript-questions repository, these features enable everything from simple variable interpolation to complex text transformation and security sanitization, as documented in the project's README.md.

What Are Template Literals?

Template literals use backticks (`...`) instead of quotes and allow you to embed expressions directly inside a string using the ${expression} syntax. When the JavaScript engine evaluates a template literal, it first evaluates every embedded expression, then concatenates the resulting values with the surrounding literal text. The repository explains this behavior at line 3707 of README.md, noting that this approach eliminates the need for manual concatenation operators.

const name = 'Lydia';
const age = 21;
const message = `${name} is ${age} years old`;
console.log(message); // "Lydia is 21 years old"

How Tagged Template Functions Work

A tagged template function is a special kind of function that receives a template literal's raw parts and the evaluated expressions as separate arguments. As clarified at line 578 of README.md, the first argument is always an array containing the literal strings, while each subsequent argument corresponds to the value of a ${…} expression. Because the tag runs before the final string is constructed, it gives you full control over how the output is assembled—enabling use cases like safe HTML escaping, internationalization, or building SQL queries.

Practical Examples of Tagged Template Functions

Text Transformation

The following upper function demonstrates transforming interpolated values by converting them to uppercase before reassembling the final string:

function upper(strings, ...values) {
  const upperValues = values.map(v => String(v).toUpperCase());
  return strings.reduce((result, s, i) => result + s + (upperValues[i] ?? ''), '');
}

const person = 'Lydia';
const years = 21;
console.log(upper`${person} is ${years} years old`);
// "LYDIA is 21 years old"

Security and HTML Escaping

Tagged templates excel at security-sensitive operations like preventing XSS attacks. Because the function receives values separately from literal text, it can escape dangerous characters before concatenation:

function escapeHTML(strings, ...values) {
  const escape = str => String(str)
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
  const escapedValues = values.map(escape);
  return strings.reduce((res, s, i) => res + s + (escapedValues[i] ?? ''), '');
}

const userInput = '<script>alert("xss")</script>';
console.log(escapeHTML`User said: ${userInput}`);
// "User said: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;"

Summary

• Template literals use backticks (`...`) and ${expression} syntax to embed values directly into strings, eliminating manual concatenation.
• Tagged template functions receive an array of literal strings as the first argument and each interpolated value as subsequent arguments, enabling custom processing before final assembly.
• Common applications include HTML escaping for XSS prevention, text transformation, internationalization, and SQL query construction.
• The lydiahallie/javascript-questions repository documents these behaviors in README.md at lines 3707 (expression evaluation) and 578 (tagged function arguments).

Frequently Asked Questions

What is the difference between a template literal and a tagged template literal?

A template literal automatically concatenates string parts with evaluated expressions to produce a final string. A tagged template literal prefixes the template with a function name (the tag), which receives the raw strings and values separately and returns the final result, allowing custom processing such as escaping or formatting before concatenation.

What arguments does a tagged template function receive?

The first argument is an array of literal strings from the template, and subsequent arguments are the evaluated values of each ${…} expression. For example, in tag`Hello ${name}`, the function receives ['Hello ', ''] as the first argument and the value of name as the second argument.

Can tagged template functions prevent XSS attacks?

Yes. Because tagged functions receive interpolated values separately from the literal text, they can escape or sanitize user input before including it in the output. The lydiahallie/javascript-questions repository highlights this pattern as a primary use case for preventing cross-site scripting vulnerabilities.

Where are template literals documented in the lydiahallie/javascript-questions repository?

The core explanation of expression evaluation in template literals appears at line 3707 of README.md, while the tagged template function behavior and argument ordering are documented at line 578 of the same file.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}