Search for a command to run...
Say goodbye to messy plus signs and endless quotes. Learn how template literals make string manipulation in JavaScript elegant and highly readable.
No comments yet. Be the first to comment.
These are the assignments or knowledge dumps I decide to write for the "Chai aur Code's web Dev Cohort 2026"
Uncover the behind-the-scenes magic of JavaScript's new keyword and learn exactly how constructor functions build objects from scratch.
RAG helps LLMs answer questions using your own data, but it doesn't guarantee correct answers. Here's how the pipeline works and where it commonly breaks down.
Imagine asking an AI, "Write a blog," versus "Act as an SEO expert and write a 1,000-word blog on AI safety formatted in markdown." The difference in the resulting output is night and day. A prompt is
Spotify and Apple Music make it incredibly easy to showcase your live listening habits on your website. YouTube Music? Not so much. After doing some setup you can do an API call and fetch your account
Arthur C. Clarke's famous third law: "Any sufficiently advanced technology is indistinguishable from magic" perfectly captures how the pace of human innovation works. From carrying supercomputers in o
Why HTTP is amnesiac, the difference between transport and state, and how to choose the right auth strategy for your Node.js app.
If you have been writing JavaScript for even a few days, you have probably worked with strings. Whether you are displaying a user's name, generating a dynamic URL, or building HTML directly in your JavaScript file, strings are everywhere.
But traditionally, combining text with variables in JavaScript was incredibly frustrating. It involved a messy puzzle of quotes, plus signs, and trailing spaces.
Thankfully, ES6 (the massive 2015 JavaScript update) introduced a much better way to handle this: Template Literals.
If you want your code to look modern, professional, and easy to read, adopting template literals is one of the quickest wins you can get. Here is everything you need to know about them.
Before template literals existed, developers had to use the + operator to combine (concatenate) text and variables together.
Imagine you have two variables, name and age, and you want to create a simple greeting.
The Old Way:
const name = "Alice";
const age = 25;
const greeting = "Hello, my name is " + name + " and I am " + age + " years old.";
console.log(greeting);
// Output: Hello, my name is Alice and I am 25 years old.
Look at how chaotic that third line is. You have to constantly open and close quotes. You have to remember to leave empty spaces inside the quotes before and after the plus signs (like " and I am "), otherwise, the words will smush together.
If you make one tiny typo—miss a plus sign or misplace a quote—your entire program throws a syntax error.
Template literals solve this problem entirely by changing the character we use to define a string.
Instead of using single quotes ('...') or double quotes ("..."), template literals use backticks (`...`).
(You can usually find the backtick key on the top left of your keyboard, right below the Escape key, sharing a button with the tilde ~ symbol).
// A simple template literal
const simpleString = `This is a string created with backticks.`;
By themselves, backticks act just like normal quotes. But they unlock two powerful features: String Interpolation and Multi-line Strings.
"String Interpolation" is just a fancy technical term for embedding variables and math directly inside a string.
With template literals, you no longer need the + operator. Instead, you can inject variables right into the middle of your sentence using a dollar sign and curly braces: ${variable}.
Let's rewrite our previous greeting using this modern syntax.
The Modern Way:
const name = "Alice";
const age = 25;
const greeting = `Hello, my name is \({name} and I am \){age} years old.`;
console.log(greeting);
// Output: Hello, my name is Alice and I am 25 years old.
Notice how much cleaner that is? You just type the sentence exactly how you want it to look, and drop the variables in where they belong. The readability improvement is massive.
[ THE OLD WAY - CONCATENATION ]
"String " + variable1 + " text " + variable2 + " end."
↓↓↓ (Swap to backticks, use ${}) ↓↓↓
[ THE NEW WAY - TEMPLATE LITERALS ]
`String \({variable1} text \){variable2} end.`
Pro Tip: You can put any valid JavaScript expression inside the ${}. That means you can do math, or even call functions directly inside the string!
const price = 10;
const tax = 2;
// Doing math directly inside the template literal
console.log(`Your total cost is $${price + tax}.`);
// Output: Your total cost is $12.
The second major problem with traditional strings is that they completely break if you press "Enter" to start a new line.
If you wanted to write a multi-line paragraph the old way, you had to use a special escape character (\n) to force a line break, and keep adding strings together.
The Old Way:
const poem = "Roses are red,\n" +
"Violets are blue,\n" +
"String concatenation is hard,\n" +
"But template literals are cool.";
With template literals, the backticks respect your keyboard's "Enter" key. If you drop to a new line in your code, it drops to a new line in the string. No \n or + required!
The Modern Way:
const poem = `Roses are red,
Violets are blue,
Template literals are easy,
And highly readable too.`;
console.log(poem);
Template literals are not just for basic greetings. In modern Web Development, they are a fundamental tool used every single day. Here are two of the most common real-world use cases:
When fetching data from a backend server, you often need to insert an ID or a search query dynamically into the URL string.
const userId = 405;
const apiUrl = `https://api.example.com/users/${userId}/profile`;
console.log(apiUrl);
// Output: https://api.example.com/users/405/profile
If you are working with Vanilla JavaScript to build dynamic websites, template literals allow you to write clean HTML blocks right inside your JS files. Because they support multi-line text and variable embedding, it looks just like writing real HTML.
const product = {
name: "Wireless Headphones",
price: 99.99
};
// Creating a dynamic HTML card
const cardHTML = `
<div class="card">
<h2>${product.name}</h2>
<p>Price: $${product.price}</p>
<button>Add to Cart</button>
</div>
`;
document.body.innerHTML = cardHTML;
Template literals are one of the best quality-of-life improvements ever added to JavaScript. By switching from quotes to backticks (`):
You drop the boilerplate: No more endless + operators and confusing quote marks.
You gain interpolation: Easily embed data and math using ${expression}.
You unlock multi-line formatting: Hit "Enter" freely to format paragraphs or HTML blocks.
Make it a habit to use template literals moving forward. They will save you from frustrating syntax errors and make your codebase infinitely more readable!