Template literals or sometimes informally called as string templates were introduced in ES6 Module.

Despite the fact that in JavaScript, a classic old method was used earlier for concatenating two or more different strings.

Problems with traditional string concatenation

const name = "Twilight";
const role = "Spy";

// Messy, easy to forget spaces
const greeting = "Konochiwa, my name is " + name + " and I am a " + role + ".";

This is an example of string concatenation where in one variable two different variables are adding using double quotes "" or single '', with the help of + operator.

However, using this could cause more problems such as :

Messy Code.
Difficult in reading and to comprehend at first glance.
Tricky in larger code
Formatting problems

Template Literals

In template strings, the most important thing you need to remember is they uses backticks `` instead of double quotes "" or single ''.

Template literal syntax

const normalString = "I am a normal string";
const templateLiteral = `I am a template literal`;

Embedding variables in strings

String Interpolation

"Interpolation" is just a fancy word for injecting variables directly into your strings.

It can be called as a superset of traditional string concatenation.

The Old Way (Concatenation):

const name = "Loid Forger";
const role = "Spy";

// Messy, easy to forget spaces
const greeting = "Hello, my name is " + name + " and I am a " + role + ".";

The New Way (Template Literals):

const name = "Loid Forger";
const role = "Spy";

// Clean, readable, exactly as it looks
const greeting = `Hello, my name is \({name} and I am a \){role}.`;

Fancy and easy right?...

Multi-line strings

Not only this template literals comes with another great advantage.

Before ES6, if you wanted a string to drop down to a new line, you had to use the newline character (\n) or concatenate strings across multiple lines.

With template literals, whatever you type inside the backticks is exactly what you get.

If you press "Enter" in your code, it creates a new line in the string.

The Old Way:

const htmlSnippet = "<div class='card'>\n" +
                    "  <h1>Title</h1>\n" +
                    "  <p>Some content goes here.</p>\n" +
                    "</div>";

The New Way:

const htmlSnippet = `
  <div class="card">
    <h1>Title</h1>
    <p>Some content goes here.</p>
  </div>
`;

This makes generating HTML templates in vanilla JavaScript incredibly easy!

Use cases in modern JavaScript

Some benefits of Template literals are :

Readable Error Logging and Debugging:
For example =>

function processPayment(amount, accountId) {
  if (amount <= 0) {
    throw new Error(`Payment Failed: Attempted to charge $${amount} to Account ID: ${accountId}. Amount must be greater than zero.`);
  }
  // Process payment...
}

Clean code and better readability

Constructing API Endpoints (Fetching Data):

let userId = 202;
// Dynamic URL 
let url = `https://example.com/users/${userId}`;

Conclusion

Template literals—written with backticks () and using ${…}for interpolation—offer a cleaner, more readable alternative to traditional string concatenation. They make embedding variables straightforward, preserve multi-line formatting exactly as written, and reduce the clutter and fragility associated with many+` operations. For clearer, more maintainable ES6+ code, prefer template literals whenever you need embedded values or multi-line strings.