टेम्प्लेट लिटरल्स का परिचय.

प्रोग्रामिंग में स्ट्रिंग हेरफेर एक बहुत ही सामान्य कार्य है, खासकर इंटरैक्टिव वेब एप्लिकेशन बनाते समय। यदि आपने कभी जावास्क्रिप्ट के साथ काम करने में समय बिताया है, तो संभवतः आपको कुछ वेरिएबल्स को स्ट्रिंग्स में डालना पड़ा होगा।
जावास्क्रिप्ट के पुराने संस्करणों में, इसका मतलब स्ट्रिंग कॉन्सटेनेशन नामक प्रक्रिया के माध्यम से स्ट्रिंग्स को एक साथ जोड़ने के लिए ऑपरेटर का उपयोग करना था। हालाँकि, जावास्क्रिप्ट ES6(2015) अपडेट में टेम्पलेट लिटरल्स की शुरूआत के साथ। अब हमारे पास स्ट्रिंग्स में वेरिएबल्स डालने का एक साफ़ तरीका है, जिसे स्ट्रिंग इंटरपोलेशन कहा जाता है।

टेम्प्लेट लिटरल्स क्या हैं?

टेम्पलेट शाब्दिक अर्थ हमें स्ट्रिंग्स में आसानी से हेरफेर करने की अनुमति देते हैं। वे (') या (") के बजाय बैकटिक्स (`) में संलग्न हैं, और वे चर, या फ़ंक्शन कॉल को सीधे स्ट्रिंग में रखने के लिए (${}) सिंटैक्स का उपयोग करके स्ट्रिंग इंटरपोलेशन का समर्थन करते हैं।

यहां एक उदाहरण दिया गया है कि कैसे टेम्पलेट शाब्दिक स्ट्रिंग इंटरपोलेशन को सरल बनाते हैं।

const name = "John"
const age = 24

// Old method using concatenation
const greeting = "Hello, "   name   "! You are "   age   " years old."

// New method using template literals
const greetingWithTemplateLiteral = `Hello, ${name}! You are ${age} years old.`

console.log(greetingWithTemplateLiteral) // Outputs: Hello, John! You are 24 years old.

टेम्प्लेट लिटरल्स का उपयोग करने के लाभ

1. बेहतर पठनीयता

स्ट्रिंग कॉन्सटेनेशन का उपयोग करते समय, संकेतों के समूह में खो जाना आसान था, खासकर जब लंबी स्ट्रिंग्स के साथ काम करते समय। टेम्प्लेट लिटरल्स आपको इस तरह से स्ट्रिंग लिखने की सुविधा देकर इससे बचते हैं जिसका पालन करना आसान हो।

const product = "laptop"
const price = 1400

console.log(`The price of the ${product} is $${price}`)
// Outputs: The price of the laptop is $1400

2. मल्टी-लाइन स्ट्रिंग्स

टेम्पलेट शाब्दिक से पहले, आपको मल्टी-लाइन स्ट्रिंग बनाने के लिए \n जैसे एस्केप वर्णों का उपयोग करना पड़ता था। अब आप उन्हें बैकटिक्स(`) के अंदर लिख सकते हैं।

// Old method
const multiLineString1 = "This is the first line"   "\n"   "This is the second line"   "\n"   "This is the third line"

// New method
const multiLineString2 = `This is the first line
This is the second line
This is the third line`

console.log(multiLineString1)
console.log(multiLineString2)
/* Both output:
This is the first line
This is the second line
This is the third line
*/

3. अभिव्यक्ति मूल्यांकन

आप गणना भी कर सकते हैं, फ़ंक्शन कॉल कर सकते हैं, या स्ट्रिंग के अंदर डेटा में हेरफेर कर सकते हैं।

const a = 1
const b = 10

console.log(`The sum of a and b is ${a   b}`) 
// Outputs: The sum of a and b is 11

const upperCaseName = (name) => name.toUpperCase()
console.log(`Your name in uppercase is ${upperCaseName("John")}`)
// Outputs: Your name in uppercase is JOHN

जावास्क्रिप्ट में सामान्य उपयोग के मामले

1. एचटीएमएल जनरेशन

संयोजन के साथ HTML स्ट्रिंग्स बनाने के बजाय, आप वेरिएबल्स को इंटरपोलेशन के साथ सीधे स्ट्रिंग में डाल सकते हैं।

const name = "John"
const htmlContent = `
  
Hello, ${name}!
  
Welcome to the site.
`

2. लॉगिंग संदेश

आप संयोजन की आवश्यकता के बिना सीधे लॉग संदेशों में वेरिएबल भी सम्मिलित कर सकते हैं।

const user = "John"
const action = "logged in"

console.log(`User ${user} just ${action}`)
// Outputs: User John just logged in

3. यूआरएल बनाना

टेम्पलेट अक्षरशः यूआरएल बनाना भी आसान बनाते हैं।

const userId = 123
const apiUrl = `https://api.example.com/user/${userId}/details`

console.log(apiUrl)
// Outputs: https://api.example.com/user/123/details

4. सशर्त तर्क

एक और बढ़िया उपयोग का मामला है सशर्त तर्क। टेम्प्लेट शाब्दिक के साथ आप टर्नरी ऑपरेटर (? :) का उपयोग करके स्ट्रिंग्स को सरल शर्तें दे सकते हैं, जो कि अन्यथा स्थिति के लिए एक आशुलिपि है।
तार्किक ऑपरेटर जैसे && (और) या || (या) का उपयोग स्ट्रिंग में सशर्त भागों को जोड़ने के लिए भी किया जा सकता है। इससे अतिरिक्त if-else कथनों की आवश्यकता या संयोजन की आवश्यकता समाप्त हो जाती है।

const isMember = true
console.log(`User is ${isMember ? 'a member' : 'not a member'}`) 
// Outputs: User is a member

आप टेम्प्लेट शाब्दिक के अंदर अधिक जटिल अभिव्यक्ति भी जोड़ सकते हैं।

/* In this example, the condition age >= 18 is evaluated
the result is either “an adult” or “a minor” based on the value of age*/
const age = 24

const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`

console.log(message) 
// Outputs: You are an adult

/*In this, if isLoggedIn is true and username exists
username is displayed or else, it defaults to “Guest” */
const isLoggedIn = true
const username = "John"

const greeting = `Welcome ${isLoggedIn && username ? username : 'Guest'}`

console.log(greeting)
// Outputs: Welcome John

निष्कर्ष

जावास्क्रिप्ट में टेम्पलेट शाब्दिक स्ट्रिंग इंटरपोलेशन को संभालने के लिए एक क्लीनर और अधिक कुशल तरीका प्रदान करते हैं। वेब सामग्री बनाने, संदेशों को लॉग करने, या अधिक पठनीय कोड बनाने के बीच, यह विधि आपको आवश्यक लचीलापन प्रदान करती है।

अगली बार जब आप वेरिएबल्स और स्ट्रिंग्स के साथ बाजीगरी करें, तो टेम्पलेट शाब्दिकों का उपयोग करने का प्रयास करें। आप जल्द ही समझ जाएंगे कि जावास्क्रिप्ट के साथ काम करने के लिए यह मेरा पसंदीदा तरीका क्यों है।

संसाधन

1. एमडीएन वेब डॉक्स - टेम्पलेट लिटरल्स
2. गिटहब - चरण 1 समीक्षा स्ट्रिंग्स लैब
3. W3 स्कूल - जावास्क्रिप्ट टेम्पलेट स्ट्रिंग्स