Template Literals in JS

Hello readers,

Welcome to another blog in the JS series. Now, I'm covering topics that are going to be used in your code regularly. In the previous blog, I covered the spread vs rest operator in JS.

If you have not read that blog yet, then please go through it. The blog is short, but it is very important to write clean code. Here is the link:

https://js-with-abhishek.hashnode.dev/spread-vs-rest

In this blog, I'm going to cover Template Literals in JavaScript.

Trust me, the concept is really easy, but once you start using it, your code will instantly look cleaner and more readable. I will also give you some real-life examples so that you can actually feel the difference.

Let's start the blog

Traditional Way of String Concatenation

Let's create a message that will consist of a string and variables.

const name = "Abhishek";
const age = 22;

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

It works fine... but it doesn't look good. Also, if there are more variables and strings, then it will be hard to read.

For example:

const user = "Abhishek";
const email = "abc@gmail.com";
const status = "Active";

const text = "User: " + user + "\n" +
             "Email: " + email + "\n" +
             "Status: " + status;

Problems:

• hard to read

• Too many + operators

• Easy to miss spaces

• Multi-line strings are messy

Now, you understand that this is definitely not a good way. So JS provides Template literals as a solution.

Template Literals

Template literals solve all the above-listed problems. Instead of using quotes, we use backticks (` ).

for example

const message = `Hello World`;

This is very simple, but powerful.

Embedding Variables

To embed a variable, we use ${} and the variable name inside the braces.

const name = "Abhishek";
const age = 22;

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

This is easy to read and also looks clean compared to the traditional way.

Multi-line Strings

In the traditional way, to change the line you have to write \n, like this:

const text = "Line 1\n" +
             "Line 2\n" +
             "Line 3";

But in template literals, you just have to enter and write the string in new line. That's it. Not just this, you can also increase the space by giving space between strings.

For example:

const text = `
Line 1
Line 2
        Line 3 with spaces 
`;

JavaScript Inside Strings

Yes, you can also run JS expressions inside the template literals. Here are some examples:

const a = 10;
const b = 20;

const result = `Sum is ${a + b}`;

const greet = (name) => `Hello ${name}`;

const message = `${greet("Abhishek")} 👋`;

Real-Life Use Cases

1. API Response

res.send(`User ${user.name} created successfully`);

2. Dynamic UI

const heading = `<h1>Welcome ${user.name}</h1>`;

3. Logging

console.log(`Error at \({time}: \){message}`);

4. Dynamic URLs

const url = `https://api.example.com/users/${userId}`;

That’s it for this blog.

Template literals might look like a small feature, but once you start using them, you’ll realize how much cleaner and more readable your code becomes. It removes unnecessary clutter and lets you focus more on logic rather than fixing strings again and again.

I hope this blog helped you understand why template literals are preferred over traditional string concatenation and how they make your code feel more modern and structured.

In the next blog, I’m going to cover Array Flattening in JavaScript — another concept that seems simple but is very useful in real-world problems and interviews.

I will see you in another interesting and useful blog. Till then...

Stay consistent and keep grinding....

Peace ✌️