কম্পিউটার
 Computer >> কম্পিউটার >  >> প্রোগ্রামিং >> JavaScript

জাভাস্ক্রিপ্ট রিভার্স স্ট্রিং কোড চ্যালেঞ্জ

উদীয়মান সফ্টওয়্যার প্রকৌশলী এবং ওয়েব বিকাশকারী হিসাবে আমরা যে প্রথম কোড/অ্যালগরিদম চ্যালেঞ্জগুলি সমাধান করার জন্য সেট করেছি তা হল আমরা কীভাবে একটি স্ট্রিংকে বিপরীত করতে পারি তা নির্ধারণ করতে পারি কিনা। মনে রাখবেন যে একটি স্ট্রিং শুধুমাত্র অক্ষর এবং স্থানগুলির একটি সংগ্রহ। আমাদের যা করতে হবে তা হল বিপরীত করার চেষ্টা করা, উদাহরণস্বরূপ, স্ট্রিং "হ্যালো ওয়ার্ল্ড!" এবং "!dlroW olleH" ফেরত দিন। আমরা এই সমস্যাটি সমাধান করতে পারি এমন বিভিন্ন উপায় রয়েছে এবং আমরা এই নিবন্ধে সেগুলির কয়েকটি কভার করব।

প্রম্পট

একটি ফাংশন লিখুন, reverseString , যে একটি স্ট্রিং বিপরীত এবং এটি ফেরত. উল্টাতে স্ট্রিং ফাংশনে একটি আর্গুমেন্ট হিসাবে দেওয়া হয়।

সমাধান # 1:লুপের জন্য

প্রথম, এবং সম্ভবত সবচেয়ে সহজবোধ্য সমাধানগুলির মধ্যে একটি হল লুপের জন্য a ব্যবহার করা এবং স্ট্রিংয়ের মাধ্যমে পিছনের দিকে যাওয়া। স্ট্রিং-এর প্রতিটি অক্ষরকে পাস করার সাথে সাথে আমাদের একটি পরিবর্তনশীলকে ইনস্ট্যান্টিয়েট বা তৈরি করতে হবে যা নতুন বিপরীত স্ট্রিং ধারণ করে:

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

আমরা i বরাদ্দ করি শেষ সূচকে (যা বের করা হয় যখন আমরা স্ট্রিংটির দৈর্ঘ্য থেকে 1 নিই) ⇒ এটি আমাদের শুরুকরণ এবং প্রথম সূচক হিসাবে পরিবেশন করা হবে যা আমরা লুপ করি। লুপের দ্বিতীয় অংশ হল আমাদের কন্ডিশন ⇒ এটি লুপকে বলে কখন থামতে হবে। লুপের তৃতীয় এবং শেষ অংশ হল আমাদের 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("Must enter a string to reverse. Try again.")
               }
               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">Enter a String to Reverse:</label>
               <input type="text" name="message" id="user_input"/>
               <input type="submit" onclick="showInput(event);" id="submit_button"/><br />
               <label>Your input: </label>
               <p><span id="display"></span></p>
           </form>
          
          
       </div>
   </body>
</html>

সমাধান # 2:জাভাস্ক্রিপ্টের ES6 মানচিত্র পদ্ধতি

জাভাস্ক্রিপ্টে একটি অন্তর্নির্মিত অ্যারে পদ্ধতি রয়েছে যা ES6 এ নতুন ছিল যাকে মানচিত্র বলা হয় . এটি যা করে তা হল এটি নির্দিষ্ট মান সহ একটি নতুন অ্যারে প্রদান করে। মানচিত্র পদ্ধতিতে তিনটি পরামিতি রয়েছে:বর্তমান আইটেম, আইটেমের সূচক এবং এটি যে অ্যারের থেকে আসছে তার একটি অনুলিপি। আমরা সমাধানে শেষ দুটি প্যারামিটার ব্যবহার করব।

