Template Literals in JavaScript
Working with strings is something we do very often in JavaScript.
For example:
Displaying user names
Creating messages
Building HTML dynamically
Showing API data
Before template literals were introduced, combining strings and variables was not very clean.
Template literals made string handling much easier and more readable.
In this article, we’ll learn:
Problems with traditional string concatenation
Template literal syntax
Embedding variables in strings
Multi-line strings
Real-world use cases in modern JavaScript
Let’s begin with the older approach first.
Problems with Traditional String Concatenation
Before template literals, developers used the + operator to combine strings.
Example:
let name = "Rahul";
let message = "Hello " + name + ", welcome to JavaScript.";
console.log(message);
Output:
Hello Rahul, welcome to JavaScript.
This works, but when strings become larger, the code becomes difficult to read.
Example:
let product = "Laptop";
let price = 50000;
let text = "The product " + product + " costs Rs. " + price;
Too many + signs reduce readability.
What Are Template Literals?
Template literals are a modern way to work with strings in JavaScript.
They use:
Backticks (` `)
instead of normal quotes.
Syntax:
let text = `Hello World`;
Template literals make strings cleaner and easier to write.
Embedding Variables in Strings
One of the best features of template literals is string interpolation.
Instead of using +, we can directly insert variables using:
${variable}
Example:
let name = "Rahul";
let message = `Hello ${name}, welcome to JavaScript.`;
console.log(message);
Output:
Hello Rahul, welcome to JavaScript.
Before vs After Template Literals
Old String Concatenation
let name = "Rahul";
let age = 22;
let text = "My name is " + name + " and I am " + age + " years old.";
Using Template Literals
let name = "Rahul";
let age = 22;
let text = `My name is \({name} and I am \){age} years old.`;
The second version is:
Cleaner
Easier to read
Easier to maintain
String Interpolation Visualization
`Hello ${name}`
↓
Variable value inserted into string
Example:
name = "Rahul"
Result:
"Hello Rahul"
Multi-Line Strings
Before template literals, multi-line strings were difficult to write.
Example using old approach:
let text = "Hello\n" +
"Welcome\n" +
"To JavaScript";
Template literals make this much simpler.
Example:
let text = `
Hello
Welcome
To JavaScript
`;
console.log(text);
Output:
Hello
Welcome
To JavaScript
No need for \n or +.
Expressions Inside Template Literals
We can also run JavaScript expressions inside ${}.
Example:
let a = 5;
let b = 10;
console.log(`Sum is ${a + b}`);
Output:
Sum is 15
This makes template literals very powerful.
Real-World Use Cases
Template literals are heavily used in modern JavaScript applications.
Creating Dynamic Messages
let username = "Aman";
console.log(`Welcome back, ${username}!`);
Building HTML
let title = "JavaScript";
let html = `
<h1>${title}</h1>
`;
API Responses
let product = "Phone";
let price = 30000;
console.log(`\({product} costs Rs. \){price}`);
Why Template Literals Are Better
Template literals improve:
Readability
Cleaner and easier to understand.
Maintainability
Less messy compared to concatenation.
Multi-Line Support
Writing long strings becomes simple.
Dynamic Content
Variables and expressions can be inserted easily.
Practice Assignment
Try these exercises in your browser console.
1. Create a Greeting Message
let name = "Rahul";
let message = `Hello ${name}`;
console.log(message);
2. Use Expressions
let a = 10;
let b = 20;
console.log(`Total is ${a + b}`);
3. Create a Multi-Line String
let text = `
JavaScript
is
awesome!
`;
console.log(text);
4. Compare Old vs New Approach
Write the same string using:
string concatenation
template literals
Observe which one looks cleaner.
Final Thoughts
Template literals are one of the most useful modern JavaScript features.
They help developers:
Write cleaner strings
Insert variables easily
Create multi-line text
Improve readability
Today, template literals are widely used in:
Frontend development
Backend applications
React projects
API handling
Once you start using them, going back to traditional string concatenation feels difficult.
And now, you know what Template Literals in JavaScript are.
If you have any doubt or want to connect, feel free to drop a comment — I’d be happy to help.
Thanks for reading, and see you in the next blog!
Peace ✌️ and Happy Learning!
