जावास्क्रिप्ट: स्ट्रिंग में प्रत्येक शब्द का पहला अक्षर कैपिटलाइज़ करें

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

प्रॉम्प्ट

एक फंक्शन दिया गया है, capitalize, जो पैरामीटर के रूप में str लेता है, उस str को लौटाएं जिसमें हर शब्द कैपिटलाइज़ हो। अपने समाधान में एज केसेस के बारे में सोचने का प्रयास करें (जैसे कोई इनपुट नहीं, गलत प्रकार का इनपुट, आदि)।

दृष्टिकोण

1. प्रॉम्प्ट पर फिर से नज़र डालें। शब्दों में मिलने वाले किसी भी कीवर्ड को लिखें या हाइलाइट करें।
2. शब्द समस्या का अर्थ एक साथ जोड़ें। कोड चुनौतियों का सबसे कठिन हिस्सा यह पता लगाने की कोशिश करना है कि समस्या आपसे क्या करने के लिए कह रही है। समस्या को समझना आपको इसे हल करने में सक्षम होने की दिशा में एक लंबा रास्ता तय करने में मदद करेगा।
3. संभावित समाधान का स्यूडोकोड लिखें। यह वास्तविक कोड नहीं होना चाहिए (इसे आपके IDE या ब्राउज़र कंसोल में एक्जीक्यूटेबल होने की आवश्यकता नहीं है - सादा अंग्रेजी ठीक है):

समझें कि आपको क्या दिया गया है: एक फंक्शन दिया गया है जो किसी प्रकार का इनपुट लेता है समझें कि आपको क्या लौटाना है: एक स्ट्रिंग पहली चीज क्या है जो आपको करने की आवश्यकता है? कुछ विकल्प क्या हैं जिन्हें मैं ले सकता हूं, यह जानते हुए कि इनपुट एक स्ट्रिंग है? क्या स्ट्रिंग मेथड्स हैं जिनका मैं उपयोग कर सकता हूं? अगर मुझे नहीं पता कि वे क्या हैं तो मैं उन्हें कैसे देखूं? अगर इनपुट खाली है या यह नंबर या ऑब्जेक्ट है तो मैं क्या करूं? शायद आइए स्ट्रिंग के माध्यम से लूप करने के लिए फॉर लूप लिखकर शुरू करें। आगे क्या? ... और इसी तरह...

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

मैंने पाया है कि अगर मैं समस्या को जोर से समझाकर तोड़ सकता हूं, तो लॉजिक मुझे आसानी से आता है। आपका माइलेज आपके दृष्टिकोण पर भिन्न हो सकता है, लेकिन मैं कम से कम इसे सुझाव देना चाहता था अगर यह आपके लिए काम करता है! इस तरह की छोटी समस्या के लिए स्यूडोकोड थोड़ा बहुत लगता है, लेकिन अगर आप अभी अवधारणा का अभ्यास करते हैं, तो जब आप काफी कठिन समस्याओं पर काम कर रहे होंगे तो यह आपके लिए आसान हो जाएगा।

समाधान

समाधान #1: split() और फॉर लूप string.replace() और charAt() मेथड्स के साथ

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>for loop</title> </head> <body> <div id="root"></div> <script async defer> let capitalize = (str) => { let arr = str.split(' '); for(let i = 0; i < arr.length; i++ ) { arr[i] = arr[i].replace(arr[i].charAt(0), arr[i].charAt(0).toUpperCase()); } return arr.join(' '); } let root = document.getElementById('root'); root.innerHTML = JSON.stringify(capitalize('the quick brown fox jumped over the lazy dog')); </script> </body> </html>

