জাভাস্ক্রিপ্ট: স্ট্রিংয়ের প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের করা

বেগুনারদের জন্য অনেক কোড চ্যালেঞ্জ রয়েছে যা আপকে ইঞ্জিনিয়ার মতো চিন্তা করতে শেখাবে। একটা চ্যালেঞ্জ হলো একটি দেওয়া স্ট্রিংয়ের প্রতিটি শব্দের প্রথম অক্ষর ক্যাপিটালাইজ করা। এই আর্টিকেলে প্রম্পট এবং জাভাস্ক্রিপ্টে কয়েকটি সম্ভাব্য সমাধান দেখব।

প্রম্পট (The Prompt)

একটি ফাংশন দেওয়া আছে, capitalize, যা str প্যারামিটার নেয়। সেটি সেই str-কে রিটার্ন করবে যেখানে প্রতিটি শব্দ ক্যাপিটালাইজড থাকবে। এজ কেসগুলোও চিন্তা করুন (খালি ইনপুট, ভুল টাইপের ইনপুট ইত্যাদি)।

অ্যাপ্রোচ (The Approach)

প্রম্পটটি ভালো পড়ুন। কীওয়ার্ডগুলো হাইলাইট করুন।
সমস্যা বুঝুন। কোড চ্যালেঞ্জের সবচেয়ে কঠিন অংশ হলো সমস্যা কী চাইছে তা বুঝা। সমস্যা বুঝলে সমাধান 半路ে পেয়ে যাবেন।
সিউডোকোড (pseudocode) লিখুন। এক্সিকিউটেবল কোড লাগবে না, প্লেইন ইংরেজি বা বাংলাতেই পারবে:

দেওয়া কী: একটি ফাংশন যা কিছু ইনপুট নেয়
রিটার্ন কী: একটি স্ট্রিং
প্রথম কী করব? স্ট্রিং হলে কী কী মেথড ব্যবহার করা যায়?
MDN ডকসে খুঁজে পাওয়া যায়।
ফর লুপ দিয়ে স্ট্রিংয়ের মধ্য দিয়ে লুপ করা যাক।
তারপর কী? ...
এভাবেই ধাপে ধাপে ভাঙুন। এজ কেস (খালি ইনপুট, নাম্বার ইনপুট) ও চিন্তা করুন।

সমস্যা ধাপে ধাপে ভাঙলে লজিক সহজ হয়। এটি এক্সপেরিমেন্টেশন ফেজ — এখানে কোনো ভুল উত্তর নেই, শুধু চিন্তা। ভুল চিন্তাও শেখা দেয় যে কোন পদ্ধতি কাজ করবে না।

আমি দেখেছি সমস্যা ভয়েস করে বোলে দিলে লজিক সহজে আসে। আপনার পদ্ধতি ভিন্ন হতে পারে, কিন্তু শেয়ার করলাম আপনার কাজে আসতে পারে। ছোট সমস্যায় সিউডোকোড একটু বেশি লাগতে পারে, কিন্তু প্র্যাক্টিস করলে বড় সমস্যায় সহজ হবে।

সমাধানসমূহ (The Solutions)

সমাধান ১: split() এবং for loop với 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>

এই সমাধানে স্ট্রিংকে স্পেস দিয়ে স্প্লিট করে অ্যারে বানানো হয়েছে। লুপ চালিয়ে প্রতিটি শব্দের প্রথম অক্ষর (charAt(0)) বড় হাতের (toUpperCase()) করে রিপ্লেস করা হয়েছে। শেষে join(' ') দিয়ে আবার স্ট্রিং বানানো হয়েছে।

সমাধান ২: 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(' ') 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>

এখানেও split() দিয়ে অ্যারে বানানো হয়েছে, তারপর ES6 map() মেথড দিয়ে প্রতিটি শব্দের প্রথম অক্ষর toUpperCase(), বাকি অংশ slice(1), এবং স্ট্রিং কনক্যাটেনেশন দিয়ে নতুন শব্দ তৈরি করা হয়েছে।

সমাধান ৩: রেগুলার এক্সপ্রেশন (Regular Expressions)

<!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 প্যাটার্ন স্ট্রিংয়ের শুরু (^) অথবা হোয়াইটস্পেস (\s) এর পর নন-হোয়াইটস্পেস ক্যারেক্টার (\S) খুঁজে বের করে। g ফ্ল্যাগ গ্লোবাল ম্যাচের জন্য। replace() দিয়ে ম্যাচ করা লেটারকে আপারকেসে কনভার্ট করা হয়েছে।

শেষ কথা

এই সমাধানগুলো একমাত্র সমাধান নয়। আপনি প্র্যাক্টিস করলে আরও ভিন্ন সমাধান বের করতে পারেন — এটাই ইঞ্জিনিয়ার মাইন্ডসেট। এজ কেস হ্যান্ডল করা হয়নি। খালি স্ট্রিং বা নাম্বার ইনপুট হলে কী করবেন? উপরের কোডে যোগ করুন।

হিন্ট: ব্যাং/এক্সক্লেমেশন পয়েন্ট (!) দিয়ে str আছে কিনা চেক করুন। MDN ডকসে টাইপ চেক করার মেথড খুঁজুন।

একটি অনুরোধ: জাভাস্ক্রিপ্ট রিভার্স স্ট্রিং কোড চ্যালেঞ্জও ট্রাই করুন!

আরও রিসোর্স:

রুবিতে রেগুলার এক্সপ্রেশন (রেগেক্স প্রায় ল্যাঙ্গুয়েজ অগনস্টিক) — সমাধান ৩-এর সিনট্যাক্স বুঝতে।
JavaScript Replace Text: A Step-By-Step Guide — replace মেথড নিয়ে টিউটোরিয়াল (সমাধান ১-এ ব্যবহৃত)।