When working with strings in JavaScript, you often need to combine text, variables, and expressions — and doing this with regular quotes (' or ") can quickly become messy.

That’s where Template Literals come in! They make string manipulation cleaner, easier, and much more readable.

What Are Template Literals?

Template Literals are a modern way to work with strings in JavaScript. They were introduced in ES6 (ECMAScript 2015) and are defined using backticks (`) instead of single or double quotes.

Here’s a simple example:

let message = `Hello, World!`;
console.log(message);

Looks almost like a normal string, right? But template literals have superpowers — they can include variables, expressions, and even multi-line text easily.

1. String Interpolation (Embedding Variables)

Before template literals, if you wanted to include variables in a string, you’d have to concatenate them using the + operator like this:

let name = "Abhinav";
let greeting = "Hello, " + name + "! Welcome to JavaScript.";
console.log(greeting);

This works, but it’s clunky and hard to read when the strings get long.

With template literals, you can directly embed variables or expressions using ${} — no need for messy concatenation.

let name = "Abhinav";
let greeting = `Hello, ${name}! Welcome to JavaScript.`;
console.log(greeting);

Output:

Hello, Abhinav! Welcome to JavaScript.

You can even perform expressions inside ${}:

let a = 10;
let b = 5;
console.log(`The sum of ${a} and ${b} is ${a + b}.`);

Output:

The sum of 10 and 5 is 15.

2. Multi-line Strings

Writing multi-line strings used to be painful before ES6. You had to use the newline character \n or string concatenation.

let oldWay = "This is line 1.\n" + 
             "This is line 2.\n" + 
             "This is line 3.";
console.log(oldWay);

With template literals, you can write multi-line strings naturally, just as you want them to appear:

let message = `This is line 1.
This is line 2.
This is line 3.`;
console.log(message);

Output:

This is line 1.
This is line 2.
This is line 3.

Much cleaner, right?

3. Expressions and Function Calls Inside Template Literals

You can use any JavaScript expression inside ${} — not just variables. That includes function calls, calculations, and even conditional (ternary) operators.

Example 1 – Function Call:

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(`${greet("Abhinav")}, how are you today?`);

Output:

Hello, Abhinav!, how are you today?

Example 2 – Conditional Expressions:

let marks = 85;
console.log(`You have ${marks >= 40 ? "passed" : "failed"} the exam.`);

Output:

You have passed the exam.

4. Nesting Template Literals

You can also nest template literals within other ones — useful when building dynamic content or HTML templates.

let product = "Laptop";
let price = 75000;
 
let message = `The product "${product}" costs ₹${price}.
${price > 50000 ? "It's a premium item." : "It's affordable."}`;
 
console.log(message);

Output:

The product "Laptop" costs ₹75000.
It's a premium item.

5. Template Literals in HTML Templates

Template literals are especially handy when generating HTML code dynamically in JavaScript.

let name = "Abhinav";
let age = 22;
 
let html = `
  <div>
    <h2>${name}</h2>
    <p>Age: ${age}</p>
  </div>
`;
 
console.log(html);

Output:

<div>
  <h2>Abhinav</h2>
  <p>Age: 22</p>
</div>

This makes it incredibly easy to create reusable templates in web applications or frameworks.