परिचय
स्ट्रिंग्स के साथ काम करते समय, ऐसी स्थितियाँ उत्पन्न हो सकती हैं जिनके लिए हमें ऐसी स्ट्रिंग में एक विशिष्ट मान को गतिशील रूप से जोड़ने की आवश्यकता होती है ताकि यह अभी भी एक स्ट्रिंग लौटाए, ऐसा करने का कार्य स्ट्रिंग इंटरपोलेशन के रूप में जाना जाता है।
यह गतिशील मान एक चर, स्थिति या कुछ और हो सकता है जिसमें स्ट्रिंग में एम्बेड किया जाने वाला वास्तविक मान हो।
इस गाइड में, हम देखेंगे कि रिएक्ट में स्ट्रिंग इंटरपोलेशन को कैसे लागू किया जाए, विभिन्न उदाहरणों को ध्यान में रखते हुए जिन्हें स्ट्रिंग इंटरपोलेशन की आवश्यकता हो सकती है और उन्हें कैसे प्राप्त किया जा सकता है।
ES5 और ES6 में स्ट्रिंग इंटरपोलेशन
स्ट्रिंग इंटरपोलेशन को दो तरीकों से पूरा किया जा सकता है: कॉन्सटेनेशन और टेम्प्लेट लिटरल। हालांकि कुछ का तर्क है कि संयोजन स्ट्रिंग इंटरपोलेशन नहीं है, स्ट्रिंग इंटरपोलेशन प्लेसहोल्डर प्रतिस्थापन करके स्ट्रिंग बनाने की क्षमता को संदर्भित करता है, जो कि संयोजन स्पष्ट रूप से करता है।
ES6 में टेम्प्लेट लिटरल्स की शुरुआत से पहले, हमने हमेशा कॉन्सटेनेशन का उपयोग किया था, जो मल्टी-लाइन स्ट्रिंग्स के साथ काम करते समय बहुत मुश्किल हो जाता है, जिसमें कई वेरिएबल्स के प्रतिस्थापन की आवश्यकता होती है। जब ES6 में टेम्प्लेट लिटरल्स पेश किए गए, तो उन्हें लागू करना कहीं अधिक आसान साबित हुआ, विशेष रूप से लंबी या बहु-लाइन स्ट्रिंग्स के लिए जिसमें हम एक्सप्रेशन एम्बेड करना चाहते हैं।
इस गाइड में, हम दोनों विधियों को देखेंगे और फिर टेम्प्लेट लिटरल्स के साथ कुछ उदाहरण प्रदर्शित करेंगे, जो कि अनुशंसित तरीका है।
संयोजन के साथ प्रतिक्रिया में स्ट्रिंग इंटरपोलेशन
संयोजन के लिए मानक विधि का उपयोग करना है +
विशेष चर या राज्य के आसपास ऑपरेटर:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
उपरोक्त कोड में, हमारे पास . की स्थिति है fontSize
जिसका मूल्य . है large
. हम चाहते हैं कि कक्षा को गतिशील रूप से लाया जाए - उदाहरण के लिए यह हो सकता है text-small
, text-large
, text-medium
, आदि राज्य के आधार पर, एक अलग className
इस प्रकार शीर्षक पर लागू होगा!
संयोजन के साथ, हम पहले अपनी वास्तविक स्ट्रिंग रखेंगे और फिर इसका उपयोग करेंगे+
वास्तविक स्ट्रिंग के साथ चर को प्रक्षेपित करने के लिए ऑपरेटर, ताकि यह प्रक्षेपित मान वापस कर सके:
उपरोक्त विधि जटिल हो जाती है जब हम दो या दो से अधिक चर होते हैं, और विशेष रूप से यदि तार किसी अन्य स्ट्रिंग के भीतर जोड़े जाते हैं, न कि अंत तक।
टेम्पलेट लिटरल्स के साथ प्रतिक्रिया करने के लिए स्ट्रिंग इंटरपोलेशन
स्ट्रिंग इंटरपोलेशन से निपटने के लिए यह सबसे अच्छी विधि है। इसे ES6 में जोड़ा गया था और तब से यह स्ट्रिंग इंटरपोलेशन के लिए सबसे अधिक इस्तेमाल किया जाने वाला तरीका बन गया है। स्ट्रिंग टेम्प्लेट लिटरल्स का उपयोग करते हुए, पिछले उदाहरण को दोहराएं:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
जैसा कि हम ऊपर दिए गए कोड में देख सकते हैं, हम अब टेम्पलेट शाब्दिक में प्लस ऑपरेटर का उपयोग नहीं करते हैं, इसके बजाय, हम पूरे स्ट्रिंग के लिए बैकटिक्स का उपयोग करते हैं और फिर अपने चर और गतिशील मूल्यों को सम्मिलित करने के लिए डॉलर चिह्न और घुंघराले ब्रेसिज़ का उपयोग करते हैं।
बयान का मूल्यांकन किया जाता है और const fontSize
स्ट्रिंग में डाला जाता है।
आइए कुछ और रिएक्ट स्ट्रिंग इंटरपोलेशन उदाहरण देखें!
रिएक्ट में स्टाइल वैल्यू पास करने के लिए स्ट्रिंग इंटरपोलेशन का उपयोग कैसे करें
ऐसी स्थिति में जब हमारे पास हमारे स्टाइल डेटा को एक वेरिएबल में संग्रहीत किया जाता है, जिसका उपयोग हम रिएक्ट में आंतरिक रूप से टेक्स्ट को स्टाइल करने के लिए करना चाहते हैं, हम टेम्प्लेट शाब्दिक का उपयोग कर सकते हैं:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
जैसा कि हमने पहले कहा था, हमारे प्लेसहोल्डर को पकड़ने के लिए डॉलर के चिह्न और घुंघराले ब्रेसिज़ का उपयोग किया जाता है, और यह शैली को उचित तरीके से वापस कर देगा:
हम घुंघराले ब्रेसिज़ के भीतर भी मूल्यांकन कर सकते हैं, मान लीजिए कि हम संख्या को गुणा करना चाहते हैं:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
प्रतिक्रिया में भावों के साथ स्ट्रिंग इंटरपोलेशन का उपयोग कैसे करें
अब तक, हमने देखा है कि हम मूल्यांकन कर सकते हैं; यह भी ध्यान रखना महत्वपूर्ण है कि हम अभिव्यक्ति के आधार पर सही मूल्य प्राप्त करने के लिए घुंघराले ब्रेसिज़ के भीतर भाव जोड़ सकते हैं और इसका उपयोग कर सकते हैं:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
टेम्प्लेट लिटरल्स के साथ मल्टीपल लाइन स्ट्रिंग को इंटरपोलेट कैसे करें
जैसा कि हमने पहले कहा, टेम्प्लेट शाब्दिक प्लेसहोल्डर को कई लाइनों के तार में जोड़ना आसान बनाता है:
const App = () => { let user = { name: 'John Doe', age: 14, hobby: 'basket ball', }; let sentence = `The fact that ${user.name} is ${user.age} years old and his hobby is ${user.hobby} amazes me.`; return ( <div className="container"> <div> <p>{sentence}</p> </div> </div> );
};
उपरोक्त कोड में, हम देखते हैं कि कॉन्सटेनेशन का उपयोग करने की तुलना में टेम्प्लेट शाब्दिक का उपयोग करना कितना आसान है:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
टेम्प्लेट लिटरल्स के साथ लॉजिकल ऑपरेटर्स का उपयोग कैसे करें
अब तक हमने देखा है कि टर्नरी ऑपरेटरों के साथ अभिव्यक्ति कैसे पास की जाती है, यह भी सबसे अच्छा है कि हम देखते हैं कि लॉजिकल ऑपरेटर टेम्पलेट अक्षर के साथ भी काम कर सकते हैं:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
निष्कर्ष
हमने इस आलेख में दो मानक विधियों का उपयोग करके स्ट्रिंग इंटरपोलेशन को कार्यान्वित करने का तरीका सीखा, साथ ही साथ टेम्पलेट अक्षर कितने शक्तिशाली हो सकते हैं। टेम्प्लेट लिटरल्स की शुरुआत के बाद से, अधिकांश लोग उपयोग की सादगी और बेहतर कोड पठनीयता के कारण उनका उपयोग करना पसंद करते हैं।
- '
- &
- a
- क्षमता
- लेखा
- हासिल
- अधिनियम
- जोड़ा
- हालांकि
- हमेशा
- अन्य
- अनुप्रयोग
- लागू
- दृष्टिकोण
- चारों ओर
- लेख
- बन
- BEST
- बेहतर
- कक्षा
- कोड
- तुलना
- जटिल
- कंटेनर
- शामिल हैं
- सका
- बनाना
- तिथि
- व्यवहार
- निर्भर करता है
- विभिन्न
- मुश्किल
- डॉलर
- गतिशील
- एम्बेडेड
- विशेष रूप से
- आदि
- मूल्यांकन
- उदाहरण
- उदाहरण
- भाव
- प्रथम
- गाइड
- पकड़
- कैसे
- How To
- HTTPS
- लागू करने के
- महत्वपूर्ण
- उदाहरण
- IT
- बड़ा
- सीखा
- लाइन
- पंक्तियां
- देखिए
- बनाना
- निर्माण
- तरीकों
- अधिक
- अधिकांश
- विभिन्न
- गुणा
- संख्या
- ऑपरेटर
- ऑपरेटरों
- विशेष
- स्टाफ़
- शक्तिशाली
- प्रतिक्रिया
- संदर्भित करता है
- दोहराना
- की आवश्यकता होती है
- वापसी
- रिटर्न
- कहा
- हस्ताक्षर
- के बाद से
- स्थिति
- So
- कुछ
- विशिष्ट
- मानक
- राज्य
- कथन
- फिर भी
- अंदाज
- ले जा
- RSI
- us
- उपयोग
- मूल्य
- विभिन्न
- तरीके
- अंदर
- काम
- काम कर रहे
- एक्सएमएल
- साल