Trong bài viết này, bạn sẽ học cách viết hoa chữ cái đầu tiên của bất kỳ từ nào trong JavaScript. Sau đó, bạn sẽ viết hoa chữ cái đầu tiên của tất cả các từ trong câu.
Điều tuyệt vời về lập trình là không có một giải pháp chung nào để giải quyết vấn đề. Do đó, trong bài viết này, bạn sẽ thấy nhiều cách để giải quyết cùng một vấn đề.
Trước hết, hãy bắt đầu với việc viết hoa chữ cái đầu tiên của một từ đơn. Sau khi bạn học cách làm điều này, chúng ta sẽ chuyển sang cấp độ tiếp theo – làm điều đó với từng từ trong câu. Đây là một ví dụ:
const publication = "freeCodeCamp";
Trong JavaScript, chúng tôi bắt đầu đếm từ 0. Chẳng hạn, nếu chúng tôi có một mảng, vị trí đầu tiên là 0, không phải 1.
Ngoài ra, chúng ta có thể truy cập từng chữ cái từ một Chuỗi giống như cách chúng ta truy cập một phần tử từ một mảng. Chẳng hạn, chữ cái đầu tiên của từ “freeCodeCamp” ở vị trí 0.
Điều này có nghĩa là chúng ta có thể nhận được thư f từ freeCodeCamp bằng cách làm publication[0].
Theo cách tương tự, bạn có thể truy cập các chữ cái khác từ từ. Bạn có thể thay thế “0” bằng bất kỳ số nào, miễn là không vượt quá độ dài của từ. Bằng cách vượt quá độ dài từ, ý tôi là cố gắng làm điều gì đó như sự xuất bản[25, which throws an error because there are only twelve letters in the word “freeCodeCamp”.
How to capitalize the first letter
Now that we know how to access a letter from a word, let’s capitalize it.
In JavaScript, we have a method called toUpperCase(), which we can call on strings, or words. As we can imply from the name, you call it on a string/word, and it is going to return the same thing but as an uppercase.
For instance:
const publication = "freeCodeCamp";
publication[0].Đến trường hợp trên();
Chạy đoạn mã trên, bạn sẽ nhận được một số vốn F thay vì. Để lấy lại toàn bộ từ, chúng ta có thể làm điều này:
const publication = "freeCodeCamp";
publication[0].toUpperCase() + publication.substring(1);
Bây giờ nó ghép “F” với “reeCodeCamp”, nghĩa là ta lấy lại từ “FreeCodeCamp”. Đó là tất cả!
Hãy tóm tắt lại
Để chắc chắn rằng mọi thứ đều rõ ràng, hãy tóm tắt lại những gì chúng ta đã học được cho đến nay:
- Trong JavaScript, việc đếm bắt đầu từ 0.
- Chúng ta có thể truy cập một chữ cái từ một chuỗi giống như cách chúng ta truy cập một phần tử từ một mảng – ví dụ:
string[index]. - Không sử dụng chỉ mục vượt quá độ dài chuỗi (sử dụng phương thức độ dài –
string.length– để tìm phạm vi bạn có thể sử dụng). - Sử dụng phương pháp tích hợp
toUpperCase()trên chữ cái bạn muốn chuyển thành chữ hoa.
Bước tiếp theo là lấy một câu và viết hoa từng từ trong câu đó. Hãy lấy câu sau:
const mySentence = "freeCodeCamp is an awesome resource";
Chia nó thành các từ
Chúng ta phải viết hoa chữ cái đầu tiên của mỗi từ trong câu freeCodeCamp is an awesome resource.
Bước đầu tiên chúng ta thực hiện là tách câu thành một mảng các từ. Tại sao? Vì vậy, chúng ta có thể thao tác từng từ riêng lẻ. Chúng ta có thể làm điều đó như sau:
const mySentence = "freeCodeCamp is an awesome resource";
const words = mySentence.split(" ");
Lặp lại từng từ
Sau khi chúng tôi chạy đoạn mã trên, biến words được gán một mảng với mỗi từ trong câu. Mảng như sau ["freeCodeCamp", "is", "an", "awesome", "resource"].
const mySentence = "freeCodeCamp is an awesome resource";
const words = mySentence.split(" ");
for (let i = 0; i < words.length; i++) {
words[i] = words[i][0].toUpperCase() + words[i].substr(1);
}
Bây giờ, bước tiếp theo là lặp qua mảng các từ và viết hoa chữ cái đầu tiên của mỗi từ.
Trong đoạn mã trên, mỗi từ được lấy riêng. Sau đó, nó viết hoa chữ cái đầu tiên và cuối cùng, nó nối chữ cái đầu tiên được viết hoa với phần còn lại của chuỗi.
Tham gia các từ
Đoạn mã trên đang làm gì? Nó lặp lại từng từ và thay thế từ đó bằng chữ hoa của chữ cái đầu tiên + phần còn lại của chuỗi.
Nếu chúng ta lấy “freeCodeCamp” làm ví dụ, nó sẽ như thế này freeCodeCamp = F + reeCodeCamp.
Sau khi nó lặp qua tất cả các từ, words mảng là ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]. Tuy nhiên, chúng tôi có một mảng chứ không phải một chuỗi, đây không phải là điều chúng tôi muốn.
Bước cuối cùng là nối tất cả các từ để tạo thành một câu. Vì vậy, làm thế nào để chúng tôi làm điều đó?
Trong JavaScript, chúng ta có một phương thức gọi là join, mà chúng ta có thể sử dụng để trả về một mảng dưới dạng một chuỗi. Phương thức lấy dấu phân cách làm đối số. Đó là, chúng tôi chỉ định những gì cần thêm giữa các từ, ví dụ như khoảng trắng.
const mySentence = "freeCodeCamp is an awesome resource";
const words = mySentence.split(" ");
for (let i = 0; i < words.length; i++) {
words[i] = words[i][0].toUpperCase() + words[i].substr(1);
}
words.join(" ");
Trong đoạn mã trên, chúng ta có thể thấy phương thức nối đang hoạt động. Chúng tôi gọi nó trên words mảng và chúng tôi chỉ định dấu phân cách, trong trường hợp của chúng tôi là khoảng trắng.
Vì vậy, ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"] trở thành FreeCodeCamp Is An Awesome Resource.
Trong lập trình, thông thường, có nhiều cách giải quyết cùng một vấn đề. Vì vậy, hãy xem một cách tiếp cận khác.
const mySentence = "freeCodeCamp is an awesome resource";
const words = mySentence.split(" ");
words.map((word) => {
return word[0].toUpperCase() + word.substring(1);
}).join(" ");
Sự khác biệt giữa giải pháp trên và giải pháp ban đầu là gì? Hai giải pháp rất giống nhau, sự khác biệt là trong giải pháp thứ hai, chúng tôi đang sử dụng map chức năng, trong khi trong giải pháp đầu tiên, chúng tôi đã sử dụng một for loop.
Hãy tiến xa hơn nữa, và cố gắng làm một lót. Hãy nhận biết! Các giải pháp một dòng có thể trông bắt mắt, nhưng trong thế giới thực, chúng hiếm khi được sử dụng vì rất khó để hiểu chúng. Khả năng đọc mã luôn được ưu tiên hàng đầu.
const mySentence = "freeCodeCamp is an awesome resource";
const finalSentence = mySentence.replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());
Đoạn mã trên sử dụng RegEx để chuyển đổi các chữ cái. RegEx có thể trông khó hiểu, vì vậy hãy để tôi giải thích điều gì sẽ xảy ra:
^khớp với phần đầu của chuỗi.\wkhớp với bất kỳ ký tự từ nào.{1}chỉ nhận ký tự đầu tiên.- Như vậy,
^\w{1}khớp với chữ cái đầu tiên của từ. |hoạt động như booleanOR. Nó khớp với biểu thức sau và trước|.\s+khớp với bất kỳ lượng khoảng trắng nào giữa các từ (ví dụ: khoảng trắng, tab hoặc ngắt dòng).
Do đó, với một dòng, chúng tôi đã hoàn thành điều tương tự mà chúng tôi đã hoàn thành trong các giải pháp trên. Nếu bạn muốn tìm hiểu về RegEx và để tìm hiểu thêm, bạn có thể sử dụng trang web này.
Xin chúc mừng, bạn đã học được một điều mới ngày hôm nay! Tóm lại, trong bài viết này, bạn đã học cách:
- truy cập các ký tự từ một chuỗi
- viết hoa chữ cái đầu tiên của một từ
- tách một chuỗi trong một mảng các từ
- nối lại các từ trong một mảng để tạo thành một chuỗi
- sử dụng RegEx để hoàn thành nhiệm vụ tương tự
Cảm ơn vì đã đọc! Nếu bạn muốn giữ liên lạc, hãy kết nối trên Twitter @catalinmpit. Tôi cũng thường xuyên xuất bản các bài viết trên blog của mình catalins.tech nếu bạn muốn đọc thêm nội dung từ tôi.
