Imagine you’re typing a WhatsApp message. You don’t just want to send plain text—you might want to drop in an emoji 😊, the current time, or even your friend’s name automatically. That’s exactly what Template Literals do for strings in JavaScript—they make them smarter, prettier, and a lot easier to work with.

So… what are Template Literals?

Normally, you wrap strings in single quotes ('Hello') or double quotes ("Hello"). Template Literals use backticks instead:

`Hello World`

Those little slanted ticks (`) aren’t just for decoration—they unlock a whole set of new powers.

Power #1 — Multiline Strings (Goodbye \n)

With regular strings, if you want text on multiple lines, you have to use the \n character:

"Hello\nWorld"

But Template Literals let you press Enter right inside the quotes:

const message = `Game Over!
John's score was 740.`;

console.log(message);

No weird symbols—just clean, readable text, exactly how it will appear.

Power #2 — String Interpolation (Magic Insertion)

Say you have a player’s name stored in a variable:

const name = "John";
const score = 74;

With old-school strings, you’d write:

"Hello " + name + "! Your score: " + score

With Template Literals, you can embed variables or even calculations inside ${ }:

console.log(`Game Over!
${name}'s score was ${score * 10}.`);

JavaScript replaces ${name} with the value of name, and ${score * 10} with the calculated result—right inside the string.

Power #3 — Tagged Templates (The Expert’s Tool)

Here’s where it gets fancy. You can put a function name right before the backtick. This “tag function” gets the string’s static parts and the inserted values separately.

For example:

function customTag(strings, ...values) {
  console.log(strings); // Static parts
  console.log(values);  // Inserted values
}

customTag`Hello ${name}, score: ${score}`;

Why is this useful? Because you can filter, format, or even transform the output into something completely different—like secure HTML, formatted currency, or database queries.

Power #4 — Raw Strings

Normally, \n means “new line.” But what if you want JavaScript to treat it literally as \n?

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

String.raw keeps every backslash and special character exactly as typed—perfect for regex patterns or file paths.

Power #5 — Building HTML with Ease

Because Template Literals can handle multiline text and variable embedding, they’re perfect for generating HTML:

const username = "Alex";
const html = `
  <div>
    <h1>Welcome, ${username}!</h1>
  </div>
`;

Combine them with a tag function that escapes unsafe characters, and you’ve got safe, dynamic HTML generation without messy concatenation.

Fill-in-the-Blank Practice

  1. Template Literals are written using ________ instead of single or double quotes.
  2. You can insert variables into a Template Literal using the syntax ${________}.
  3. The ability to insert variables or expressions directly into strings is called ________.
  4. In Template Literals, pressing ________ inside the string automatically creates a new line without \n.
  5. A ________ function can be placed before a Template Literal to process its content before it becomes a final string.
  6. The String.________ method returns the raw text of a Template Literal, ignoring escape sequences like \n.
  7. ${score * 10} inside a Template Literal will first ________ the expression before placing it in the string.
  8. Template Literals make it easier to create ________ text blocks without messy string concatenation.
  9. In a tagged template, the first argument to the tag function is an array of the ________ parts of the string.
  10. Template Literals are especially useful for building ________ content dynamically in JavaScript.
<
Previous Post
🍲 JavaScript Data Manipulation: Cooking With JavaScript
>
Next Post
JavaScript Fetch: The Web’s Instant Messenger