Có nhiều thách thức code thân thiện người mới giúp bạn bắt đầu tư duy như kỹ sư. Một thách thức là viết hoa chữ cái đầu mọi từ trong chuỗi cho trước. Bài này xem đề bài và vài giải pháp JavaScript.
Đề bài
Cho hàm capitalize nhận str tham số, trả về str với mọi từ viết hoa. Hãy nghĩ trường hợp biên (edge cases) trong giải pháp (như không có đầu vào, kiểu đầu vào sai, v.v).
Cách tiếp cận
- Xem lại đề bài. Ghi chú hoặc highlight từ khóa trong wording.
- Ghép nghĩa bài toán. Phần khó nhất thách thức code là hiểu bài yêu cầu gì. Hiểu bài giúp đi xa giải quyết.
- Viết pseudocode giải pháp khả thi. Không cần mã thực (không cần chạy IDE hoặc console – tiếng Anh đơn giản đủ):
Hiểu đầu vào: cho hàm nhận某种输入 Hiểu cần trả về: chuỗi Làm gì đầu tiên? Tùy chọn nào biết đầu vào là chuỗi? Có phương thức chuỗi dùng? Tra cứu như thế nào nếu không biết? Làm sao nếu đầu vào rỗng hoặc số hoặc đối tượng? Bắt đầu viết vòng lặp for duyệt chuỗi. Tiếp theo? ... v.v...
Phân tích kỹ từng bước. Giúp nghĩ trường hợp biên – nơi đầu vào sai hoặc chuỗi rỗng – và chia bài thành bước logic. Giai đoạn thử nghiệm – không có sai, chỉ suy nghĩ cách tiếp cận. Những suy nghĩ có thể lệch – đó là cách học cách không giải quyết.
Tôi thấy nếu phân tích bài bằng nói to, logic đến dễ hơn. Cách bạn có thể khác, nhưng muốn gợi ý phòng khi giúp ích! Pseudocode bài nhỏ này hơi nhiều, nhưng tập trung khái niệm giờ giúp dễ hơn khi làm bài khó hơn.
Các giải pháp
Giải pháp #1: split() và vòng lặp for với string.replace() và 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>
Trong giải pháp đầu, tách chuỗi theo khoảng trắng. Cho mảng arr mỗi từ riêng index. Lặp mảng truy cập index riêng từng chuỗi. Gán lại chuỗi (arr[i]) tại index i thành kết quả thay thế ký tự index 0 (arr[i].charAt(0)) thành giá trị in hoa. Sau đó nối arr thành chuỗi với khoảng trắng giữa từ.
Giải pháp #2: split với map và 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) => { // tách chuỗi khoảng trắng biết đang làm gì let arr = str.split(' ') // đảm bảo có khoảng trắng giữa hai ngoặc kép // dùng phương thức map 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>
Giải pháp này bắt đầu tương tự, nhưng dùng phương thức mảng ES6 map lặp mảng trả về giá trị mới viết hoa ký tự đầu mỗi từ. Làm bằng cách rõ ràng toUpperCase() cho chữ cái đầu, slice() cho phần còn lại, nối chuỗi lấy phiên bản mới từ. Sau đó join mảng trả về.
Giải pháp #3: biểu thức chính quy
<!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>
Giải pháp này dùng biểu thức chính quy tìm tất cả ký tự không khoảng trắng ( \S ) ở đầu chuỗi ( ^ ) hoặc sau ký tự khoảng trắng ( \s ). Cờ g cuối nghĩa global cho phép tìm tất cả instance pattern đó. Sau đó dùng replace thay pattern regex bằng hàm lấy chữ cái trả về in hoa.
Tóm lại
Các giải pháp không phải 유일한 solutions. Xác suất cao khi làm nhiều thách thức, bạn sẽ ra giải pháp có thể khác bài viết. Đó là điều tốt. Nghĩa là bạn bắt đầu tư duy như kỹ sư – và đó là mục tiêu.
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.
Tiếp tục. Trong giải pháp, trường hợp biên chưa xử lý. Làm sao nếu đối số rỗng hoặc số? Thử thêm mã xử lý trường hợp biên.
Gợi ý: Dùng dấu chấm than/kêu để có điều kiện tìm str tồn tại. Xem MDN docs tìm phương thức xác định kiểu của thứ khi không biết nó là gì.
Một điều nữa: Thử thách thức JavaScript Reverse String Code Challenge nếu chưa!
Tài nguyên thêm:
Using Regular Expressions in Ruby – Dành cho Ruby, nhưng regex phần lớn language agnostic – xem để học cú pháp RegExp Giải pháp #3.
JavaScript Replace Text: A Step-By-Step Guide – Hướng dẫn phương thức replace, dùng Giải pháp #1.