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
Formatted Strings Using Template Strings in JavaScript
Template strings (template literals) in JavaScript allow you to create formatted strings with embedded expressions using backticks (`). They provide a cleaner alternative to string concatenation and offer multiline support.
Syntax
`string text ${expression} string text`
Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template Strings Example</title>
</head>
<body>
<h1>Template String Formatting</h1>
<div id="result"></div>
<button onclick="showFormattedString()">Show Formatted String</button>
<script>
function showFormattedString() {
let personObj = {
name: "Rohan Sharma",
age: 12,
rollno: 22
};
// Using template string for formatting
let formattedString = `The person name is ${personObj.name}. His age and rollno are ${personObj.age} and ${personObj.rollno} respectively`;
document.getElementById("result").innerHTML = formattedString;
}
</script>
</body>
</html>
Advanced Features
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Template Strings</title>
</head>
<body>
<h1>Advanced Template String Features</h1>
<div id="output"></div>
<button onclick="demonstrateFeatures()">Show Examples</button>
<script>
function demonstrateFeatures() {
let name = "Alice";
let age = 25;
let items = ["apple", "banana", "orange"];
// Multiline strings
let multiline = `
Name: ${name}
Age: ${age}
Items: ${items.join(", ")}
`;
// Expressions inside template strings
let calculation = `Sum: ${10 + 20 + 30}`;
// Method calls
let upperName = `Uppercase: ${name.toUpperCase()}`;
let output = `
<h3>Multiline Example:</h3>
<pre>${multiline}</pre>
<h3>Expression Example:</h3>
<p>${calculation}</p>
<h3>Method Call Example:</h3>
<p>${upperName}</p>
`;
document.getElementById("output").innerHTML = output;
}
</script>
</body>
</html>
Comparison with Traditional String Concatenation
| Method | Syntax | Multiline Support | Readability |
|---|---|---|---|
| String Concatenation | "Hello " + name | No | Poor for complex strings |
| Template Strings | `Hello ${name}` | Yes | Excellent |
Key Features
- Expression Embedding: Use ${expression} to embed any JavaScript expression
- Multiline Support: Natural line breaks without escape characters
- Improved Readability: Cleaner syntax compared to string concatenation
- Preserve Whitespace: Maintains formatting and indentation
Conclusion
Template strings provide a powerful and readable way to create formatted strings in JavaScript. They eliminate the need for complex concatenation and make multiline strings much easier to work with.
Updated on: 2026-03-15T23:18:59+05:30
330 Views
Advertisements