Template Literals in JavaScript
String concatenation might be the most annoying part of JavaScript. You build a string by gluing variables and text together with plus signs, keep track of quotes, worry about spacing, and end up with code that's hard to read and easy to break.
Template literals fix this. Once you start using them, you'll wonder how you ever tolerated the old way.
This is about what makes concatenation painful, how template literals solve it, and when they actually matter in real projects.
Problems with Traditional String Concatenation
The Plus Sign Problem
Before template literals, you built strings like this:
let name = "Alice";
let age = 25;
let message = "Hello, " + name + "! You are " + age + " years old.";
console.log(message); // Hello, Alice! You are 25 years old.
It works, but you have to be careful about spacing inside the strings, matching quotes, and remembering where each variable goes. That's three things to think about when you should only be thinking about one.
It Gets Worse with Longer Strings
Add more variables and things fall apart:
let user = "Bob";
let email = "bob@example.com";
let joinDate = "March 2024";
let role = "Developer";
let bio = "User: " + user + "\n" +
"Email: " + email + "\n" +
"Joined: " + joinDate + "\n" +
"Role: " + role;
Now you're juggling quotes, newline characters, plus signs, and trying to picture what the final string actually looks like. It's hard to read the structure. Easy to miss a space.
Template Literal Syntax
Template literals use backticks (`) instead of quotes. You put variables inside ${} and they get inserted directly.
Basic Example
let name = "Alice";
let age = 25;
let message = `Hello, \({name}! You are \){age} years old.`;
console.log(message); // Hello, Alice! You are 25 years old.
Compare the two approaches:
// Old way (concatenation)
let greeting = "Hello, " + name;
// New way (template literal)
let greeting = `Hello, ${name}`;
The template literal reads naturally. The variable shows up right where it goes.
Embedding Variables in Strings
Variables and Expressions
You can put any JavaScript expression inside ${}:
let x = 5;
let y = 3;
console.log(`\({x} + \){y} = ${x + y}`);
// 5 + 3 = 8
Objects and Properties
let user = {
name: "Charlie",
email: "charlie@example.com",
role: "Admin"
};
let profile = `User: \({user.name}, Email: \){user.email}, Role: ${user.role}`;
console.log(profile);
// User: Charlie, Email: charlie@example.com, Role: Admin
Function Calls
function getGreeting(hour) {
if (hour < 12) return "Good morning";
if (hour < 18) return "Good afternoon";
return "Good evening";
}
let greeting = `${getGreeting(10)}, it's a beautiful day!`;
console.log(greeting); // Good morning, it's a beautiful day!
Ternary Operators
let score = 85;
let result = `Your score is \({score}. \){score >= 80 ? "You passed!" : "You failed."}`;
console.log(result); // Your score is 85. You passed!
Arrays
let colors = ["red", "green", "blue"];
let colorList = `Available colors: ${colors.join(", ")}`;
console.log(colorList); // Available colors: red, green, blue
Multi-line Strings
The Old Way Was Painful
Creating multi-line strings meant either concatenating or using \n:
let html = "<div>" +
" <h1>Hello</h1>" +
" <p>This is a paragraph</p>" +
"</div>";
// or
let html = "<div>\n <h1>Hello</h1>\n <p>This is a paragraph</p>\n</div>";
Both are annoying to read and write.
Template Literals Handle It Naturally
let html = `<div>
<h1>Hello</h1>
<p>This is a paragraph</p>
</div>`;
console.log(html);
The newlines are preserved exactly as you type them.
With Variables
let name = "Alice";
let age = 25;
let profile = `
Name: ${name}
Age: ${age}
Status: Active
`;
Real HTML Template
let title = "Welcome";
let content = "This is my website";
let page = `<!DOCTYPE html>
<html>
<head>
<title>${title}</title>
</head>
<body>
<h1>${title}</h1>
<p>${content}</p>
</body>
</html>`;
String Interpolation Visualization
How template literals work:
Template Literal:
`Hello, \({name}! You are \){age} years old.`
| |
| |
name = "Alice" age = 25
| |
v v
Result: "Hello, Alice! You are 25 years old."
The ${} acts as a placeholder. Whatever expression is inside gets evaluated and inserted into the string.
Before vs After
BEFORE (Concatenation):
"Hello, " + name + "! You are " + age + " years old."
|string| |var| |string| |var| |string|
Hard to read, easy to make mistakes
AFTER (Template Literal):
`Hello, \({name}! You are \){age} years old.`
|variable| |variable|
Clear structure, reads naturally
Before vs After Template Literals
Simple Greeting
Concatenation:
let user = "Bob";
let hour = 10;
let greeting = "Hello " + user + ", good " + (hour < 12 ? "morning" : "afternoon") + "!";
Template literal:
let user = "Bob";
let hour = 10;
let greeting = `Hello \({user}, good \){hour < 12 ? "morning" : "afternoon"}!`;
The template literal reads closer to how you'd actually think about the string.
User Profile
Concatenation:
let firstName = "John";
let lastName = "Doe";
let email = "john@example.com";
let joinDate = "2023-01-15";
let profile = "Name: " + firstName + " " + lastName + "\n" +
"Email: " + email + "\n" +
"Joined: " + joinDate;
Template literal:
let firstName = "John";
let lastName = "Doe";
let email = "john@example.com";
let joinDate = "2023-01-15";
let profile = `
Name: \({firstName} \){lastName}
Email: ${email}
Joined: ${joinDate}
`;
The template shows the actual structure immediately.
HTML Snippet
Concatenation:
let heading = "Welcome";
let paragraph = "This is the content";
let html = "<div class=\"container\">" +
"<h1>" + heading + "</h1>" +
"<p>" + paragraph + "</p>" +
"</div>";
Template literal:
let heading = "Welcome";
let paragraph = "This is the content";
let html = `<div class="container">
<h1>${heading}</h1>
<p>${paragraph}</p>
</div>`;
No quote escaping. No newline characters. You write the HTML as you see it.
Use Cases in Modern JavaScript
Building HTML Dynamically
let products = [
{ name: "Laptop", price: 1000 },
{ name: "Phone", price: 500 }
];
let html = `<ul>
\({products.map(p => `<li>\){p.name}: $${p.price}</li>`).join("")}
</ul>`;
console.log(html);
This is how you actually see it written.
URLs and API Requests
let userId = 42;
let token = "abc123xyz";
let url = `https://api.example.com/users/\({userId}/profile?token=\){token}`;
Much clearer than building strings with plus signs.
Error Messages and Logging
let filename = "data.txt";
let error = "File not found";
console.error(`Error: Could not load \({filename}. Reason: \){error}`);
Working with JSON Data
let name = "Bob";
let email = "bob@example.com";
let jsonData = `{
"name": "${name}",
"email": "${email}",
"timestamp": "${new Date().toISOString()}"
}`;
console.log(jsonData);
Template Literals vs Regular Strings
| Feature | Regular Strings | Template Literals |
|---|---|---|
| Quotes | Single or double | Backticks |
| Variables | Concatenation with + | ${} syntax |
| Expressions | Can't embed directly | Full JavaScript expressions |
| Multi-line | Need \n or concatenation |
Preserve newlines naturally |
| Readability | Gets messy with many variables | Stays clean |
| Performance | Slightly faster | Negligible difference |
| Backwards compatible | Yes | IE 11+ required |
Practice Assignment
Work through these exercises:
1. Convert concatenation to template literals:
let city = "New York";
let population = 8000000;
// Old way:
let fact = "The population of " + city + " is about " + population + ".";
// Convert to template literal
2. Build an email template:
let recipient = "alice@example.com";
let subject = "Welcome!";
let senderName = "Support Team";
// Create an email template with greeting, body, and signature
// Use template literals
3. Create an HTML form:
let formTitle = "Contact Us";
let submitText = "Send Message";
// Build HTML for a contact form using template literals
// Include fields for name, email, and message
4. Format data with expressions:
let items = [
{ name: "Apple", quantity: 5 },
{ name: "Banana", quantity: 3 }
];
// Create a shopping list display using template literals
// Show: "Apple x 5", "Banana x 3", etc.
5. Multi-line SQL-like query:
let tableName = "users";
let condition = "age > 18";
let limit = 10;
// Build a multi-line query string using template literals
Quick Recap
Traditional plus-sign concatenation becomes unreadable with multiple variables
Template literals use backticks (
`) instead of quotesVariables go inside
${}and get inserted directlyAny JavaScript expression works inside
${}Multi-line strings preserve newlines and spacing naturally
No quote escaping needed
Supported in all modern browsers and Node.js
Once you start using template literals, string concatenation feels painful. If you're not using them yet, start with your next string that has more than one variable. You'll notice immediately how much cleaner the code is.
Happy coding! 🚀
If you enjoyed this article, check out my other blogs on this profile. 🔗 Connect with me: LinkedIn | GitHub | X (Twitter)
