JavaScript Reverse String कोड चैलेंज

उभरते सॉफ्टवेयर इंजीनियर्स और वेब डेवलपर्स के रूप में हम जिन पहले कोड/एल्गोरिदम चैलेंज को हल करने के लिए तैयार करते हैं, उनमें से एक यह देखना है कि क्या हम स्ट्रिंग को उल्टा करने का तरीका निकाल सकते हैं। याद रखें कि स्ट्रिंग सिर्फ वर्णों और स्पेस का संग्रह है। हमें जो करने की आवश्यकता है वह है उदाहरण के लिए, स्ट्रिंग "Hello World!" को उल्टा करना और "!dlroW olleH" लौटाना। इस समस्या को हल करने के कई तरीके हैं और हम यहां इस लेख में उनमें से कुछ को कवर करेंगे।

प्रॉम्प्ट

reverseString नामक एक फंक्शन लिखें, जो स्ट्रिंग को उल्टा करता है और उसे लौटाता है। उल्टा की जाने वाली स्ट्रिंग फंक्शन में आर्गुमेंट के रूप में दी जाती है।

समाधान # 1: For Loop

पहला, और शायद सबसे सीधा समाधान for लूप का उपयोग करना है और स्ट्रिंग के माध्यम से पीछे की ओर जाना है। हमें एक वेरिएबल इंस्टेंटिएट करने की आवश्यकता होगी, या बनाना होगा, जो नई उल्टी स्ट्रिंग को धारण करता है जैसे ही हम स्ट्रिंग में प्रत्येक वर्ण से गुजरते हैं:

function reverseString(str) {
    let newStr = '';
    for(let i = str.length - 1; i >= 0; i--) {
        newStr += str[i];
    }
    return newStr;
}

हम i को अंतिम इंडेक्स पर असाइन करते हैं (जिसे स्ट्रिंग की लंबाई से 1 घटाकर निकाला जाता है) ⇒ यह हमारा इनिशियलाइज़ेशन है और हमारे द्वारा लूप किया जाने वाला पहला इंडेक्स होगा। for लूप का दूसरा भाग हमारी शर्त ⇒ यह लूप को बताता है कि कब रुकना है। for लूप का तीसरा और अंतिम भाग यह है कि लूप पूरा होने और शर्त अभी भी सही होने के बाद हमारा i कितना इंक्रीमेंट होगा: i– अनिवार्य रूप से हमारे i को लेता है और इसे i - 1 पर पुनः असाइन करता है;

जैसे ही हम प्रत्येक पुनरावृत्ति के माध्यम से लूप करते हैं, हम str[i] पर प्रत्येक वर्ण लेते हैं और इसे newStr में जोड़ते हैं। फिर हम अपने for लूप के बाहर newStr लौटाते हैं और फंक्शन को समाप्त करते हैं।

इसे कोड एडिटर में स्वयं आज़माएं:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
    <script>
        function reverseString(str) {
            let newStr = '';
            for(let i = str.length - 1; i >= 0; i--) {
                newStr += str[i];
            }
            return newStr;
        }
        function showInput(e) {
            e.preventDefault();
            const inputStr = document.getElementById('user_input').value;
            if(inputStr.length < 1) {
                alert("उल्टा करने के लिए एक स्ट्रिंग दर्ज करें। पुनः प्रयास करें।")
            }
            let reversed = reverseString(inputStr);
            document.getElementById( 'display' ).innerHTML = reversed;
            document.getElementById('user_input').value = '';
        }
    </script>
    <style>
        * { box-sizing: border-box;; }
        body { width: 100%; max-width: 500px; height: 100vh; background: lightblue; margin: 0 auto; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; }
        div { display: flex; flex-flow: column wrap; align-items: flex-start; width: 100%; }
        form { display: flex; flex-flow: column wrap; width: 100%; background: lightgray; padding: 20px; border: 5px double slategray; }
        #user_input { width: 100%; }
        #submit_button { width: 25%; align-self: flex-end; margin-top: 10px; }
        #display { font-size: 1.4rem; height: 50px; }
    </style>
