JavaScript Template Literals

Writing strings is one of the most common tasks in JavaScript. Before ES6, developers used single (‘ ‘) or double (” “) quotes to create strings, which often made it difficult to include variables, multi-line text, or complex expressions.

To solve these problems, JavaScript introduced Template Literals (also known as template strings). They provide a more powerful and flexible way to work with strings using backticks (`).

Template literals make your code cleaner, more readable, and easier to maintain—especially when dealing with dynamic content.

What are JavaScript Template Literals?

Template literals are a way to create strings in JavaScript using backticks (`) instead of quotes. They allow you to:

1. Embed variables directly into strings
2. Write multi-line strings easily
3. Use expressions inside strings

Template literals = Dynamic and flexible strings in JavaScript

Example:

let name = "John";

let message = `Hello, ${name}!`;

console.log(message); // Hello, John!

Why are JavaScript Template Literals Used?

Template literals are widely used because they solve many common problems in string handling.

1. Easy Variable Insertion

No need for string concatenation using +.

2. Cleaner Code

Improves readability and reduces clutter.

3. Multi-line Strings

No need for \n or concatenation.

4. Supports Expressions

You can use JavaScript expressions directly inside strings.

Syntax

Template literals use backticks (`) and ${} for expressions.

1. Variable Interpolation

let name = "John";
console.log(`Hello ${name}`);

Output:

2. Expression Inside Template

let a = 5, b = 10;

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

Output:

3. Multi-line String

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

Output:

Example 1: Without Template Literals

let name = "John";
let age = 35;

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

Output:

Example 2: With Template Literals

When we use Template Literals, the code will be much cleaner and easier to read.

let name = "John";
let age = 35;

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

Output:

Example 3: Using Functions Inside Template

function greet(name) {
 return `Hello, ${name}!`;
}

console.log(`${greet("John")} Welcome to JavaScript.`);

Output:

Example 4: HTML Template Creation

let user = {
 name: "John",
 age: 25
};

let html = `
 <div>
   <h1>${user.name}</h1>
   <p>Age: ${user.age}</p>
 </div>
`;
console.log(html);

Real-Life Example Dynamic Email Message

❌ Without Template Literals:

let name = "John";
let orderId = 1234;

let message = "Hello " + name + ", your order #" + orderId + " has been shipped.";
console.log(message);

Output:

✅ With Template Literals:

let name = "John";
let orderId = 1234;

let message = `Hello ${name}, your order #${orderId} has been shipped.`;
console.log(message);

Output:

Common Mistakes when using Template Literals

Some Beginners make common mistakes when using Template literals

1. Using Quotes Instead of Backticks

When beginners use Quotes instead of Backticks.

let name = "John";
console.log("Hello ${name}"); // Wrong

2. Forgetting ${} for Variables

let name = "John";
console.log("Hello name"); // Wrong

3. Mixing Concatenation and Template Literals

let name = "John";
let msg = `Hello ` + name; // Not recommended

4. Not Escaping Backticks

let text = `This is a backtick: \``;

Interview Questions

function tag(strings, value) {
 return strings[0] + value.toUpperCase();
}

let name = "john";
console.log(tag`Hello ${name}`);

Advanced Concepts of Template Literals

You can see some advance concept of Template literals

1. Nested Templates

let name = "John";
let message = `Hello ${`Mr. ${name}`}`;
console.log(message);

Output:

2. Conditional Rendering

let isLoggedIn = true;

console.log(`User is ${isLoggedIn ? "Online" : "Offline"}`);

Output:

3. Tagged Templates

function highlight(strings, value) {
 return `${strings[0]}${value}`;
}

let name = "John";
console.log(highlight`Hello ${name}`);

Output:

Conclusion

JavaScript Template Literals are a powerful feature that makes string handling much easier and more efficient. They allow you to write clean, readable, and dynamic code without complex concatenation.