Template Literals in JavaScript

Introduction

Creating strings in JavaScript looks simple, but as soon as variables and longer text are involved, traditional concatenation can start to feel messy.

Example:

const name = "Prashant";
const message = "Hello " + name + ", welcome!";

It works, but the readability does not feel great.

This is where template literals become useful.

Problems with Traditional String Concatenation

With traditional concatenation:

• + gets used again and again

• mixing strings and variables can make the code feel noisy

• writing multi-line text can feel awkward

Example:

const name = "Prashant";
const age = 22;

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

This is readable, but in modern JavaScript it can be written more cleanly.

Template Literal Syntax

Template literals use backticks ` `.

Example:

const name = "Prashant";
const intro = `Hello ${name}`;

This is modern syntax, and it feels much more readable.

Embedding Variables in Strings

The most useful part of template literals is string interpolation.

Example:

const name = "Prashant";
const age = 22;

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

Here, the variable is used directly inside ${}.

This feels cleaner than concatenation.

Before vs After

Before:

const message = "Hello " + name + ", your score is " + score;

After:

const message = `Hello \({name}, your score is \){score}`;

This readability improvement is the biggest benefit of template literals.

Multi-Line Strings

Another useful feature of template literals is multi-line strings.

Example:

const text = `Hello
This is line 2
This is line 3`;

console.log(text);

With traditional quotes, multi-line strings do not feel this natural to write.

So template literals are not just useful for interpolation, but also for formatting.

Use Cases in Modern JavaScript

Template literals are commonly useful for:

• creating dynamic messages

• writing HTML snippets

• improving console output

• formatting API or UI text

• writing multi-line text

They are very common in modern JavaScript code.

A Small Practice Example

const name = "Prashant";
const course = "Web Development";

const message = `Hello \({name}, welcome to \){course}!`;
console.log(message);

Multi-line:

const card = `Student:
Name: ${name}
Course: ${course}`;

console.log(card);

Summary

• traditional string concatenation can be readable, but it may feel messy in longer strings

• template literals use backticks

• variables can be embedded directly through ${}

• multi-line strings also become easier

• template literals are widely used for readability in modern JavaScript

Final Thought

Template literals may look like a small syntax improvement, but their effect on real code readability is quite strong.

Once you get used to them, old-style string concatenation starts to feel much less pleasant.

Continue Reading

• Previous: Spread vs Rest Operators in JavaScript

• Next: Map and Set in JavaScript