Contents
The problem with traditional string concatenation
Template literal syntax
Embedding variables & expressions
Multi-line strings
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.
