มี beginner-friendly code challenges หลายอย่างที่ช่วยให้คิดแบบ engineer ได้ หนึ่งในนั้นคือ challenge ที่ทำให้ตัวอักษรแรกของทุกคำใน string ที่ให้มาเป็นตัวพิมพ์ใหญ่ ในบทความนี้ เราจะดู prompt และ several possible solutions ใน JavaScript
The Prompt
Given a function, capitalize, that takes in str as a parameter, return that str with every word capitalized. Try to think of edge cases in your solution (such as no input, the wrong type of input, etc).
The Approach
- ดู prompt อีกครั้ง จดหรือ highlight keywords ที่เจอใน wording
- ประกอบความหมายของ word problem ส่วนหนึ่งที่ยากที่สุดของ code challenges คือพยายามเข้าใจว่าโจทย์ขอให้ทำอะไร การเข้าใจปัญหาจะช่วยคุณไปไกลในการแก้ปัญหา
- Pseudocode out a possible solution ไม่ต้องเป็น real code (ไม่ต้อง executable ใน IDE หรือ browser console – plain English ก็พอ):
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...
แยกปัญหา step-by-step อย่างละเอียด จะช่วยคิด edge cases – กรณีที่อาจมี incorrect input ผ่านมาหรือ empty string – และวิธีแยกปัญหาเป็น logical steps นี่คือ experimentation phase – ไม่มีคำตอบผิด มีแค่ความคิดเกี่ยวกับวิธี approach ปัญหา ความคิดเหล่านี้อาจ misguided หรือ misdirected – นั่นคือวิธีที่คุณเรียนรู้ approaches ที่ won’t work สำหรับปัญหา
ผมพบว่าถ้าแยกปัญหาโดยอธิบายออกเสียง logic จะมาได้ง่ายขึ้น Mileage ของคุณอาจต่างไปบน approach ของคุณ แต่ผมอยากแนะนำต่อในกรณีมันทำงานให้คุณ! Pseudocode สำหรับเล็ก problem อย่างนี้ดูมากเกินไป แต่ถ้าฝึก concept ตอนนี้ จะมาได้ง่ายตอนทำ harder problems
The Solutions
Solution #1: split() และ for loop กับ string.replace() และ charAt() methods
<!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>
ใน solution แรก เรา split string บน spaces ได้ arr ที่แต่ละคำเป็น index ของตัวเอง การ loop over array ให้เรา access แต่ละ string's personal indexes เรา re-assign string (string ในกรณีนี้คือ arr[i]) ที่ index i เป็น outcome ของการ replace string character ที่ index 0 (arr[i].charAt(0) ด้วย upper case value ของมัน เรา rejoined arr กลับเป็น string พร้อม spaces ระหว่างแต่ละคำ
Solution #2: split กับ map method และ 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) => { // 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>
ใน solution นี้ เราเริ่มเหมือนกันมาก แต่ใช้ ES6 array method ชื่อ map loop over array และคืนค่าใหม่ที่ capitalize ตัวอักษรแรกของแต่ละคำ ทำได้โดยระบุชัดเจนว่าจะทำอะไรกับ toUpperCase() method สำหรับตัวอักษรแรก slice() method สำหรับส่วนที่เหลือของ string และ string concatenation เพื่อได้ new version ของคำ เรา join array และ return มัน
Solution #3: 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>
ใน solution นี้ เราใช้ regular expression หา non-whitespace characters ทั้งหมด ( \S ) ที่ either เริ่มต้นของ string ( ^ ) or หลัง whitespace character ( \s ) g flag ท้ายหมายถึง global ให้เราหา all instances ของ pattern นั้น ต่อมา ใช้ replace method แทนที่ regex pattern ด้วยฟังก์ชันที่รับ letter นั้นและคืนค่า uppercase
Final Thoughts
Solutions นี้ไม่ใช่ solutions เพียงของปัญหานี้ คุณน่าจะหา solutions ที่ต่างหรือไม่ต่างจากบทความหรือบล็อกนำเสนอ ตอนเริ่มทำมากขึ้น นั่นคือสิ่งดี มันหมายความว่าคุณเริ่มคิดแบบ engineer – และนั่นคือเป้าหมาย
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
ทำต่อไป ใน solutions นี้ edge cases ไม่ได้ handled คุณควรทำไงถ้า argument ว่างหรือเป็น number? ลองเพิ่มโค้ดด้านบนด้วยการ handle edge cases เหล่านั้น
Hint: ใช้ bang/exclamation point conditionally หาว่า str มีอยู่จริงหรือไม่ ดู MDN docs หาว่ามี method หา type of สิ่งต่างๆ ตอนคุณไม่รู้จักว่ามันคืออะไร
One More Thing: ลองทำ JavaScript Reverse String Code Challenge ถ้ายังไม่เคย!
More Resources to Consider:
Using Regular Expressions in Ruby – dedicated to Ruby แต่ regex ส่วนใหญ่ language agnostic – ดูเพื่อเรียนรู้ RegExp syntax ใน Solution #3
JavaScript Replace Text: A Step-By-Step Guide – tutorial dedicated to replace method ใช้ใน Solution #1
