आप जावास्क्रिप्ट में एक स्ट्रिंग को कैसे प्रारूपित करते हैं?

जावास्क्रिप्ट में, एक स्ट्रिंग वर्णों का एक समूह है जो या तो एकल या दोहरे उद्धरण चिह्नों की एक जोड़ी से घिरा हुआ है। जावास्क्रिप्ट में स्ट्रिंग्स को फॉर्मेट करने के कई तरीके हैं।

स्ट्रिंग्स को संयोजित करने के लिए आप विशिष्ट विधियों या ऑपरेटरों का उपयोग कर सकते हैं। आप यह तय करने के लिए विशिष्ट संचालन भी कर सकते हैं कि कौन सी स्ट्रिंग कहाँ और कब दिखाई दे।

कॉन्सटेनेशन विधियों और टेम्प्लेट लिटरल का उपयोग करके अपने जावास्क्रिप्ट स्ट्रिंग्स को प्रारूपित करना सीखें।

स्ट्रिंग संघनन

जावास्क्रिप्ट आपको कई दृष्टिकोणों का उपयोग करके स्ट्रिंग्स को जोड़ने की अनुमति देता है। एक उपयोगी उपाय है संक्षिप्त () तरीका। यह विधि दो या दो से अधिक तारों का उपयोग करती है। यह एकल कॉलिंग स्ट्रिंग का उपयोग करता है और तर्कों के रूप में एक या अधिक स्ट्रिंग्स लेता है।

कॉन्स्ट फर्स्टनाम = "जॉन";
स्थिरांक अंतिम नाम = "हरिणी";
होने देना स्ट्रिंगवैल;
stringVal = firstName.concat ("", उपनाम);
सांत्वना देनालॉग (स्ट्रिंगवैल);

यहां, कॉन्सट कॉलिंग स्ट्रिंग (फर्स्टनाम) में स्ट्रिंग तर्कों (रिक्त स्थान और अंतिम नाम) में शामिल हो जाता है। कोड तब परिणामी नई स्ट्रिंग को एक चर (स्ट्रिंगवैल) में संग्रहीत करता है और ब्राउज़र कंसोल पर नया मान प्रिंट करता है:

स्ट्रिंग्स के संग्रह को जोड़ने का दूसरा तरीका प्लस ऑपरेटर का उपयोग करना है। यह विधि आपको नए तार बनाने के लिए स्ट्रिंग चर और स्ट्रिंग अक्षर को संयोजित करने की अनुमति देती है।

कॉन्स्ट फर्स्टनाम = "जॉन";
स्थिरांक मध्यनाम = "माइक";
स्थिरांक अंतिम नाम = "हरिणी";
होने देना स्ट्रिंगवैल;
स्ट्रिंगवैल = फर्स्टनाम + "" + मध्यनाम + "" + अंतिम नाम;
सांत्वना देनालॉग (स्ट्रिंगवैल);

उपरोक्त कोड निम्न आउटपुट को कंसोल पर प्रिंट करता है:

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

कॉन्स्ट फर्स्टनाम = "जॉन";
स्थिरांक अंतिम नाम = "हरिणी";
होने देना स्ट्रिंगवैल;
स्ट्रिंगवैल = पहला नाम;
स्ट्रिंगवैल + = "";
स्ट्रिंगवैल + = अंतिम नाम;
सांत्वना देनालॉग (स्ट्रिंगवैल);

यह कोड रिक्त स्थान और अंतिम नाम चर के मान को प्रथम नाम चर में जोड़ता है, जो निम्न आउटपुट का उत्पादन करता है:

टेम्पलेट शाब्दिक

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

होने देना एचटीएमएल;
एचटीएमएल = `<उल>
<ली> नाम: जॉन डो </li>
<ली> आयु: 24 </li>
<ली> काम: सॉफ्टवेयर इंजीनियर </li>
</ul>`;
दस्तावेज़.body.innerHTML = html;

उपरोक्त जावास्क्रिप्ट कोड उपयोग करता है एचटीएमएल ब्राउज़र में तीन आइटम की सूची प्रिंट करने के लिए:

टेम्प्लेट लिटरल (या टेम्प्लेट लिटरल से पहले) के बिना समान आउटपुट प्राप्त करने के लिए, आपको उद्धरण चिह्नों का उपयोग करना होगा। हालाँकि, आप कोड को कई पंक्तियों में विस्तारित नहीं कर पाएंगे जैसा कि आप टेम्पलेट शाब्दिक के साथ कर सकते हैं।

होने देना एचटीएमएल;
एचटीएमएल = "<उल><ली>नाम: जॉन डो</li><ली>आयु: 24</li><ली>काम: सॉफ्टवेयर इंजीनियर</li></ul>";
दस्तावेज़.body.innerHTML = html;

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

टेम्प्लेट लिटरल आपको इंटरपोलेशन नामक एक प्रक्रिया के माध्यम से अपने जावास्क्रिप्ट स्ट्रिंग्स में एक्सप्रेशन का उपयोग करने देते हैं। स्ट्रिंग इंटरपोलेशन के साथ आप अपने स्ट्रिंग्स में एक्सप्रेशन या वेरिएबल्स का उपयोग करके एम्बेड कर सकते हैं ${अभिव्यक्ति} प्लेसहोल्डर। यह वह जगह है जहाँ जावास्क्रिप्ट टेम्पलेट शाब्दिक का मूल्य वास्तव में स्पष्ट हो जाता है।

चलो उपयोगकर्ता नाम = "जेन डोए";
होने देना उम्र = 21;
नौकरी देना = "वेब डेवलपर";
होने देना अनुभव = 3;
होने देना एचटीएमएल;
एचटीएमएल = `<उल>
<ली> नाम: ${userName} </li>
<ली> उम्र: ${आयु} </li>
<ली> पद का नाम: ${नौकरी} </li>
<ली> अनुभव के वर्ष: ${अनुभव} </li>
<ली> डेवलपर स्तर: ${experience < 5? "जूनियर से इंटरमीडिएट": "वरिष्ठ"} </li>
</ul>`;
दस्तावेज़.body.innerHTML = html;

उपरोक्त कोड कंसोल में निम्न आउटपुट उत्पन्न करता है:

के पहले चार तर्क ${अभिव्यक्ति} प्लेसहोल्डर स्ट्रिंग चर हैं, लेकिन पांचवां एक सशर्त अभिव्यक्ति है। अभिव्यक्ति एक चर (अनुभव) के मूल्य पर निर्भर करती है, यह निर्धारित करने के लिए कि इसे ब्राउज़र में क्या प्रदर्शित करना चाहिए।

जावास्क्रिप्ट के साथ अपने वेबपेज पर स्वरूपण तत्व

वेबपेज विकास के साथ अपने कार्यात्मक जुड़ाव के अलावा, जावास्क्रिप्ट वेबपेज के डिजाइन और लेआउट को प्रभावित करने के लिए HTML के साथ काम करता है। यह वेबपेज पर दिखाई देने वाले टेक्स्ट में हेरफेर कर सकता है, जैसा कि टेम्प्लेट लिटरल के मामले में होता है।

यह HTML को छवियों में भी परिवर्तित कर सकता है और उन्हें वेबपृष्ठ पर प्रदर्शित कर सकता है।