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

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

द प्रॉम्प्ट

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

दृष्टिकोण

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

Understand what you're given:
	given a function
   	that takes some sort of input
 
Understand what you need to return:
   	a string
What's the first thing you need to do?
What are some options I can take, knowing that the input is a string?
Is there string methods I can use?
How can I look them up if I don't know what they are?
What do I do if the input is empty or it's a number or object? 
Maybe let's start by writing a for loop to loop through the string.
 		What comes next? ... and so on...

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

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

समाधान

समाधान #1:विभाजित() और लूप के लिए 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>

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

समाधान #2:मानचित्र विधि और स्लाइस के साथ विभाजित करें

<!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) => {
      // split the string on the spaces so that we know what we are working with.
      let arr = str.split(' ') // make sure there is a space in between the two quotes here
      //use the map method
      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 सरणी विधि का उपयोग करते हैं जिसे मैप टू लूप कहा जाता है और नए मान लौटाता है जो प्रत्येक शब्द के पहले वर्ण को कैपिटल करता है। यह स्पष्ट रूप से यह बताता है कि हम 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 ध्वज का अर्थ वैश्विक है और यह हमें उस पैटर्न के सभी उदाहरणों को देखने की अनुमति देता है। फिर हम उस रेगेक्स पैटर्न को एक फ़ंक्शन के साथ बदलने के लिए प्रतिस्थापन विधि का उपयोग करते हैं जो उस अक्षर को लेता है और उसे अपरकेस में लौटाता है।

अंतिम विचार

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

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

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

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

अधिक संसाधनों पर विचार करें:

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

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