You've been there. You're building something, and you need to put a name inside a sentence. So you write this:
const name = "Priya";
const age = 28;
const message = "Hello, my name is " + name + " and I am " + age + " years old.";
It works. You move on. Then the string gets longer. You add another variable. Then a condition. Then a line break. And suddenly you're staring at something that looks like this:
const html = "<div class='card'>" +
"<h2>" + user.name + "</h2>" +
"<p>Age: " + user.age + "</p>" +
"<p>Role: " + user.role + "</p>" +
"</div>";
Count the quotes. Count the plus signs. Miss one closing quote and the whole thing breaks —and the error message won't even tell you where.
This is the problem template literals solve. Not just cosmetically. They fundamentally change how you think about building strings in JavaScript.
What template literals actually are
A template literal is a string wrapped in backticks instead of single or double quotes.
const simple = `Hello, world`;
That's it at the surface level. But backticks unlock three things that regular quotes simply can't do: embedding expressions directly into strings, writing multi-line strings without any tricks, and running logic inside a string all without a single + operator.
Backticks and ${}
The full syntax has two parts. The backtick wraps the whole string. The \({} is the slot where you embed anything a variable, a calculation, a function call, a ternary. Whatever JavaScript expression you put inside \){} gets evaluated and inserted into the string at that position.
const name = "Ankit";
const age = 22;
const message = `Hello, my name is \({name} and I am \){age} years old.`;
console.log(message);
// Hello, my name is Ankit and I am 22 years old.
No plus signs. No closing and reopening quotes. The string reads like a sentence because it is a sentence, with slots in it.
Old way vs new way: a direct comparison
Let's put them side by side so the difference is impossible to miss.
Old way:
const user = { name: "Rohan", city: "Mumbai" };
const greeting = "Welcome back, " + user.name + "! We see you're logging in from " + user.city + ".";
Template literal:
const greeting = `Welcome back, \({user.name}! We see you're logging in from \){user.city}.`;
Same output. But the second version reads like English. You don't have to mentally parse where the string ends and the variable begins they're woven together.
Embedding expressions, not just variables
Math directly in the string:
const price = 120;
const qty = 3;
const tax = 0.18;
const bill = `Subtotal: ₹\({price * qty}. With tax: ₹\){(price * qty * (1 + tax)).toFixed(2)}`;
console.log(bill);
// Subtotal: ₹360. With tax: ₹424.80
A ternary for conditional text:
const user = { name: "Sneha", isPremium: true };
const badge = `\({user.name} — \){user.isPremium ? "Premium member" : "Free tier"}`;
console.log(badge);
// Sneha — Premium member
A function call:
const formatDate = (d) => d.toLocaleDateString("en-IN");
const message = `Report generated on ${formatDate(new Date())}`;
console.log(message);
// Report generated on 25/03/2026
The string becomes a living thing. Instead of building the value outside and plugging it in as a variable, you can do the work right inside the string. For simple cases this is enormously readable.
Multi-line strings: no more \n
Before template literals, writing a multi-line string looked like one of two painful options:
// Option 1 — \n escape sequences
const poem = "Roses are red,\nViolets are blue,\nJavaScript is fun,\nAnd so are you.";
// Option 2 — concatenation across lines
const poem = "Roses are red,\n" +
"Violets are blue,\n" +
"JavaScript is fun,\n" +
"And so are you.";
Both work. Neither looks like a poem. With template literals, you just press Enter:
const poem = `Roses are red,
Violets are blue,
JavaScript is fun,
And so are you.`;
console.log(poem);
// Roses are red,
// Violets are blue,
// JavaScript is fun,
// And so are you.
The line breaks in your source code become line breaks in the string. What you see is what you get.
