Template Literals in JavaScript

When you start learning JavaScript, string handling looks easy at first. You just put text inside quotes, join a few words together, and done. But once your code starts growing, traditional string concatenation can become messy fast. That is exactly where template literals come in and make life a lot easier.

Template literals are one of those JavaScript features that feel small at first, but once you start using them, you wonder how you ever lived without them. They make your code cleaner, easier to read, and much more comfortable to work with.

The problem with traditional string concatenation

Before template literals, developers usually combined strings using the + operator. For example:

let name = “Pragya”;
let age = 20;

let message = “My name is “ + name + “ and I am “ + age + “ years old.”;
console.log(message);

This works perfectly fine. But the problem starts when the string gets longer. You have to keep adding quotes, plus signs, spaces, and variables in the right places. One small mistake, like missing a space or a plus sign, can break the whole sentence or make it look awkward.

Now imagine writing a bigger sentence, or building HTML inside JavaScript. The code quickly starts feeling crowded and hard to follow. That is why traditional concatenation often feels clumsy.

What are template literals?

Template literals are a newer and cleaner way to create strings in JavaScript. They use backticks instead of regular quotes.

let name = “Pragya”;
let age = 20;

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

This is the same output as before, but the code looks much simpler. The backticks make the string easier to read, and the ${} syntax lets you insert variables directly into the text.

That little ${} part is called embedding variables or interpolation. It means you can place JavaScript expressions inside a string without breaking it apart.

Embedding variables in strings

This is one of the most useful parts of template literals. Instead of joining pieces of text with +, you can simply write the variable inside ${}.

Example:

let product = “Laptop”;
let price = 45000;

let output = `The price of the ${product} is ₹${price}.`;
console.log(output);

You are not limited to just variables either. You can also place expressions inside template literals.

let a = 10;
let b = 5;

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

This makes your code feel more natural, almost like writing a sentence.

Multi-line strings become easy

Another big advantage of template literals is that they allow multi-line strings without any extra effort.

With old string syntax, writing multiple lines was annoying:

let text = “Hello,\n” +
           “Welcome to JavaScript.\n” +
           “Template literals are useful.”;

It works, but it does not look very elegant.

With template literals, you can just write:

let text = `Hello,
Welcome to JavaScript.
Template literals are useful.`;

That is much cleaner. No \n everywhere, no extra +, and no headache. This is especially helpful when you are writing HTML, messages, email templates, or anything with several lines.

Old string concatenation vs template literals

Let us compare both styles side by side.

Traditional way

let firstName = “Rahul”;
let city = “Delhi”;

let sentence = “My name is “ + firstName + “ and I live in “ + city + “.”;
console.log(sentence);

Template literal way

let firstName = “Rahul”;
let city = “Delhi”;

let sentence = `My name is ${firstName} and I live in ${city}.`;
console.log(sentence);

The second version is easier to scan, easier to write, and easier to debug. When you read the code later, your eyes do not have to jump across a bunch of plus signs and quotation marks. That readability improvement is a huge deal, especially in bigger projects.

Why template literals are so useful in modern JavaScript

Template literals are not just about making strings prettier. They are widely used in real-world JavaScript code because they make development smoother.

You will often see them used in:

let user = “Aman”;
let score = 95;

console.log(`Hello ${user}, your score is ${score}.`);

They are useful in UI messages, dynamic greetings, HTML generation, error messages, and logs. For example, when building a web page, you may want to create HTML using JavaScript:

let title = “JavaScript Basics”;
let html = `
  <div>
    <h1>${title}</h1>
    <p>This content was created using template literals.</p>
  </div>
`;

This style is neat and easy to maintain. It saves time and reduces mistakes.

A small but important readability boost

One of the biggest reasons developers like template literals is not just convenience, but clarity.

Compare these two:

let result = “Hello “ + name + “, your total is “ + total + “ rupees.”;

and

let result = `Hello ${name}, your total is ${total} rupees.`;

The second one feels much more natural. It reads almost like plain English. That is the beauty of template literals: they help your code look less like a puzzle and more like a sentence.

Final thoughts

Template literals are a simple feature, but they solve a very common problem in a very elegant way. Instead of struggling with messy string concatenation, you get a cleaner, more modern, and more readable way to work with text in JavaScript.

For beginners, this is one of the easiest JavaScript features to learn and one of the most satisfying to use. Once you get used to backticks and ${}, it becomes hard to go back to the old style.

So the next time you need to build a string in JavaScript, try template literals first. Your code will look better, feel smoother, and save you from a lot of tiny formatting headaches.

---

Connect with me:

• LinkedIn

• Github