Template literal in JS.

So… let me ask you something…

Have you ever written something like this in JavaScript?

const name = "Barun";
const age = 22;

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

And then after writing this… you just stared at the screen and thought…

“Yeh kya likh diya maine 😐”

---

The Problem with Traditional String Concatenation

Technically… what we are doing above is called string concatenation.

But practically… we are creating a mess.

Let’s see why.

Problem 1: Readability goes on leave 🏖️

const order = "User " + username + " has ordered " + itemCount + " items worth ₹" + totalAmount;

Now tell me honestly…

Can you read this in one go?

Or do you need chai + 2 min silence?

---

Problem 2: Too many + signs

Feels like maths class again.

"Hello " + name + ", welcome to " + company + ". Your ID is " + id

After a point, you don’t know what’s string… what’s variable… what’s life…

---

Problem 3: Multi-line strings = headache

const message = "Hello " + name + "\n" +
                "Welcome to our platform.\n" +
                "We hope you enjoy your stay.";

This is not coding.

This is suffering.

---

Enter Template Literals (The Hero 🦸)

Now JavaScript said…

“Developers are already crying… let me help them.”

And introduced Template Literals.

---

Template Literal Syntax

Instead of double quotes " " or single quotes ' '

We use backticks:

` `

Yes… that button you never used on your keyboard 😏

---

Embedding Variables (The Magic ✨)

Instead of +, we use:

${variable}

Let’s rewrite the same example:

const name = "Barun";
const age = 22;

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

Now read this once…

Feels like English sentence, right?

No confusion.

No headache.

No “+ + + + +”.

---

Before vs After (Reality Check)

Old Way 😵

const message = "Hello " + name + ", your order of " + item + " is confirmed.";

New Way 😎

const message = `Hello \({name}, your order of \){item} is confirmed.`;

Difference dekha?

Old code = Puzzle New code = Sentence

---

Multi-line Strings (Finally Peace 🧘)

Earlier:

const email = "Hi " + name + ",\n" +
              "Your account has been created.\n" +
              "Thank you!";

Now:

const email = `Hi ${name},
Your account has been created.
Thank you!`;

No \n

No +

Bas seedha kaam.

---

Real World Example (Zindagi se juda hua 😄)

Imagine you are building an e-commerce app.

const user = "Ravi";
const product = "iPhone 15";
const price = 80000;

const message = `Hello ${user},
Your order for ${product} has been placed successfully.
Total Amount: ₹${price}`;

console.log(message);

Now this looks like a real message.

Not like some broken code experiment.

---

String Interpolation Visualization (Dimag mein picture banao 🧠)

Think like this:

Template Literal = Sentence + Placeholders

"Hello ${name}" → Hello Barun

${} acts like a slot machine

You put variable → it gives value

---

Use Cases in Modern JavaScript

Where do we actually use this?

Everywhere.

1. Logging

console.log(`User \({username} logged in at \){time}`);

2. HTML Templates (Frontend devs ka favourite)

const card = `
  <div>
    <h2>${title}</h2>
    <p>${description}</p>
  </div>
`;

3. API Responses

const error = `User with ID ${id} not found`;

4. Dynamic Messages

const status = `You have ${notifications} new notifications`;

---

One Hidden Superpower 🔥

You can even run expressions inside ${}

const a = 10;
const b = 20;

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

Output:

Sum is 30

Matlab… yeh sirf variable nahi… logic bhi samajhta hai.

---

Final Suggestion (Golden Rule 🏆)

Whenever you see yourself writing:

"Hello " + name + " something " + value

Stop right there.

Take a deep breath.

And convert it to:

`Hello \({name} something \){value}`

---

Conclusion

So what did we learn today?

• String concatenation works… but makes code ugly

• Template literals make code readable and clean

• ${} is your new best friend

• Multi-line strings become effortless

---

Homework (Haan bhai… bhagna mat 😏)

Create a message like:

Hello Aman,
You have 5 pending tasks.
Your total score is 87.

Using:

• Old concatenation

• Template literals

Then compare both.

And tell me honestly…

Which one feels like coding… and which one feels like torture?

---

And remember…

Good developers don’t just write code… They write readable code.

See you in next blog 🚀