JavaScript Template Literals & Tagged Templates

Template literals are a JavaScript string syntax that lets you embed expressions, write multiline text naturally, and build cleaner string-based templates. Tagged templates extend that idea by letting a function process the parts of a template literal before the final string is created.

Quick answer: Use backticks instead of quotes when you want interpolation with ${...}, multiline strings, or tagged processing. A tagged template is just a function call written with template-literal syntax.

Difficulty: Beginner

You'll understand this better if you know: basic JavaScript strings, variables, and how function calls return values.

1. What Are Template Literals & Tagged Templates?

Template literals are strings wrapped in backticks, not single or double quotes. They let you insert expressions directly into the string with ${...} and spread text across multiple lines without special escape sequences.

`hello` is a template literal.
${name} inserts a value or expression into the string.
Tagged templates use a function before the backtick to transform the string parts.
They are built into modern JavaScript and work in ES2015+ code.

Tagged templates are useful when you want to control formatting, escaping, localization, or custom parsing of the template content.

2. Why Template Literals Matter

Before template literals, developers often built strings with concatenation, which becomes hard to read as soon as values and punctuation mix together. Template literals make string building easier to write, easier to scan, and less error-prone.

They matter because they improve everyday tasks such as:

Building user-facing messages with variables.
Creating HTML snippets or text blocks in code.
Writing readable SQL-like, email, or markdown text in plain JavaScript.
Passing structured text into a tag function for escaping or formatting.

They are not a replacement for every string task, but they are the clearest choice whenever a string contains embedded values or spans multiple lines.

3. Basic Syntax or Core Idea

A template literal starts and ends with backticks. Expressions inside ${} are evaluated and inserted into the final string.

Simple interpolation

This example shows the smallest useful template literal.

const name = "Ava";
const message = `Hello, ${name}!`;

The variable name is evaluated inside the template and inserted into the string result.

Expressions inside placeholders

You can place any expression inside ${}, not just variables.

const price = 19.99;
const taxRate = 0.08;
const total = `Total: ${(price * (1 + taxRate)).toFixed(2)}`;

This works because the expression is computed first, then converted to text and inserted into the final string.

Multiline text

Backticks preserve line breaks, which makes them ideal for formatted output.

const poem = `Roses are red,
Violets are blue,
Template literals
Are easier too.`;

The string includes actual newline characters without using escape-heavy concatenation.

Escaping backticks and placeholders