</head>
<body>
    <div>
        <form onsubmit="showInput(event);">
            <label id="label">उल्टा करने के लिए स्ट्रिंग दर्ज करें:</label>
            <input type="text" name="message" id="user_input"/>
            <input type="submit" onclick="showInput(event);" id="submit_button"/><br />
            <label>आपका इनपुट: </label>
            <p><span id="display"></span></p>
        </form>
    </div>
</body>
</html>

समाधान # 2: JavaScript का ES6 map मेथड

JavaScript में एक बिल्ट-इन ऐरे मेथड है जो ES6 में नया था जिसे map कहा जाता है। यह निर्दिष्ट मानों के साथ एक नया ऐरे लौटाता है। map मेथड के तीन पैरामीटर हैं: वर्तमान आइटम, आइटम का इंडेक्स, और उस ऐरे की एक प्रति जिससे यह आ रहा है। हम समाधान में अंतिम दो पैरामीटर्स का उपयोग करेंगे।

पहली चीज जो हमें करने की आवश्यकता है वह है split() मेथड का उपयोग करके स्ट्रिंग को ऐरे में विभाजित करना। यदि हम खाली स्ट्रिंग पर विभाजित करते हैं, तो मेथड हमें प्रत्येक व्यक्तिगत वर्ण के साथ एक ऐरे देगा। फिर हम उस नए ऐरे पर मैप करते हैं।

function reverseString(str) {
    let newArr = str.split('');
    let rev = newArr.map((letter, index, array) => {
        let swapIndex = array.length - index - 1;
        return array[swapIndex];
    });
    return rev.join('')
}

चूंकि हम अनिवार्य रूप से इंडेक्सेस को स्वैप करना चाहते हैं, हमें उस वर्ण का इंडेक्स निकालना होगा जिसे हम वर्तमान इंडेक्स के स्थान पर रखना चाहते हैं। वह वर्ण होगा जिसे हम लौटाते हैं।

ऐसा करने के लिए, हम ऐरे की लंबाई ढूंढते हैं, शून्य-आधारित ऐरे होने के कारण एक घटाते हैं, और फिर वर्तमान इंडेक्स की स्थिति घटाते हैं। हम जो array[swapIndex] लौटाते हैं वह अनिवार्य रूप से वर्तमान इंडेक्स का स्थान लेता है। यह हमें स्ट्रिंग में उल्टे वर्णों का एक ऐरे देता है।

अंतिम चीज जो हमें करने की आवश्यकता है वह है ऐरे को एक साथ स्ट्रिंग में जोड़ना और इसे लौटाना।

कोड एडिटर में समाधान का परीक्षण करें!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
    <script>
        function reverseString(str) {
            let newArr = str.split('');
            let rev = newArr.map((letter, index, array) => {
                let newIndex = array.length - index - 1;
                return array[newIndex];
            });
            return rev.join('')
        }
        function showInput(e) {
            e.preventDefault();
            const inputStr = document.getElementById('user_input').value;
            if(inputStr.length < 1) {
                alert("उल्टा करने के लिए एक स्ट्रिंग दर्ज करें। पुनः प्रयास करें।")
            }
            let reversed = reverseString(inputStr);
            document.getElementById( 'display' ).innerHTML = reversed;
            document.getElementById('user_input').value = '';
        }
    </script>
    <style>
        * { box-sizing: border-box;; }
        body { width: 100%; max-width: 500px; height: 100vh; background: lightblue; margin: 0 auto; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; }
        div { display: flex; flex-flow: column wrap; align-items: flex-start; width: 100%; }
        form { display: flex; flex-flow: column wrap; width: 100%; background: lightgray; padding: 20px; border: 5px double slategray; }
        #user_input { width: 100%; }
        #submit_button { width: 25%; align-self: flex-end; margin-top: 10px; }
        #display { font-size: 1.4rem; height: 50px; }
    </style>
