JavaScript Refresher: Template Literals

Template Literals JavaScript mein ES6 se aaye hain aur strings ko likhne ka ek modern aur flexible tareeka dete hain. Yeh string concatenation se better hain kyunki yeh code ko readable banate hain aur variables ya expressions ko easily embed karne dete hain. React mein template literals UI mein dynamic content dikhane ke liye kaam aate hain. Is section mein hum template literals ko simple aur clear examples ke saath samjhenge.

Template Literals Kya Hain?

Template literals strings ko backticks (`) ke andar likhte hain, aur inmein variables ya expressions ko ${} syntax ke saath embed kar sakte hain. Yeh multi-line strings aur complex string formatting ko bhi aasan banate hain.

Features:

• Backticks: Single (') ya double quotes (") ki jagah backticks (`) use hote hain.
• Interpolation: ${expression} se variables ya calculations directly string mein daal sakte hain.
• Multi-line Strings: Newline characters ke bina multi-line strings likh sakte hain.
• Tagged Templates: Functions ke saath advance formatting ke liye use ho sakte hain.

Syntax:

const str = ` Hello, ${variable}! `;

1. Basic Template Literals

Template literals variables ko string mein embed karne ka simple tareeka dete hain.

Example 1: String Interpolation

const name = "Rahul";
const greeting = ` Namaste, ${name}!`;

console.log(greeting); // Output: Namaste, Rahul!

Explanation:

• name variable ko ${name} ke saath string mein embed kiya.
• Yeh concatenation (`”Namaste, ” + name + “!”`) se zyada readable hai.

Example 2: Expressions in Template Literals

Template literals mein calculations ya expressions bhi daal sakte hain.

const a = 5;
const b = 10;
const result = `Sum of ${a} and ${b} is ${a + b}.`;

console.log(result); // Output: Sum of 5 and 10 is 15.

Explanation:

• `${a + b}` se calculation directly string mein evaluate hota hai.
• Koi bhi valid JavaScript expression `${}` ke andar likh sakte hain.

2. Multi-line Strings

Template literals multi-line strings ko bina \n ya concatenation ke likhne dete hain.

Example 3: Multi-line String

const message = `Yeh ek multi-line string hai. 
Line 2 mein kuch aur likh sakte hain. 
Line 3 bhi add kar sakte hain.`;

console.log(message);
// Output:
// Yeh ek multi-line string hai.
// Line 2 mein kuch aur likh sakte hain.
// Line 3 bhi add kar sakte hain.

Explanation:

• Backticks ke andar enter press karke new lines likh sakte hain.
• Yeh HTML ya React components mein formatting ke liye useful hai.

3. Tagged Template Literals

Tagged template literals ek function ke saath template literals ko process karte hain, jisse custom string manipulation possible hota hai.

Syntax:

function tag(strings, ...values) {
// Custom logic
}
const result = tag(Hello, `${name}!`);

Example 4: Basic Tagged Template

function customTag(strings, name) {
return ` ${strings[0]} ${name.toUpperCase()}${strings[1]}`;
}

const name = "Ankit";
const tagged = customTag(Namaste, `${name}!`);

console.log(tagged); // Output: Namaste, ANKIT!

Explanation:

• strings array mein static parts (`Namaste, aur !`) aate hain.
• name parameter mein dynamic value (`Ankit`) aati hai.
• Function custom logic se string ko modify karta hai (yahan uppercase kiya).

Deep Dive: Tagged templates React mein advanced formatting, jaise localization ya sanitizing user input, ke liye use hote hain. Lekin basic React apps mein yeh kam use hota hai.

React mein Template Literals ka Use

React mein template literals dynamic UI content, props, aur state ke saath strings banane ke liye use hote hain. Yeh JSX ke andar bhi kaam aate hain jab string manipulation chahiye.

Example 5: Template Literals in Functional Component

import React from 'react';

function Greeting({ name, age }) {
const message = `Namaste, ${name}! You are ${age} years old.`;

return (

<div>
<h1>{message}</h1>
</div>
);
}
 export default Greeting;
}

Explanation:

• message template literal se dynamic string banaya jisme name aur age props use huye.
• Yeh string JSX mein render kiya gaya.
• Yeh Vite project mein src/App.jsx mein daal ke try kar sakte ho (npm run dev).

Example 6: Multi-line Template in React

import React, { useState } from 'react';

function UserInfo() {
const [user, setUser] = useState({ name: "Ankit", city: "Delhi" });

const handleUpdate = () => {
setUser({ ...user, city: "Mumbai" });
};

const info = `Name: ${user.name} City: ${user.city}`;

return (

<div>
<pre>{info}</pre>
<button>Update City</button>
</div>
);
}
&nbsp;

export default UserInfo;

Explanation:

• info template literal multi-line string banata hai jo state ke name aur city ko dikhata hai.
• <pre> tag se formatting preserve hoti hai, jisse new lines dikhte hain.
• handleUpdate state ko update karta hai, aur template literal nayi values ke saath render hota hai.
• Yeh functional component Vite project mein src/UserInfo.jsx mein daal ke test kar sakte ho.

Example 7: Conditional Rendering with Template Literals

import React, { useState } from 'react';

function StatusDisplay() {
const [isActive, setIsActive] = useState(true);

const toggleStatus = () => {
setIsActive(!isActive);
};

const status = `User is ${isActive ? 'Active' : 'Inactive'}.`;

return (

<div>
<h1>{status}</h1>
<button>Toggle Status</button>
</div>
);
}
&nbsp;

export default StatusDisplay;

Explanation:

• Template literal mein ternary operator (${isActive ? 'Active' : 'Inactive'}) use kiya conditional string banane ke liye.
• toggleStatus state ko update karta hai, aur status string dynamically change hota hai.
• Yeh component Vite project mein src/StatusDisplay.jsx mein daal ke test kar sakte ho.

Key Points

• Template Literals: Backticks (`) aur ${} se strings banate hain, variables aur expressions embed karte hain.
• Multi-line Strings: New lines bina \n ke directly likh sakte hain.
• Tagged Templates: Advanced formatting ke liye functions ke saath use hote hain, lekin React mein kam common hain.
• React Use: Dynamic UI content, props, aur state ke saath strings banane ke liye perfect. JSX mein directly render kar sakte hain.
• Best Practice: Concatenation (+) ki jagah template literals use karo taaki code readable rahe.