What is Template Literal in JavaScript: Simple Explanation and Example

A template literal in JavaScript is a way to create strings that can include variables and expressions easily using backticks (``). It allows multi-line strings and embedding values inside the string with ${} syntax.

How It Works

Think of a template literal like a special kind of string that lets you mix text and variables smoothly, like filling in blanks on a form. Instead of using plus signs to join pieces together, you write the string inside backticks (``) and put variables or expressions inside ${}. This makes the code cleaner and easier to read.

It also works like a multi-line note where you can press Enter and keep writing on the next line without extra symbols. This is handy when you want to keep the text format exactly as you see it.

Example

This example shows how to use a template literal to include a variable inside a string and create a multi-line message.

javascript

const name = "Alice";
const age = 30;
const message = `Hello, my name is ${name}.
I am ${age} years old.`;
console.log(message);

Output

Hello, my name is Alice.
I am 30 years old.

When to Use

Use template literals whenever you need to build strings that include variables or expressions, especially if the string spans multiple lines. They make your code simpler and more readable compared to older ways of joining strings.

Common real-world uses include creating messages for users, generating HTML snippets dynamically, or formatting data for display.

Key Points

• Template literals use backticks (``) instead of quotes.
• You can embed variables or expressions inside ${}.
• They support multi-line strings without extra characters.
• They improve code readability and reduce errors in string building.

Key Takeaways

Template literals simplify string creation with embedded variables using backticks and ${}.

They allow multi-line strings without special characters.

Use them to write cleaner and more readable code when combining text and data.

They replace older string concatenation methods for better clarity.

Ideal for dynamic messages, HTML templates, and formatted output.