इस पहले समाधान में, हम स्ट्रिंग को उसके स्पेसेस पर विभाजित करते हैं। यह हमें प्रत्येक व्यक्तिगत शब्द के साथ अपने इंडेक्स के रूप में एक ऐरे देता है। ऐरे पर लूप करने से हमें प्रत्येक स्ट्रिंग के व्यक्तिगत इंडेक्स तक पहुंचने की क्षमता मिलती है। हम इंडेक्स i पर स्ट्रिंग (इस मामले में स्ट्रिंग arr[i] है) को इंडेक्स 0 पर स्ट्रिंग कैरेक्टर (arr[i].charAt(0) को उसके अपर केस मान से बदलने के परिणाम के रूप में पुन: असाइन करते हैं। फिर हम ऐरे को स्पेसेस के साथ शब्दों के बीच स्ट्रिंग में फिर से जोड़ते हैं।

समाधान #2: split के साथ map मेथड और slice

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Map</title> </head> <body> <div id="root"></div> <script async defer> let capitalize = (str) => { // स्ट्रिंग को स्पेसेस पर विभाजित करें ताकि हम जान सकें कि हम किसके साथ काम कर रहे हैं। let arr = str.split(' ') // सुनिश्चित करें कि यहां दो कोट्स के बीच स्पेस है // map मेथड का उपयोग करें arr.map((word, index, array) => { array[index] = array[index][0].toUpperCase() + array[index].slice(1); return array[index]; }) console.log(arr) return arr.join(' '); } let root = document.getElementById('root'); root.innerHTML = JSON.stringify(capitalize('the quick brown fox jumped over the lazy dog')); </script> </body> </html>

इस समाधान में, हम बहुत समान रूप से शुरू करते हैं, लेकिन फिर हम ES6 ऐरे मेथड map का उपयोग करके ऐरे पर लूप करते हैं और नए मान लौटाते हैं जो प्रत्येक शब्द के पहले कैरेक्टर को कैपिटलाइज़ करता है। यह पहले अक्षर के लिए toUpperCase() मेथड, बाकी स्ट्रिंग के लिए slice() मेथड, और नए शब्द का संस्करण प्राप्त करने के लिए स्ट्रिंग कंकेटनेशन को स्पष्ट रूप से बताकर करता है। फिर हम ऐरे को जोड़ते हैं और इसे लौटाते हैं।

समाधान #3: रेगुलर एक्सप्रेशन्स

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> </head> <body> <div id="root"></div> <script async defer> let capitalize = (str) => { let regex = /(^|\s)\S/g return str.replace(regex, letter => letter.toUpperCase()); } let root = document.getElementById('root'); root.innerHTML = JSON.stringify(capitalize('the quick brown fox jumped over the lazy dog')); </script> </body> </html>

इस समाधान में, हम रेगुलर एक्सप्रेशन का उपयोग करके सभी नॉन-व्हाइटस्पेस कैरेक्टर्स ( \S ) को ढूंढते हैं जो या तो स्ट्रिंग की शुरुआत में ( ^ ) या व्हाइटस्पेस कैरेक्टर ( \s ) के बाद होते हैं। अंत में g फ्लैग का अर्थ ग्लोबल है और यह हमें उस पैटर्न के सभी इंस्टेंस ढूंढने की अनुमति देता है। फिर हम replace मेथड का उपयोग करके उस रेगेक्स पैटर्न को फंक्शन से बदलते हैं जो उस अक्षर को लेता है और उसे अपरकेस में लौटाता है।

अंतिम विचार

ये समाधान किसी भी तरह से इस समस्या के एकमात्र समाधान नहीं हैं। अधिक संभावना है, जैसे-जैसे आप इनमें से अधिक करना शुरू करेंगे, आप ऐसे समाधानों के साथ आएंगे जो किसी लेख या ब्लॉग पोस्ट में प्रस्तुत समाधानों से भिन्न हो सकते हैं। यह अच्छी बात है। इसका मतलब है कि आप इंजीनियर की तरह सोचना शुरू कर रहे हैं - और यही लक्ष्य है।

इन समाधानों में एज केसेस को हैंडल नहीं किया गया था। यदि आपका आर्ग्यूमेंट खाली है या नंबर है तो आपको क्या करना चाहिए? उपरोक्त कोड में उन एज केसेस को हैंडल करके जोड़ने का प्रयास करें।

संकेत: सशर्त रूप से यह पता लगाने के लिए कि str मौजूद है या नहीं, बैंग/विस्मयादिबोधक चिह्न का उपयोग करें। MDN डॉक्स देखें कि क्या कोई मेथड है जब आप जरूरी नहीं जानते कि यह क्या है, तो किसी चीज़ का प्रकार पता लगाने के लिए।

एक और बात: अगर आपने पहले से नहीं किया है तो जावास्क्रिप्ट रिवर्स स्ट्रिंग कोड चैलेंज में अपना हाथ आजमाएं!

विचार करने के लिए अधिक संसाधन: 

रूबी में रेगुलर एक्सप्रेशन्स का उपयोग - यह रूबी को समर्पित है, लेकिन रेगेक्स अधिकांश भाग के लिए भाषा-अज्ञेय है - समाधान #3 में RegExp सिंटैक्स के बारे में अधिक जानने के लिए इसे देखें।

जावास्क्रिप्ट रिप्लेस टेक्स्ट: चरण-दर-चरण गाइड - रिप्लेस मेथड को समर्पित ट्यूटोरियल, समाधान #1 में उपयोग किया गया।