If you need a literal backtick or a literal ${ sequence, you must escape them.

const text = `Use \`backticks\` and \${notAValue} literally.`;

Escaping tells JavaScript to treat those characters as text instead of syntax.

4. Step-by-Step Examples

Example 1: Building a greeting

Template literals are often the simplest way to combine labels and values.

const firstName = "Mina";
const city = "Seoul";

const greeting = `Hello ${firstName} from ${city}`;

The result is easier to read than stitching together several string fragments.

Example 2: Writing a formatted sentence

When a sentence has multiple values, the template stays close to natural language.

const item = "notebook";
const count = 3;
const sentence = `You bought ${count} ${item}s.`;

This is a common pattern for receipts, status messages, and logs.

Example 3: Creating a multiline HTML snippet

Template literals are convenient for short markup fragments used in JavaScript, especially when the content spans several lines.

const title = "News";
const html = `
<section class="card">
  <h2>${title}</h2>
  <p>Latest updates go here.</p>
</section>
`;

The multiline layout mirrors the final structure, which makes the snippet easier to edit.

Example 4: Using a tagged template

A tag function receives the literal parts and the inserted values separately, which lets it process the content before outputting a final string.

function highlightName(strings, ...values) {
  return strings.map((chunk, index) => chunk + (values[index] ?? "")).join("");
}

const user = "Jordan";
const output = highlightName`Welcome, ${user}!`;

This example shows the shape of a tag function: the literal text arrives in an array, and each expression arrives as a separate value.

5. Practical Use Cases

Template literals are a good fit for many everyday JavaScript tasks, especially when the output is text that depends on data.

Displaying dynamic UI text such as `Welcome back, ${userName}`.
Building log messages that include timestamps, identifiers, or status values.
Generating short HTML snippets in scripts or server-side rendering code.
Creating file paths, URLs, or route strings where several parts must be combined.
Writing tagged templates for escaping user input before inserting it into a string.
Formatting numbers, dates, or localized text with custom tag functions.

They are especially useful when the string is readable as a sentence or block of text.

6. Common Mistakes

Mistake 1: Using quotes instead of backticks

Interpolation only works inside template literals. If you use quotes, JavaScript treats ${name} as plain text.

Problem: The string does not interpolate because single or double quotes do not create a template literal.

const name = "Leah";
const message = "Hello, ${name}!";

Fix: Use backticks when you want interpolation.

const name = "Leah";
const message = `Hello, ${name}!`;

The corrected version works because backticks enable expression interpolation.

Mistake 2: Forgetting to escape a literal backtick

If you need an actual backtick character inside a template literal, it must be escaped. Otherwise, the string ends early and the parser fails.

Problem: An unescaped backtick closes the template literal too soon, which causes a syntax error during parsing.

const text = `Use `backticks` carefully.`;

Fix: Escape the backtick with a backslash.

const text = `Use \`backticks\` carefully.`;

The corrected version works because the escaped character is treated as text, not syntax.

Mistake 3: Assuming a tag function receives one string

A tagged template does not pass a single string argument. It passes the literal parts separately from the inserted values, so code written for one combined string will behave incorrectly.

Problem: The function expects a normal string, but a tagged template provides an array of strings plus separate value arguments.

function logText(text) {
  return text.toUpperCase();
}

const name = "Kai";
const result = logText`Hi ${name}`;

Fix: Write the tag function to handle the strings array and values array separately.

function logText(strings, ...values) {
  return strings[0] + (values[0] ?? "");
}

const name = "Kai";
const result = logText`Hi ${name}`;

The fixed version works because the function matches the real shape of a tagged template call.

7. Best Practices

Practice 1: Use template literals for readable interpolation

When a string includes multiple values, template literals are clearer than concatenation because the final sentence reads naturally.

const user = "Sam";
const points = 42;

const summary = `${user} has ${points} points`;

This is easier to maintain than nested + operators and repeated quotes.

Practice 2: Keep complex logic out of the template when possible

Small expressions are fine, but large conditional logic inside ${} can make the string difficult to read.

const isAdmin = true;
const roleLabel = isAdmin ? "administrator" : "member";

const message = `Role: ${roleLabel}`;

Precomputing values keeps the template focused on presentation.

Practice 3: Use tagged templates for escaping or formatting rules

Tagged templates are most valuable when you need custom handling, such as escaping HTML or transforming output.

function escapeHtml(strings, ...values) {
  return strings.reduce((result, string, index) => {
    const value = values[index];
    const safeValue = String(value)
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;");

    return result + string + (safeValue ?? "");
  }, "");
}

Custom tags are a good fit when a plain string is not enough and you need controlled output.

8. Limitations and Edge Cases

Template literals still produce strings, so numbers and objects are converted using normal string conversion rules.
Embedding a complex object often gives [object Object] unless you format it yourself.
Template literals preserve line breaks exactly, which can matter in indentation-sensitive text.
Tagged templates receive cooked strings by default, which means escape sequences may be processed before your tag sees them.
If you need raw backslashes and escape text, String.raw can be useful.
Very large templates can become harder to maintain than composing smaller pieces.

A common surprise is that ${someObject} does not automatically print a useful object summary. If you need readable output, convert the object with JSON.stringify() or format it manually.

9. Practical Mini Project

Here is a small notification builder that uses template literals to generate readable messages and a tagged template to escape unsafe text for HTML output.

function escapeHtml(strings, ...values) {
  return strings.reduce((result, string, index) => {
    const value = values[index];
    const safeValue = String(value)
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;");

    return result + string + (safeValue ?? "");
  }, "");
}

const userName = "Taylor";
const actionCount = 5;
const unsafeInput = "<strong>new</strong>";

const message = `Hello ${userName}, you have ${actionCount} new notifications.`;
const html = escapeHtml`<p>Message for ${userName}: ${unsafeInput}</p>`;

The first string uses normal interpolation for a readable message. The second uses a tag function to ensure potentially unsafe content is escaped before it is inserted into HTML.

10. Key Points

Template literals use backticks and support interpolation with ${...}.
They are ideal for multiline strings and readable string composition.
Tagged templates let a function control how the template is processed.
Use escaping when you need literal backticks or literal ${ text.
Template literals still follow normal JavaScript string conversion rules for inserted values.

11. Practice Exercise

Build a small string formatter that outputs a profile summary and also demonstrates a tagged template.

Create variables for a person’s name, role, and active status.
Use a template literal to create a two-line summary.
Write a tag function that wraps every inserted value in square brackets.
Use the tag function on a sentence with two placeholders.

Expected output: A multiline summary string and a tagged string where inserted values are bracketed.

Hint: The tag function receives an array of string chunks plus the interpolated values in order.

Solution:

function bracketValues(strings, ...values) {
  return strings.reduce((result, string, index) => {
    const value = values[index];
    return result + string + (value !== undefined ? `[${value}]` : "");
  }, "");
}

const name = "Riley";
const role = "Editor";
const active = true;

const summary = `
Name: ${name}
Role: ${role}
Active: ${active}
`;

const tagged = bracketValues`User ${name} is ${role}.`;

This solution shows both sides of the topic: template literals for straightforward formatting and tagged templates for custom string processing.

12. Final Summary

Template literals are the modern JavaScript way to write strings that include values, line breaks, and richer formatting. They make everyday string-building code easier to read and less fragile than concatenation.

Tagged templates take the same syntax and hand control to a function, which is useful when you need escaping, custom formatting, or specialized parsing. Once you understand that the tag receives literal chunks plus interpolated values, the pattern becomes straightforward.

If you want to go further, practice with small helpers such as HTML escaping, date formatting, or localization-aware output so you can see how tagged templates solve real string-processing problems.