আমাদের প্রথমে যা করতে হবে তা হল split() ব্যবহার করে স্ট্রিংটিকে একটি অ্যারেতে বিভক্ত করা পদ্ধতি যদি আমরা একটি খালি স্ট্রিং এ বিভক্ত করি, তাহলে পদ্ধতিটি আমাদের প্রতিটি স্বতন্ত্র অক্ষর সহ একটি অ্যারে দেবে। আমরা তারপর ম্যাপ উপর যে নতুন অ্যারে ব্যবহার.

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

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('')
           }
রিটার্ন করুন

যেহেতু আমরা মূলত সূচীগুলি অদলবদল করতে চাই, তাই আমাদের বর্তমান সূচকের জায়গায় যে চরিত্রটি রাখতে চাই তার সূচকটি বের করতে হবে। সেই চরিত্রটিই হবে যা আমরা ফিরিয়ে দিয়েছি।

এটি করার জন্য, আমরা অ্যারের দৈর্ঘ্য খুঁজে পাই, বিয়োগ এক কারণ আমরা একটি শূন্য-ভিত্তিক অ্যারে, এবং তারপর বর্তমান সূচকের অবস্থানটি সরিয়ে নিই। আমরা যে অ্যারে [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("Must enter a string to reverse. Try again.")
               }
               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">Enter a String to Reverse:</label>
               <input type="text" name="message" id="user_input"/>
               <input type="submit" onclick="showInput(event);" id="submit_button"/><br />
               <label>Your input: </label>
               <p><span id="display"></span></p>
           </form>
          
          
       </div>
   </body>
</html>

মনে রাখতে হবে যে মানচিত্রটি একটি নতুন অ্যারে প্রদান করে – তাই আমরা পাস করা আসল স্ট্র/অ্যারে পরিবর্তন করছি না।

সমাধান #3:অন্তর্নির্মিত জাভাস্ক্রিপ্ট পদ্ধতি

এই কোড চ্যালেঞ্জ সমাধানের এই পদ্ধতিটি বিল্ট ইন ফাংশন/পদ্ধতি 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("Must enter a string to reverse. Try again.")
               }
               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">Enter a String to Reverse:</label>
               <input type="text" name="message" id="user_input"/>
               <input type="submit" onclick="showInput(event);" id="submit_button"/><br />
               <label>Your input: </label>
               <p><span id="display"></span></p>
           </form>
          
          
       </div>
   </body>
</html>

মূলত কি বিল্ট-ইন reverse() পদ্ধতি হল map() মেথড (যে পদ্ধতিটি আমরা আমাদের পূর্ববর্তী সমাধানে উল্লেখ করেছি) হুডের নিচে; তবে , এটি স্থানে বিপরীত হওয়ার কারণে এটি একটি নতুন ফেরত দেওয়ার পরিবর্তে আসল অ্যারেটিকে পরিবর্তন করে . আপনি যদি একটি বড় সমস্যা সমাধান করছেন, তাহলে আপনাকে মূল অ্যারের একটি অনুলিপি তৈরি করতে হতে পারে যাতে আপনি এখনও প্রয়োজনে আসলটি অ্যাক্সেস করতে পারেন।

এই সমস্যাটি সমাধানের একমাত্র নির্দিষ্ট উপায় নয় - এটি সমাধান করার আরও জনপ্রিয় উপায়গুলির মধ্যে কয়েকটি। পরীক্ষা করুন এবং দেখুন আপনি উপরের কোড এডিটরে নিজের জন্য অন্য সমাধান পেতে পারেন কিনা। শুধু reverseString() সম্পাদনা করুন ফাংশন এবং অন্য কিছু না যদি আপনি এটি স্ক্রিনে দেখতে চান।


  1. জাভাস্ক্রিপ্ট অ্যারে বিপরীত()

  2. জাভাস্ক্রিপ্ট একটি স্ট্রিংকে বুলিয়ানে রূপান্তর করুন

  3. জাভাস্ক্রিপ্টে অ্যারে রিভার্স()

  4. জাভাস্ক্রিপ্টে স্ট্রিং পুনরাবৃত্তি করবেন?