Template Literals in Javascript

Before ES6, JavaScript developers used string concatenation with the + operator

const name = "Vishal";

const age = 30;

const message = "My name is " + name + " and I am " + age + " years old.";

console.log(message); // My name is Vishal and I am 30 years old.

But there are various difficulties or problems developers face while performing string concatenations:

Hard to read strings
String gets too long
Cluttered code
Difficulty in managing dynamic values

As the application grows, it becomes messier and increases the risk of errors.

After ES6, this has been resolved using Template Literals.

What Are Template Literals?

Template literals are the modern way to work with string concatenations in JavaScript. They use backticks (`` ) instead of quotes (''/"").

Example:

const name = "Vishal";

const age = 30;

const message = `My name is \({name} and I am \){age} years old.`;

console.log(message); // My name is Vishal and I am 30 years old.

Use of template literals instead of quotes allows:

multi-line strings
Example:

const message = `This is a 
                 string to show template literals
                 multiline.`;

console.log(message);
// This is a string to show template literals multiline.

Embedding variables or operations. Instead of using the + operator, you can inject a variable using ${}.
Example:

const number = 3;
const message = `Square of \({number} is \){ number ** 2 }.`;

console.log(message); // Square of 3 is 9.

Benefits of using Template Literals

Cleaner and more readable
No need for +
Easier to maintain

Before vs After (Comparison)

Before (Old way)	After (New Way)
Concatenation

❌ Old Way (Concatenation) const product = "Laptop"; const price = 50000;

const text = "The price of " + product + " is Rs. " + price + "."; ✅ New Way (Template Literals) const text = The price of ${product} is Rs. ${price}.;

👉 Clearly more readable and modern!

📄 Multi-line Strings Made Easy

Before template literals, multi-line strings were awkward:

❌ Old Way const text = "This is line one.\n" + "This is line two."; ✅ Template Literals const text = This is line one. This is line two.;

🎯 No special characters, no concatenation—just write naturally.

Real-World Use Cases

Dynamic Messages const user = "Ashish"; console.log(Welcome back, ${user}!);
HTML Templates (Very Common) const title = "JavaScript Basics";
```
const html = `${title}`;
```

Logging and Debugging

const count = 5;

console.log(`Total items: ${count}`);

Expressions Inside Strings: You can even run JavaScript inside ${}:
```
const a = 5;
const b = 10;

console.log(Sum is ${a + b});
```

Why Template Literals Matter?

Improves code readability
Reduces syntax noise
Makes dynamic strings easy to write
Widely used in modern frameworks (React, Node.js)

Final Thoughts

Template literals are one of the simplest yet most powerful features in modern JavaScript.

Once you start using them: 👉 You’ll rarely go back to + concatenation.

Check out more blogs and follow our Javascript series to learn more.

Template Literals in JavaScript

Comments

JavaScript: Beginner to Advance 🚀

Map and Set in JavaScript

More from this blog

Expo Router vs React Navigation

How Instagram, WhatsApp, Uber & Netflix Would Be Built Today Using Expo Router

Async/Await in JavaScript

Error Handling in JavaScript: try, catch, finally

Understanding this, call(), apply(), and bind() in JavaScript

What Are Template Literals?

Benefits of using Template Literals

Before vs After (Comparison)

Real-World Use Cases

Why Template Literals Matter?

Final Thoughts

Command Palette

Comments

JavaScript: Beginner to Advance 🚀

Map and Set in JavaScript

More from this blog

What Are Template Literals?

Benefits of using Template Literals

Before vs After (Comparison)

Real-World Use Cases

Why Template Literals Matter?

Final Thoughts