Template Literals in JavaScript

Contents

1. The problem with traditional string concatenation

2. Template literal syntax

3. Embedding variables & expressions

4. Multi-line strings

5. Use cases in modern JavaScript

01 — The Problem

String concatenation is a mess

Before ES6, the only way to build dynamic strings in JavaScript was with the + operator — stitching variables and string fragments together one piece at a time. It worked, but it was tedious, error-prone, and notoriously hard to read.

Look at how many things can go wrong:

const name = "Alice";
const age  = 28;
const city = "Bengaluru";

// Missing spaces, easy to forget quotes, hard to scan
const msg = "Hello, " + name + "! You are " + age +
           " years old and live in " + city + ".";

// Multi-line HTML? Absolutely horrible
const html = "<div class=\"card\">\n" +
             "  <h2>" + name + "</h2>\n" +
             "  <p>"  + city + "</p>\n" +
             "</div>";

The problems compound quickly: mismatched quotes, forgotten spaces around +, escaped characters inside strings, and multi-line content becoming a wall of concatenation. The logic of what the string says gets buried under the syntax of how it's built.

02 — Syntax

The backtick: one character, big difference

A template literal uses backticks (`) instead of single or double quotes. That's it — everything else flows naturally from there.

// Tip

Template literals aren't just a shorthand for concatenation — they evaluate any valid JavaScript expression inside ${}, including function calls, ternary operators, and arithmetic.

03 — Interpolation

Embedding variables & expressions

The ${} syntax evaluates any JavaScript expression and injects its string representation into the output. Variables, math, function calls, ternary operators — all fair game.

Expressions, not just variables

The power of template literals is that ${} accepts any expression — not just variable names:

04 — Multi-line

Multi-line strings, finally readable

One of the most immediate quality-of-life improvements template literals provide is effortless multi-line strings. With traditional strings, every newline required an explicit \n escape — and things got messy fast.

The template literal version reads exactly like the output will look. You can write HTML, SQL, markdown, or email bodies directly — indented to match the string's intent, not the file's code structure.

// Note

Whitespace inside a template literal is preserved exactly. If you indent lines inside the template for code readability, that indentation will appear in the output string. Use String.prototype.trim() or a dedent utility if that's a concern.

05 — Use Cases

Where template literals shine in modern JS

Template literals aren't just a syntactic convenience — they unlock cleaner patterns across the whole codebase. Here are the places you'll reach for them every day:

---

Bonus: Tagged template literals

Template literals have an advanced form called tagged templates, where you can prepend a function name to the backtick. The function receives the raw string parts and interpolated values separately — enabling powerful use cases like automatic HTML escaping, i18n, or styled-components.

---

Summary

The takeaway

Template literals are one of the most impactful improvements ES6 brought to JavaScript. They solve three real problems at once: the verbosity of concatenation, the pain of multi-line strings, and the need to embed expressions cleanly.

Once you start using them, traditional string concatenation will feel like writing in a language with one hand tied behind your back. The syntax is minimal, the intent is clear, and the code reads like it means to say what it says.

Start with simple variable interpolation and multi-line templates. As your comfort grows, explore tagged templates — they're where the real power lies.