Template Literals in JavaScript

while working with JS before ES6 i often found the mess + operator is spreading being developer it is hecctic , even simple code look loke a hell to write , i mean become unnnecessary complicated.

const name = "Dushyant";
const age = 20;
const city = "Mumbai";

const message = "Hello, my name is " + name + " and I am " + age + " years old. " +
"I live in " + city + ". It's nice to meet you!";

console.log(message);

Hello, my name is Dushyant and I am 20 years old. I live in Mumbai. It's nice to meet you!

now you understan the mess it is spreading. now in es6 it sollve the problem simle but powerfull.overall we are facing issues like

1. messy concatenation

2. poor readability

in this blog we are going to cover all about this so get ready.

Core Syntax

Instead of quotes " " we will be using backtick just below your escape key

const message = `This is a string`;

Embedding variables (this is the real game changer)

Instead of:

"Hello " + name

You write:

Hello ${name} 

• ${} → this is where JavaScript expressions go

• Not just variables—you can put logic inside

Example:

const total = 100;
console.log(`Total amount is ${total * 2}`);

output

Total amount is 200

by just using the backtick you juust improve the readibility of code.

Embedding Variable in string

what it acutall mean that you have a sting now u want too insert a dynamically variable or say values inside it.

"My name is " + name + " and I am " + age

What’s actually happening here?

• You’re not writing one sentence

• You’re creating multiple string

• Then joining them with +

for dry run it become

[ string ] + [ variable ] + [ string ] + [ variable ]

That’s why it feels messy.

after introducing tepmlate literal we can

• keep sentence intact

• can inject values inside it

somethinh like this

`My name is \({name} and I am \){age}`

now we actuall think what ${ } actually does

it basically means whats inside get convwrted to a valua and inserted

so,

`${name}`

means

take the value of name and put the inside string

Note

inside ${ } you can run any expression or property for example

`${10 + 5}`        // 15
`${price * 2}`      // calculation
`${user.name}`      // object access

dThis means you're not just inserting variables — you can run expressions directly inside strings.

And that’s what makes template literals powerful, not just cleaner.

Multi-Line Strings

Multi-Line String simply writing a text across multiple lines, like the way we naturally like.

for example

Hello,
Welcome to JavaScript.
This is a message.

But earlier in JavaScript, you couldn’t write this directly inside a string.

one common approach was using \n to manually insert line breaking

const text = "Hello,\nWelcome to JavaScript.\nThis is a message.";

problem:

• manually inserting line break

• cant see final structure properly

Another approach was using + to split the string:

const text = "Hello,\n" +
"Welcome to JavaScript.\n" +
"This is a message.";

problem:

• again + problem

• harder to maintain

• string is broken again

What template literal changed

here how we write it

const text = `Hello,
Welcome to JavaScript.
This is a message.`;

• we can write text exaclty how it should appear

• it break the line automatically

Use case in Modern JS

lets go simply one one by one1.

1. Dynamic message:

instead of this

"Hello " + user.name + ", you have " + user.notifications + " new messages."

we arrite this

`Hello \({user.name}, you have \){user.notifications} new messages.`
this is more readable 

this is more readable, clean and can be used anywhere ( UI, logs, alerts)

2. HTML template

const card = `
  <div class="card">
    <h2>${user.name}</h2>
    <p>${user.bio}</p>
  </div>
`;

writting html insdie js become readable, heavily useed in frsmework like REactetc