String Template Literals in JavaScript Explained with Examples
Learn JavaScript template literals with practical examples. Understand string interpolation, multi-line strings, expressions, and modern ES6 string handling techniques.
JavaScript Template Literals Explained with Examples
Template literals are a modern JavaScript feature that makes working with strings easier, cleaner, and more readable.
Before template literals were introduced, developers had to use string concatenation to combine text and variables.
Today, template literals are widely used in:
- React applications
- Next.js projects
- Node.js applications
- API responses
- dynamic content generation
- email templates
- user interface rendering
Understanding template literals is an important step in modern JavaScript development.
What are Template Literals?
Template literals are a way to create strings using backticks instead of single or double quotes.
Example:
const name = "Sachin";
console.log(`Hello ${name}`);
Output:
Hello Sachin
Template literals allow developers to embed variables and expressions directly inside strings.
Why Template Literals are Important
Template literals help developers:
- write cleaner code
- avoid complex string concatenation
- create dynamic content
- improve readability
- build modern JavaScript applications
Most modern JavaScript projects use template literals extensively.
Before Template Literals
Before ES6, developers used string concatenation.
Example:
const name = "Sachin";
console.log("Hello " + name);
Output:
Hello Sachin
This works, but becomes difficult to read when multiple variables are involved.
Using Template Literals
Example:
const name = "Sachin";
console.log(`Hello ${name}`);
Output:
Hello Sachin
This approach is cleaner and easier to maintain.
Understanding the Syntax
Template literals use:
` `
called backticks.
Variables are inserted using:
${}
Example:
const language = "JavaScript";
console.log(`I am learning ${language}`);
Output:
I am learning JavaScript
Multiple Variables Example
Example:
const firstName = "Sachin";
const lastName = "Raval";
console.log(`Welcome ${firstName} ${lastName}`);
Output:
Welcome Sachin Raval
Template literals become extremely useful when working with multiple values.
Expressions Inside Template Literals
Template literals can evaluate JavaScript expressions.
Example:
const price = 100;
const tax = 20;
console.log(`Total: ${price + tax}`);
Output:
Total: 120
JavaScript evaluates the expression before displaying the result.
Using Functions Inside Template Literals
Example:
function greet(name) {
return `Hello ${name}`;
}
console.log(greet("Sachin"));
Output:
Hello Sachin
This pattern is very common in modern applications.
Multi-Line Strings
One of the biggest advantages of template literals is support for multi-line strings.
Before template literals:
const message =
"Line 1\n" +
"Line 2\n" +
"Line 3";
With template literals:
const message = `
Line 1
Line 2
Line 3
`;
console.log(message);
Output:
Line 1
Line 2
Line 3
Much cleaner and easier to read.
Real-World Example
Suppose you are building a user profile card.
Example:
const user = {
name: "Sachin",
role: "Frontend Developer"
};
console.log(
`Name: ${user.name}
Role: ${user.role}`
);
Output:
Name: Sachin
Role: Frontend Developer
This type of dynamic content generation is common in modern web development.
Template Literals with Objects
Example:
const product = {
title: "Laptop",
price: 50000
};
console.log(
`${product.title} costs ₹${product.price}`
);
Output:
Laptop costs ₹50000
Objects and template literals are frequently used together.
Template Literals with Arrays
Example:
const skills = [
"HTML",
"CSS",
"JavaScript"
];
console.log(
`My favorite skill is ${skills[2]}`
);
Output:
My favorite skill is JavaScript
Template Literals in React
React developers use template literals frequently.
Example:
const userName = "Sachin";
const message = `Welcome ${userName}`;
Dynamic UI rendering often depends on template literals.
Template Literals in API Responses
Example:
const userId = 101;
const url =
`https://api.example.com/users/${userId}`;
Output:
https://api.example.com/users/101
This is a common real-world use case.
Watch Full JavaScript Template Literals Tutorial
If you prefer video learning, watch the complete tutorial below where we explain template literals with practical coding examples.
Watch the Full JavaScript Template Literals Tutorial
This tutorial demonstrates how template literals are used in modern JavaScript applications.
Common Beginner Mistakes
Using Quotes Instead of Backticks
Incorrect:
"Hello ${name}"
Correct:
`Hello ${name}`
Template literals require backticks.
Forgetting ${}
Incorrect:
`Hello name`
Correct:
`Hello ${name}`
Variables must be wrapped inside ${} .
Overusing String Concatenation
Modern JavaScript usually prefers template literals because they are easier to read and maintain.
Real-World Uses of Template Literals
Template literals are heavily used in:
- React applications
- Next.js projects
- Node.js APIs
- dynamic forms
- email templates
- notifications
- dashboards
- user profile systems
Almost every modern JavaScript application uses template literals.
Internal Learning Recommendation
Before learning template literals, make sure you understand:
These concepts make template literals easier to understand.
Production Tip
Professional developers usually:
- use template literals instead of string concatenation
- prefer readable multi-line strings
- combine template literals with objects and arrays
- use them for dynamic content generation
- maintain clean string formatting
Template literals significantly improve code readability.
Why Template Literals Matter
Template literals help developers:
- write cleaner code
- generate dynamic content
- improve readability
- build scalable applications
- reduce string-related bugs
They are one of the most useful ES6 features.
Conclusion
Template literals provide a modern and efficient way to work with strings in JavaScript.
Understanding interpolation, expressions, multi-line strings, and real-world usage helps developers write cleaner and more maintainable code.
As you move into React.js, Next.js, APIs, and full-stack development, template literals become even more valuable because modern applications rely heavily on dynamic content generation.