Blog

Template Literals Kya Hote Hai?

Template literals JavaScript mein ek naya tarika hai strings likhne ka, jo ki ES6 (ECMAScript 2015) update mein introduce hua tha. Ye normal quotes (” ya “”) ki jagah backticks () ka use karta hai. Template literals ki khasiyat yeh hai ki aap multi-line strings easily likh sakte ho aur variables ya expressions ko direct string ke andar `${}` syntax ke through embed kar sakte ho, bina kisi complex concatenation (`+` operator) ke. Isse code zyada readable aur maintainable ban jaata hai. Example ke liye: Hello, ${name}!“ yahan name variable ka value direct string mein aa jaayega. Template literals mein aap expressions bhi use kar sakte ho jaise ${2 + 3} jo output mein 5 dega. Overall, template literals se JavaScript mein strings handle karna kaafi asaan aur powerful ho gaya hai.

Simple shabdon mein:
Template literals allow karte hain humein dynamic strings create karne, ${} ke andar variable ya expression likhkar.

Syntax :

Template literals normal double quotes (” “) ya single quotes (‘ ‘) ki jagah backticks ( ` ` ) ka use karte hain.

Basic Syntax:
`String content`

Yahan dhyan do, hum backtick (`) ka use karte hain, quotes ka nahi.

1. Multiline Strings :

Multiline strings JavaScript mein ek aise string hoti hai jo multiple lines mein likhi ja sakti hai bina har line ke end mein special character use kiye. Traditional tarike se, hum \n (new line character) ka use karte the, lekin ES6 (ECMAScript 2015) ke baad template literals ka concept aaya jisme backticks (`) ka use karke multiline strings easily likhi ja sakti hain. Template literals se hum string ke andar variables bhi directly embed kar sakte hain using ${} syntax. Isse code readable aur maintain karna kaafi aasaan ho jata hai. Multiline strings banane ke liye aapko string ko backticks ke andar likhna hota hai aur jitni lines chaho likh sakte ho. Yeh feature especially jab hum HTML code ya long text JavaScript mein likhte hain tab kaafi useful hota hai.

Traditional way :
let str = "Hello \nWorld!";

New way :
let str = `Hello
World!`;

Direct naye line mein likh sakte hain, koi \n ya + nahi chahiye.

2. String Interpolation :

String Interpolation (JavaScript) ek technique hai jisme hum strings ke andar variables ya expressions ko directly embed kar sakte hain, bina kisi manual concatenation ke. JavaScript mein string interpolation ka use mainly template literals ke through hota hai, jo backticks (`) ka use karte hain instead of normal quotes. Jab hum template literals ka use karte hain, to ${} ke andar hum koi bhi variable ya expression likh sakte hain, aur wo value directly string ke andar show hoti hai. Ye method code ko jyada readable, clean aur easy to maintain banata hai. Example ke liye: `Hello, ${name}!` yaha name variable ki value automatically string mein add ho jaayegi. String interpolation se hum multi-line strings bhi asani se likh sakte hain, jo pehle normal strings mein kaafi mushkil hota tha.

Example:

let name = "Sandeep";
let greeting = `Hello, ${name}!`;
console.log(greeting);

Output:
Hello, Sandeep!

Pehle hume + operator ka use karna padta tha, ab simple ${} ke through variable ya expression ko embed kar sakte hain.

3. Expression Evaluation :

Expression Evaluation (JavaScript) ek process hai jisme hum kisi mathematical ya logical expression ka result calculate karte hain. JavaScript me expression kisi bhi combination ho sakta hai variables, operators aur values ka. Jab hum expression likhte hain jaise 5 + 3 * 2, to JavaScript pehle operator precedence aur associativity ke rules ko follow karta hai aur fir correct order me calculation karta hai. Sabse pehle multiplication (*) perform hota hai, uske baad addition (+) hoti hai, aur final result 11 aata hai. Expression evaluation me type conversion bhi ho sakta hai jab alag-alag data types involve hote hain, jaise string aur number. JavaScript interpreter expressions ko left se right aur precedence ke basis par evaluate karta hai, taaki accurate output mil sake. Ye concept programming me highly important hai.

Example:

let a = 5;
let b = 10;
let result = `Sum of a and b is ${a + b}`;
console.log(result);

Output:
Sum of a and b is 15

Direct expressions ko evaluate karke result string mein aa jata hai.

4. Function Calls inside Template Literals :

JavaScript mein “Function Calls inside Template Literals” ka matlab hota hai ki jab hum kisi template literal ke andar directly ek function ko call karte hain aur uska result string ke andar embed kar dete hain. Template literals ko backticks (`) ke saath likha jata hai, aur expressions ya function calls ko ${} ke andar likhte hain. Jab JavaScript isko execute karti hai, tab function call hota hai aur uska return value wahan replace ho jata hai. Iska use hum dynamic strings banane ke liye karte hain jisme function ka output directly aa jata hai. Example ke liye, agar humara ek function getName() hai, toh hum likh sakte hain Hello, ${getName()}. Yeh technique code ko zyada clean aur readable banati hai, especially jab hume runtime par values generate karni hoti hain.

Example:

function greet() {
    return "Good Morning";
}

let message = `Message: ${greet()}`;
console.log(message);

Output:
Message: Good Morning

Template Literals ka Real Life Use :

Agar ek user ka naam aur uska order amount dikhana hai:

let customerName = "Anjali";
let orderAmount = 2500;

let message = `Dear ${customerName}, your total bill amount is ₹${orderAmount}. Thank you!`;
console.log(message);

Output:
Dear Anjali, your total bill amount is ₹2500. Thank you!

Dekha kitna simple aur readable ban gaya string ko dynamic banana?

Important Points (Jaruri Baaten):

• Backticks (` `) ka use zaruri hai, quotes (” “) se kaam nahi chalega.
• ${} ke andar kuch bhi likh sakte ho: variables, expressions, function calls, etc.
• Template literals code ko readable aur manageable banate hain.
• Bahut useful hai jab aapko dynamic content banana ho.

Quiz: Test Your Knowledge on Template Literals in JavaScript

Bonus: Practical Application!

Aaj hi apne JavaScript project mein Template Literals ka istemal karke dekhein!

Template Literals ko sahi tareeke se samajhne ke liye unke features jaise multi-line strings, string interpolation (${} ke saath variables/joining expressions), aur embedded expressions ka upayog karein aur apne code ko aur bhi readable aur dynamic banayein.