Template Literals
Stop Adding Strings Together Like It's 2009
At some point you wrote something like this. You had a user's name, a score, and a message to display. So you built the string the way everyone learns first: with +.
var name = "Priya";
var score = 42;
var msg = "Hello, " + name + "! Your score is " + score + ".";
// Hello, Priya! Your score is 42.
// Six pieces. Four operators. Two sets of quotes you can barely track.
It works. Nobody's disputing that. But read it again. Your eyes have to jump between strings and variables and operators to figure out what the final output looks like. Now imagine doing that with a URL, a multi-line HTML snippet, or anything where the variable is buried in the middle of actual sentence structure. The longer the string, the worse it gets.
Template literals fix this. They've been in JavaScript since 2015. If you're not using them, you're doing more work than you need to.
The Syntax, Plainly
Two changes. You swap regular quotes for backticks. And anywhere you'd previously close the string, concatenate, and reopen it, you write ${ } instead.
const name = "Priya";
const score = 42;
const msg = `Hello, \({name}! Your score is \){score}.`;
// Hello, Priya! Your score is 42.
// Same output. You can actually read what it says.
The backtick key is in the top-left of most keyboards, above Tab. That's the only new character involved. Everything inside ${ } is treated as JavaScript, so the value gets evaluated and dropped into the string wherever you put it.
The Actual Difference
The clearest way to see the improvement is to put both approaches next to each other doing the same job. Not a toy example. Something you'd actually write.
// String Concatenation
const user = "Riya";
const item = "headphones";
const price = 1299;
const currency = "INR";
const receipt = "Hi " + user + ", you bought " + item +
" for " + currency + " " + price + "!";
// count the quotes. count the + signs. now imagine finding the bug.
// Template Literal
const user = "Riya";
const item = "headphones";
const price = 1299;
const currency = "INR";
const receipt = `Hi \({user}, you bought \){item} for \({currency} \){price}!`;
// read like a sentence. edit like a sentence. done.
Expressions, Not Just Variables
The ${ } slot takes any valid JavaScript expression. Not just variable names. A variable is just the simplest case. You can put math, function calls, ternaries, method calls, comparisons, if JavaScript can evaluate it to a value, it goes in there.
const a = 4; const b = 7;
// Math directly in the string
const sum = \({a} + \){b} = ${a + b}; // "4 + 7 = 11"
// Function call
const shout = Hello, ${"priya".toUpperCase()}!; // "Hello, PRIYA!"
// Ternary: conditional logic inside the string
const stock = 0; const label = Item is ${stock > 0 ? "available" : "out of stock"}.; // "Item is out of stock."
Multi-Line Strings
This is where the old way falls apart completely. Building a multi-line string with concatenation means either pasting everything on one long line or escaping newlines with \n. Neither approach matches what the output actually looks like.
// String
const html = "<div class='card'>\n" +
" <h2>" + name + "</h2>\n" +
" <p>" + bio + "</p>\n" +
"</div>";
// Template Literals
const name = "Riya";
const bio = "Frontend developer. Loves TypeScript.";
const html = `
<div class="card">
<h2>${name}</h2>
<p>${bio}</p>
</div>
`;
// the indentation in the code matches the indentation in the output.
// what you see is what you get.
The line breaks are real. The whitespace is real. You press Enter inside the backticks and it's in the string. No \n. No squinting at escape characters.
This matters most when building HTML fragments, SQL queries, email bodies, or any block of text that has real structure. You can format the string the way the output should look, and the two stay in sync.
Where You'll Actually Use This
Template literals show up in the same places strings show up. But there are a few spots where they make an especially big difference.
REFERENCES:
