มีความท้าทายด้านโค้ดสำหรับผู้เริ่มต้นมากมายที่จะช่วยให้คุณเริ่มคิดเหมือนวิศวกรมากขึ้น ความท้าทายอย่างหนึ่งคือคุณต้องพิมพ์อักษรตัวแรกของทุกคำในสตริงที่ระบุเป็นตัวพิมพ์ใหญ่ ในบทความนี้ เราจะมาดูที่พร้อมท์และวิธีแก้ปัญหาที่เป็นไปได้หลายอย่างใน JavaScript
การเตือน
กำหนดฟังก์ชัน ตัวพิมพ์ใหญ่ ที่รับ str เป็นพารามิเตอร์ส่งคืน str . นั้น ด้วยตัวพิมพ์ใหญ่ทุกคำ ลองนึกถึง edge case ในโซลูชันของคุณ (เช่น ไม่มีอินพุต ประเภทอินพุตที่ไม่ถูกต้อง ฯลฯ)
แนวทาง
- ดูข้อความแจ้งอีกครั้ง จดหรือเน้นคำสำคัญที่คุณสามารถหาได้ในถ้อยคำ
- นำความหมายของคำว่า ปัญหา มารวมกัน ส่วนที่ยากที่สุดในการท้าทายโค้ดคือพยายามค้นหาว่าปัญหากำลังขอให้คุณทำอะไร การเข้าใจปัญหาจะช่วยให้คุณแก้ปัญหาได้มาก
- Pseudocode หาวิธีแก้ปัญหาที่เป็นไปได้ ไม่จำเป็นต้องเป็นโค้ดจริง (ไม่จำเป็นต้องสามารถเรียกใช้งานได้ใน 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...
ค่อยๆ ขจัดปัญหาไปทีละขั้น จะช่วยให้คุณนึกถึงกรณีขอบ - กรณีที่อาจมีการป้อนข้อมูลที่ไม่ถูกต้องหรือสตริงว่าง - และวิธีแบ่งปัญหาออกเป็นขั้นตอนเชิงตรรกะ โดยพื้นฐานแล้วนี่คือขั้นตอนการทดลองของคุณ ไม่มีคำตอบที่ผิด มีแต่ความคิดเกี่ยวกับวิธีการแก้ไขปัญหา ความคิดเหล่านั้นอาจทำให้เข้าใจผิดหรือชี้ทางผิด นั่นคือวิธีที่คุณเรียนรู้เกี่ยวกับวิธีการที่จะไม่ ทำงานเพื่อแก้ปัญหา
ฉันพบว่าถ้าฉันสามารถแยกย่อยปัญหาโดยอธิบายออกมาดังๆ ตรรกะก็เข้ามาหาฉันได้ง่ายขึ้น ระยะทางของคุณอาจแตกต่างกันไปตามแนวทางของคุณ แต่อย่างน้อยฉันก็อยากจะแนะนำเผื่อในกรณีที่มันเหมาะกับคุณ! pseudocode สำหรับปัญหาเล็กๆ น้อยๆ แบบนี้ดูเหมือนจะเยอะไปหน่อย แต่ถ้าคุณฝึกแนวคิดตอนนี้ มันจะง่ายขึ้นสำหรับคุณเมื่อคุณกำลังจัดการกับปัญหาที่ยากขึ้นอย่างมาก
การแก้ปัญหา
โซลูชัน #1:split() และสำหรับลูปด้วยเมธอด 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> ในวิธีแก้ปัญหาแรกนี้ เราแยกสตริงบนช่องว่าง สิ่งนี้ทำให้เรามี arr โดยแต่ละคำเป็นดัชนีของตัวเอง การวนรอบอาร์เรย์ทำให้เราสามารถเข้าถึงดัชนีส่วนบุคคลของแต่ละสตริงได้ เรากำหนดสตริงใหม่ (สตริงในกรณีนี้คือ arr[i]) ที่ดัชนี i เป็นผลของการแทนที่อักขระสตริงที่ดัชนี 0 (arr[i].charAt(0) ด้วยค่าตัวพิมพ์ใหญ่ เรา แล้วรวม arr เป็นสตริงโดยเว้นวรรคระหว่างแต่ละคำ
โซลูชัน #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 ที่เรียกว่า map เพื่อวนรอบอาร์เรย์และส่งกลับค่าใหม่ที่ทำให้อักขระตัวแรกของแต่ละคำเป็นตัวพิมพ์ใหญ่ โดยระบุอย่างชัดเจนว่าเราจะทำอะไรกับ 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 ที่ส่วนท้ายหมายถึงโกลบอล และช่วยให้เราค้นหาอินสแตนซ์ทั้งหมดของรูปแบบนั้นได้ จากนั้นเราจะใช้วิธีแทนที่เพื่อแทนที่รูปแบบ regex นั้นด้วยฟังก์ชันที่ใช้ตัวอักษรนั้นและส่งกลับเป็นตัวพิมพ์ใหญ่
ความคิดสุดท้าย
วิธีแก้ปัญหาเหล่านี้ไม่ได้เป็นเพียงวิธีแก้ไขปัญหานี้เท่านั้น มากกว่าที่คุณเริ่มทำสิ่งเหล่านี้ คุณจะพบวิธีแก้ปัญหาที่อาจหรือไม่แตกต่างไปจากบทความหรือบล็อกโพสต์ที่นำเสนอ นั่นเป็นสิ่งที่ดี หมายความว่าคุณเริ่มคิดเหมือนวิศวกร และนั่นคือเป้าหมาย
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
เก็บไว้ที่มัน ในโซลูชันเหล่านี้ ไม่มีการจัดการเคสขอบ คุณควรทำอย่างไรถ้าข้อโต้แย้งของคุณว่างเปล่าหรือเป็นตัวเลข? ลองเพิ่มโค้ดด้านบนด้วยการจัดการเคสขอบเหล่านั้น
คำแนะนำ :ใช้เครื่องหมายตกใจ/เครื่องหมายอัศเจรีย์เพื่อดูว่า str มีอยู่ ดูเอกสาร MDN เพื่อดูว่ามีวิธีค้นหา ประเภทของ หรือไม่ บางอย่างเมื่อคุณไม่จำเป็นต้องรู้ว่ามันคืออะไร
อีกหนึ่งสิ่ง :ลองใช้ JavaScript Reverse String Code Challenge หากคุณยังไม่ได้ทำ!
แหล่งข้อมูลเพิ่มเติมที่ต้องพิจารณา:
การใช้นิพจน์ทั่วไปใน Ruby - สิ่งนี้มีไว้สำหรับ Ruby แต่ regex ส่วนใหญ่ไม่เชื่อเรื่องภาษา - ลองดูเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับไวยากรณ์ RegExp ในโซลูชัน #3
ข้อความแทนที่ JavaScript:คำแนะนำทีละขั้นตอน – บทแนะนำสำหรับวิธีการแทนที่ ใช้ในโซลูชัน #1
