Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Nesting template strings in JavaScript
Nesting template strings in JavaScript allows you to embed one template literal inside another. This is useful when building complex strings with dynamic content or when passing template literals as function arguments.
What are Nested Template Strings?
Nested template strings occur when you place one template literal (using backticks) inside another. The inner template string is evaluated first, then the outer one.
Basic Syntax
`Outer template ${`Inner template ${variable}`} continues here`
Simple Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Template Strings</title>
</head>
<body>
<div id="result"></div>
<script>
let firstName = "John";
let lastName = "Doe";
// Simple nested template string
let greeting = `Hello, ${`${firstName} ${lastName}`}! Welcome back.`;
document.getElementById("result").innerHTML = greeting;
console.log(greeting);
</script>
</body>
</html>
Hello, John Doe! Welcome back.
Practical Example with Functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Template Strings with Functions</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
margin: 10px 0;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Nesting Template Strings Example</h2>
<div class="result" id="output"></div>
<button onclick="displayInfo()">Show Nested Template Result</button>
<script>
function formatName(first, last) {
return `${first} ${last}`;
}
function displayInfo() {
let firstName = "Alice";
let lastName = "Johnson";
let age = 25;
// Nested template strings
let message = `Person Info: ${formatName(`${firstName}`, `${lastName}`)} is ${age} years old.`;
document.getElementById("output").innerHTML = message;
console.log(message);
}
</script>
</body>
</html>
Person Info: Alice Johnson is 25 years old.
Advanced Nesting Example
// Complex nested template string example
let user = {
name: "Sarah",
role: "Developer",
department: "Engineering"
};
let company = "TechCorp";
// Multiple levels of nesting
let announcement = `
${`Welcome ${`${user.name}`}!`}
You are now part of ${`${company}'s ${`${user.department} team as a ${user.role}`}`}.
`;
console.log(announcement.trim());
Welcome Sarah!
You are now part of TechCorp's Engineering team as a Developer.
Key Points
- Inner template strings are evaluated before outer ones
- Nesting can make code more readable when building complex strings
- Avoid excessive nesting as it can reduce readability
- Useful for conditional string building and function parameter passing
Conclusion
Nested template strings provide a powerful way to build complex dynamic strings in JavaScript. Use them when you need to embed template literals within other template literals, but keep nesting levels reasonable for maintainability.
Updated on: 2026-03-15T23:18:59+05:30
644 Views
Advertisements