</head>
<body>
    <div>
        <form onsubmit="showInput(event);">
            <label id="label">उल्टा करने के लिए स्ट्रिंग दर्ज करें:</label>
            <input type="text" name="message" id="user_input"/>
            <input type="submit" onclick="showInput(event);" id="submit_button"/><br />
            <label>आपका इनपुट: </label>
            <p><span id="display"></span></p>
        </form>
    </div>
</body>
</html>

याद रखने वाली बड़ी बात यह है कि map एक नया ऐरे लौटाता है - इसलिए हम मूल str/ऐरे को संशोधित नहीं कर रहे हैं जिसे पास किया गया है।

समाधान #3: बिल्ट-इन JavaScript मेथड

इस कोड चैलेंज को हल करने की यह विधि इसे एक-लाइनर में हल करने के लिए बिल्ट-इन फंक्शन्स/मेथड्स split(), reverse(), और join() का उपयोग करती है:

function reverseString(str) {
    return str.split('').reverse().join('');
}

इसे स्वयं चलाकर और परीक्षण करके देखें कि यह काम करता है!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
    <script>
        function reverseString(str) {
            return str.split('').reverse().join('');
        }
        function showInput(e) {
            e.preventDefault();
            const inputStr = document.getElementById('user_input').value;
            if(inputStr.length < 1) {
                alert("उल्टा करने के लिए एक स्ट्रिंग दर्ज करें। पुनः प्रयास करें।")
            }
            let reversed = reverseString(inputStr);
            document.getElementById( 'display' ).innerHTML = reversed;
            document.getElementById('user_input').value = '';
        }
    </script>
    <style>
        * { box-sizing: border-box;; }
        body { width: 100%; max-width: 500px; height: 100vh; background: lightblue; margin: 0 auto; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; }
        div { display: flex; flex-flow: column wrap; align-items: flex-start; width: 100%; }
        form { display: flex; flex-flow: column wrap; width: 100%; background: lightgray; padding: 20px; border: 5px double slategray; }
        #user_input { width: 100%; }
        #submit_button { width: 25%; align-self: flex-end; margin-top: 10px; }
        #display { font-size: 1.4rem; height: 50px; }
    </style>
</head>
<body>
    <div>
        <form onsubmit="showInput(event);">
            <label id="label">उल्टा करने के लिए स्ट्रिंग दर्ज करें:</label>
            <input type="text" name="message" id="user_input"/>
            <input type="submit" onclick="showInput(event);" id="submit_button"/><br />
            <label>आपका इनपुट: </label>
            <p><span id="display"></span></p>
        </form>
    </div>
</body>
</html>

अनिवार्य रूप से बिल्ट-इन reverse() मेथड क्या करता है वह map() मेथड (हमारे पिछले समाधान में उल्लिखित मेथड) हुड के तहत करता है; हालांकि, यह एक नया ऐरे लौटाने के बजाय मूल ऐरे को म्यूटेट करता है क्योंकि यह इन प्लेस उल्टा करता है। यदि आप बड़ी समस्या हल कर रहे हैं, तो आपको मूल ऐरे की एक प्रति बनाने की आवश्यकता हो सकती है ताकि आप जरूरत पड़ने पर मूल तक पहुंच सकें।

ये इस समस्या को हल करने के एकमात्र निश्चित तरीके नहीं हैं - ये बस इसे हल करने के कुछ अधिक लोकप्रिय तरीके हैं। प्रयोग करें और देखें कि क्या आप कोड एडिटर में ऊपर अपने लिए अन्य समाधान ढूंढ सकते हैं। यदि आप इसे स्क्रीन पर देखना चाहते हैं तो बस reverseString() फंक्शन को संपादित करें और कुछ भी नहीं।