Có nhiều thử thách về mã thân thiện với người mới bắt đầu sẽ giúp bạn bắt đầu suy nghĩ giống như một kỹ sư hơn. Một trong những thử thách như vậy là bạn viết hoa chữ cái đầu tiên của mỗi từ trong một chuỗi nhất định. Trong bài viết này, chúng ta sẽ xem xét lời nhắc và một số giải pháp khả thi trong JavaScript.
Lời nhắc
Cho một hàm, viết hoa , nhận trong str dưới dạng một tham số, trả về str đó với mỗi từ được viết hoa. Hãy thử nghĩ đến các trường hợp phức tạp trong giải pháp của bạn (chẳng hạn như không có đầu vào, loại đầu vào sai, v.v.).
Phương pháp tiếp cận
- Xem lại lời nhắc. Ghi lại hoặc đánh dấu bất kỳ từ khóa nào mà bạn có thể tìm thấy trong từ ngữ.
- Ghép nghĩa của vấn đề từ lại với nhau. Một phần khó nhất khi thực hiện các thử thách mã là cố gắng tìm ra vấn đề đang yêu cầu bạn làm. Hiểu được vấn đề sẽ giúp bạn đi một chặng đường dài để có thể giải quyết nó.
- Mã giả để đưa ra một giải pháp khả thi. Nó không nhất thiết phải là mã thực (không nhất thiết phải thực thi được trong IDE hoặc bảng điều khiển trình duyệt của bạn - tiếng Anh thuần túy là được):
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...
Giải quyết triệt để vấn đề theo từng bước. Nó sẽ giúp bạn nghĩ về các trường hợp cạnh - các trường hợp có thể có một đầu vào không chính xác được truyền hoặc một chuỗi trống - và cách chia vấn đề thành các bước hợp lý. Về cơ bản đây là giai đoạn thử nghiệm của bạn - không có câu trả lời sai, chỉ là suy nghĩ về cách tiếp cận vấn đề. Những suy nghĩ đó có thể bị nhầm lẫn hoặc định hướng sai - đó là cách bạn tìm hiểu về các phương pháp tiếp cận sẽ không giải quyết vấn đề.
Tôi nhận thấy rằng nếu tôi có thể chia nhỏ vấn đề bằng cách giải thích nó thành tiếng, thì logic đến với tôi dễ dàng hơn. Số dặm của bạn có thể thay đổi tùy theo cách tiếp cận của bạn, nhưng ít nhất tôi muốn đề xuất nó trong trường hợp nó phù hợp với bạn! Mã giả cho một vấn đề nhỏ như thế này có vẻ hơi nhiều, nhưng nếu bạn thực hành khái niệm này ngay bây giờ, nó sẽ dễ dàng hơn với bạn khi bạn đang giải quyết những vấn đề khó hơn đáng kể.
Giải pháp
Giải pháp # 1:split () và vòng lặp for với các phương thức 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 tiên này, chúng tôi chia chuỗi trên các khoảng trắng của nó. Điều này cung cấp cho chúng tôi một arr với mỗi từ riêng lẻ làm chỉ mục riêng của nó. Vòng lặp qua mảng cho chúng tôi khả năng truy cập chỉ mục cá nhân của từng chuỗi. Chúng tôi đã gán lại chuỗi (chuỗi trong trường hợp này là arr [i]) tại chỉ mục i là kết quả của việc thay thế ký tự chuỗi tại chỉ mục 0 (arr [i] .charAt (0) bằng giá trị chữ hoa của nó. Chúng tôi sau đó nối lại arr thành một chuỗi có dấu cách ở giữa mỗi từ.
Giải pháp # 2:tách bằng phương pháp bản đồ và lát cắt
<!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>
Trong giải pháp này, chúng tôi bắt đầu rất giống nhau, nhưng sau đó chúng tôi sử dụng một phương thức mảng ES6 được gọi là bản đồ để lặp qua mảng và trả về các giá trị mới viết hoa ký tự đầu tiên của mỗi từ. Nó thực hiện điều này bằng cách trình bày rõ ràng những gì chúng ta sẽ làm với toUpperCase() phương thức cho chữ cái đầu tiên, slice() phương thức cho phần còn lại của chuỗi và nối chuỗi để nhận phiên bản mới của từ. Sau đó, chúng tôi nối mảng và 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> Trong giải pháp này, chúng tôi sử dụng một biểu thức chính quy để tìm kiếm tất cả các ký tự không có khoảng trắng (\ S) ở đầu chuỗi (^) hoặc sau một ký tự khoảng trắng (\ s). Cờ g ở cuối có nghĩa là toàn cục và nó cho phép chúng tôi tìm kiếm tất cả các trường hợp của mẫu đó. Sau đó, chúng tôi sử dụng phương thức thay thế để thay thế mẫu regex đó bằng một hàm nhận ký tự đó và trả về chữ hoa.
Lời kết
Những giải pháp này không phải là giải pháp duy nhất cho vấn đề này. Nhiều khả năng, khi bạn bắt đầu thực hiện nhiều hơn những điều này, bạn sẽ đưa ra các giải pháp có thể khác hoặc không khác so với các bài báo hoặc bài đăng trên blog trình bày. Đó là một điều tốt. Nó có nghĩa là bạn đang bắt đầu suy nghĩ như một kỹ sư - và đó là mục tiêu.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Giữ ở đó. Trong các giải pháp này, các trường hợp cạnh không được xử lý. Bạn nên làm gì nếu đối số của bạn trống hoặc là một số? Cố gắng thêm vào mã trên bằng cách xử lý các trường hợp cạnh đó.
Gợi ý :Sử dụng dấu chấm than / dấu chấm than để có điều kiện tìm hiểu xem str tồn tại. Xem qua tài liệu MDN để tìm hiểu xem có phương pháp nào để tìm ra loại một cái gì đó khi bạn không nhất thiết phải biết nó là gì.
Một điều nữa :Hãy thử sức với Thử thách mã chuỗi ngược JavaScript nếu bạn chưa làm!
Các tài nguyên khác cần xem xét:
Sử dụng Biểu thức chính quy trong Ruby - Điều này dành riêng cho Ruby, nhưng phần lớn regex là ngôn ngữ bất khả tri - hãy kiểm tra để tìm hiểu thêm về cú pháp RegExp trong Giải pháp # 3.
JavaScript Thay thế Văn bản:Hướng dẫn Từng bước - Hướng dẫn dành riêng cho phương pháp thay thế, được sử dụng trong Giải pháp số 1.