Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

JavaScript स्ट्रिंग इंटरपोलेशन: शुरुआती गाइड

JavaScript स्ट्रिंग इंटरपोलेशन एक एक्सप्रेशन को स्ट्रिंग के हिस्से में एम्बेड करने की प्रक्रिया है। एक टेम्पलेट लिटरल का उपयोग एक्सप्रेशन्स को एम्बेड करने के लिए किया जाता है। आप इंटरपोलेशन का उपयोग करके वेरिएबल्स और गणितीय गणनाओं जैसे मानों को स्ट्रिंग में जोड़ सकते हैं।

क्या आपको JavaScript स्ट्रिंग के अंदर एक मान जोड़ने की आवश्यकता है? टेम्पलेट लिटरल सिंटैक्स ने आपको कवर किया है। टेम्पलेट लिटरल्स मल्टीलाइन स्ट्रिंग्स के साथ काम करना आसान बनाते हैं और JavaScript स्ट्रिंग के अंदर मान एम्बेड करते हैं। टेम्पलेट लिटरल्स JavaScript स्ट्रिंग इंटरपोलेशन सिंटैक्स हैं।

इस गाइड में, हम JavaScript स्ट्रिंग इंटरपोलेशन के बारे में बात करने जा रहे हैं। हम चर्चा करेंगे कि यह क्या है, यह कैसे काम करता है, और स्ट्रिंग इंटरपोलेशन का एक उदाहरण देखेंगे ताकि आप शुरुआत कर सकें।

बिना किसी देरी के, चलिए शुरू करते हैं!

JavaScript स्ट्रिंग इंटरपोलेशन

आप एक टेम्पलेट लिटरल का उपयोग करके JavaScript स्ट्रिंग में मान जोड़ सकते हैं। यह एक डॉलर साइन है जिसके बाद कैरली ब्रैकेट्स की एक जोड़ी आती है। कैरली ब्रैकेट्स के अंदर वह एक्सप्रेशन होना चाहिए जिसका मान आप स्ट्रिंग में एम्बेड करना चाहते हैं।

