# Template literal in JS.

So… let me ask you something…

Have you ever written something like this in JavaScript?

```js
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 🏖️

```js
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.

```js
"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

```js
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**:

```plaintext
` `
```

Yes… that button you never used on your keyboard 😏

* * *

## Embedding Variables (The Magic ✨)

Instead of `+`, we use:

```plaintext
${variable}
```

Let’s rewrite the same example:

```js
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 😵

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

### New Way 😎

```js
const message = `Hello ${name}, your order of ${item} is confirmed.`;
```

Difference dekha?

Old code = Puzzle New code = Sentence

* * *

## Multi-line Strings (Finally Peace 🧘)

Earlier:

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

Now:

```js
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.

```js
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:

```plaintext
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

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

### 2\. HTML Templates (Frontend devs ka favourite)

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

### 3\. API Responses

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

### 4\. Dynamic Messages

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

* * *

## One Hidden Superpower 🔥

You can even run expressions inside `${}`

```js
const a = 10;
const b = 20;

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

Output:

```plaintext
Sum is 30
```

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

* * *

## Final Suggestion (Golden Rule 🏆)

Whenever you see yourself writing:

```js
"Hello " + name + " something " + value
```

Stop right there.

Take a deep breath.

And convert it to:

```js
`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:

```plaintext
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 🚀