Template Literals in JavaScript

Let’s start with what we were doing earlier before template literals even came into picture.

When we had to combine strings with variables, we used normal string concatenation. Something like:

const name = "Gaurang";
const age = 20;

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

Now this works, there is no issue as such. But if you look at it closely, it starts getting messy very quickly. You have quotes, plus signs, spaces that you need to manually handle, and if the string gets longer, it becomes harder to read.

Now imagine if there are multiple variables or conditions. It becomes even more cluttered. You might even miss a space or a quote and then spend time figuring out what went wrong.

This is exactly the problem template literals try to solve.

What are template literals

Template literals are just another way of writing strings in JavaScript, but with more flexibility.

Instead of using single quotes or double quotes, we use backticks.

So the same example becomes:

const name = "Gaurang";
const age = 20;

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

Now if you compare both, this one feels more natural to read. It almost looks like a normal sentence.

So the main idea here is instead of breaking the string and adding variables using plus, we directly embed variables inside the string using this syntax: ${variable}

Embedding variables inside strings

This is where template literals actually shine.

Inside backticks, whenever you want to insert a variable, you use ${ } and put the variable inside it.

For example:

const price = 100;
const quantity = 2;

const total = `Total price is ${price * quantity}`;

Here we are not just putting a variable, we are even doing a calculation inside it. That is something you cannot do cleanly with normal concatenation without making it look messy. So basically whatever you put inside ${ } gets evaluated and then inserted into the string.

Multi line strings

Now this is something which used to be annoying earlier. If you wanted a string in multiple lines, you had to do something like this:

const text = "This is line one\n" +
             "This is line two\n" +
             "This is line three";

Again, not wrong, but not very clean.

With template literals, you can directly write:

const text = `This is line one
This is line two
This is line three`;

And that is it. No extra symbols, no manual line breaks.

It just works as you write it.

Comparing old vs new approach

If you really compare both approaches, the difference is mostly about readability. With concatenation, your focus shifts to managing syntax. You are thinking about quotes, plus signs, spacing. With template literals, your focus shifts back to the actual content of the string and that is a big deal when your code grows.

Where this is actually useful

In real projects, strings are everywhere. you are building UI messages, logging data, creating dynamic content, working with APIs. In all these places, you often need to combine static text with dynamic values. Template literals make this process smoother.

Especially when dealing with:

dynamic messages, HTML templates in frontend, logging complex values, building URLs with variables

It reduces chances of mistakes and improves readability.

One small thing to remember

Template literals are not just for variables. They can also handle expressions, so anything inside ${ } is evaluated.

For example:

const a = 5;
const b = 10;

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

This directly gives you the computed result inside the string.

Closing thought

At the end of the day, template literals are not about doing something new. They are about doing the same thing in a cleaner way. String concatenation still works, and it will always work. But once you start using template literals, going back feels unnecessary.
It just makes the code easier to read, easier to write, and honestly less error prone and in real development, that clarity matters more than anything else.