टेम्पलेट लिटरल्स आपको कन्कैटनेशन पर भरोसा किए बिना स्ट्रिंग में मान एम्बेड करने देते हैं। एक टेम्पलेट लिटरल घोषित करने के लिए, आपकी स्ट्रिंग को कोटेशन मार्क्स के बजाय बैकटिक्स (`) में संलग्न किया जाना चाहिए।

निम्न सिंटैक्स पर विचार करें:

`This is a string. Here is the value of 9 + 10: ${9 + 10}.`

हमने एक टेम्पलेट लिटरल घोषित किया है। हमारा एक्सप्रेशन है:

${9 + 10}

यह एक्सप्रेशन 9 + 10 का मूल्यांकन करता है। इस एक्सप्रेशन का परिणाम हमारी स्ट्रिंग के अंत में, फुल स्टॉप से पहले जोड़ा जाता है। ऐसा इसलिए है क्योंकि हमने अपना एक्सप्रेशन फुल स्टॉप से पहले लिखा है।

JavaScript स्ट्रिंग इंटरपोलेशन उदाहरण

टेम्पलेट लिटरल्स आपको सीधे स्ट्रिंग में मान एम्बेड करने की अनुमति देते हैं। इस कोड पर विचार करें:

const address_number = "10 Downing Street";
const prime_minister_address = `The Prime Minister's address is ${address_number}.`;
console.log(prime_minister_address);

कोड की पहली लाइन प्राइम मिनिस्टर का पता नंबर परिभाषित करती है। अगला, हम फुल एड्रेस बनाने के लिए टेम्पलेट लिटरल्स का उपयोग करते हैं। ${} सिंटैक्स का उपयोग हमारी स्ट्रिंग में एक मान एम्बेड करने के लिए किया जाता है। हमने स्ट्रिंग में "address_number" का मान जोड़ा है।

आइए अपना कोड चलाएं:

The Prime Minister's address is 10 Downing Street

हमारे कोड ने हमारी दो स्ट्रिंग्स को मर्ज कर दिया है।

जब आप टेम्पलेट लिटरल्स का उपयोग कर रहे हों, तो आप लिटरल के अंदर किसी भी मान को एम्बेड कर सकते हैं। इसमें एक स्ट्रिंग, एक नंबर, या एक JavaScript गणित गणना का परिणाम शामिल है। आपको टेम्पलेट लिटरल के अंदर टेम्पलेट लिटरल एम्बेड करने की आवश्यकता नहीं है।

स्ट्रिंग लिटरल्स के प्रमुख लाभों में से एक यह है कि इसका सिंटैक्स स्पष्ट है। हम अपने JavaScript कोड को सीधे अपनी स्ट्रिंग में एम्बेड कर सकते हैं।

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

हम कन्कैटनेशन का उपयोग करके स्ट्रिंग्स मर्ज कर सकते हैं। मान लें कि हमारे पास दो स्ट्रिंग्स हैं:

const full_address = `The Prime Minister's address is `;
const address_number = `10 Downing Street`;

आप प्लस साइन (+) का उपयोग करके दो स्ट्रिंग्स को कन्कैटनेट कर सकते हैं:

const prime_minister_address = full_address + address_number + ".";
console.log(prime_minister_address);

JavaScript कंसोल निम्न मान प्रिंट करता है:

The Prime Minister's address is 10 Downing Street

हमने सफलतापूर्वक एक स्ट्रिंग बनाई है जो हमारी दो स्ट्रिंग्स को जोड़ती है। अंत में, हम अपने वाक्य में फुल स्टॉप (".") जोड़ने के लिए कन्कैटनेशन ऑपरेटर का उपयोग करते हैं।

लेकिन, इस सिंटैक्स का एक नुकसान है: हम केवल स्ट्रिंग के अंत में मान जोड़ सकते हैं। यह टेम्पलेट लिटरल सिंटैक्स के परिचय के पीछे एक बड़ा कारण है। अब स्ट्रिंग के बीच में मान जोड़ना आसान है।

स्ट्रिंग इंटरपोलेशन JavaScript: गणनाएं

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

आइए एक स्ट्रिंग बनाएं जो एक कैफे में दो पेय की कीमत की गणना करती है और परिणाम को एक स्ट्रिंग के अंदर रखती है:

var drink1 = 2.30;
var drink2 = 2.20;
var bill = `The total cost of your drinks is $${drink1 + drink2}.`;

${} सिंटैक्स के अंदर, हमने एक गणना जोड़ी है। यह गणना दो JavaScript वेरिएबल्स के मानों को एक साथ जोड़ती है। हमारे वेरिएबल्स drink1 (2.30) और drink2 (2.20) एक साथ हैं। हमारा कोड इन मानों के योग के साथ एक स्ट्रिंग लौटाता है:

The total cost of your drinks is $4.50.

स्ट्रिंग इंटरपोलेशन JavaScript: टर्नरी ऑपरेटर्स

JavaScript टर्नरी ऑपरेटर्स आपको यह मूल्यांकन करने देते हैं कि कोई स्टेटमेंट True है या False। ये if स्टेटमेंट लिखने का एक अधिक संक्षिप्त तरीका हैं। टर्नरी ऑपरेटर्स विशेष रूप से उपयोगी हैं यदि if स्टेटमेंट का परिणाम केवल कोड की एक लाइन लेने वाला है।

यदि कोई ग्राहक अपने कॉफी पर $4.00 से अधिक खर्च करता है, तो उन्हें उनका बिल प्रस्तुत किया जाना चाहिए। फिर, उनसे कॉफी लॉयल्टी कार्ड क्लब में शामिल होने के लिए कहा जाना चाहिए। अन्यथा, उन्हें केवल उनका बिल प्रस्तुत किया जाना चाहिए। हम ग्राहक के बिल की लागत की जांच के लिए एक टर्नरी ऑपरेटर का उपयोग कर सकते हैं:

var drink1 = 2.30;
var drink2 = 2.20;
var total = drink1 + drink2;
var bill = `The total cost of your drinks is $${total}. ${total > 4.00 ? "Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy." : ""}`;
console.log(bill);

हमारे टेम्पलेट लिटरल में दो एम्बेडेड एक्सप्रेशन्स हैं। पहला, हम अपनी स्ट्रिंग में "total" का मान एम्बेड करते हैं। अगला, हम एक टर्नरी ऑपरेटर का उपयोग यह जांचने के लिए करते हैं कि क्या किसी ग्राहक को कॉफी हाउस के लॉयल्टी कार्ड क्लब में शामिल होने के लिए कहा जाना चाहिए।

यदि कुल खरीद मूल्य $4.00 से अधिक है, तो निम्न संदेश कंसोल पर प्रिंट किया जाता है:

The total cost of your drinks is $4.50. Would you like to join our coffee club? It will earn you a free coffee for every ten that you buy.

अन्यथा, हमारा टर्नरी ऑपरेटर कोलन (":") के बाद का मान लौटाएगा। यह वह मान है जो तब लौटाया जाता है जब एक एक्सप्रेशन False मूल्यांकन करता है।

हमारे उदाहरण में, कोलन के बाद का मान एक खाली स्ट्रिंग है। इसका मतलब है कि यदि किसी ग्राहक की खरीद $4.00 से कम है, तो हमारे टेम्पलेट लिटरल का केवल पहला वाक्य लौटाया जाता है:

The total cost of your drinks is $4.50.

निष्कर्ष

टेम्पलेट लिटरल्स आपको एक स्ट्रिंग के अंदर एक मान एम्बेड करने की अनुमति देते हैं। आप टेम्पलेट लिटरल के अंदर गणनाएं कर सकते हैं। हम बैकटिक्स का उपयोग करके टेम्पलेट लिटरल्स घोषित करते हैं। मूल्यांकन किए जाने वाले स्टेटमेंट्स को एक डॉलर साइन और कैरली ब्रैकेट्स की एक जोड़ी द्वारा दर्शाया जाता है जिसके भीतर स्टेटमेंट प्रकट होता है।

JavaScript के बारे में अधिक सीखने की सलाह के लिए, हमारा How to Learn JavaScript गाइड पढ़ें।

  1. JavaScript में स्ट्रिंग को बूलियन में बदलें JavaScript में स्ट्रिंग को बूलियन में बदलें

    JavaScript में स्ट्रिंग को बूलियन में बदलना एक सामान्य कार्य है, लेकिन इसके कई तरीके हैं जिनके अलग-अलग व्यवहार होते हैं। सही विधि चुनना महत्वपूर्ण है। उदाहरण { const val = inputEle.value.trim(); sampleEle.innerHTML = ; // विभिन्न विधियां sampleEle.innerH

  1. जावास्क्रिप्ट में टेम्पलेट स्ट्रिंग्स जावास्क्रिप्ट में टेम्पलेट स्ट्रिंग्स

    टेम्पलेट स्ट्रिंग्स को ES6 में एक स्ट्रिंग के अंदर एक्सप्रेशन एम्बेड करने की अनुमति देने के लिए पेश किया गया था। सिंगल कोट्स () या डबल कोट्स () के बजाय वे बैकटिक्स (``) का उपयोग करते हैं। वे स्ट्रिंग इंटरपोलेशन का एक बेहतर तरीका प्रदान करते हैं और एक्सप्रेशन को ${a+b} जैसे तरीके से एम्बेड किया जा स

  1. जावास्क्रिप्ट में नेस्टिंग टेम्पलेट स्ट्रिंग्स जावास्क्रिप्ट में नेस्टिंग टेम्पलेट स्ट्रिंग्स

    जावास्क्रिप्ट में नेस्टिंग टेम्पलेट स्ट्रिंग्स के लिए निम्नलिखित कोड है: उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title&g