Hướng dẫn how do you capitalize certain letters in javascript? - làm thế nào để bạn viết hoa các chữ cái nhất định trong javascript?

Trong bài viết này, bạn sẽ học cách tận dụng chữ cái đầu tiên của bất kỳ từ nào trong JavaScript. Sau đó, bạn sẽ tận dụng chữ cái đầu tiên của tất cả các từ từ một câu.

Điều tuyệt vời về lập trình là không có một giải pháp phổ quát 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ừ. Sau khi bạn học cách làm điều này, chúng tôi sẽ tiến hành cấp độ tiếp theo - thực hiện nó trên mỗi từ từ một câu. Đây là một ví dụ:

const publication = "freeCodeCamp";

Trong JavaScript, chúng ta bắt đầu đếm từ 0. Ví dụ, nếu chúng ta 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 từ từ "Freecodecamp" ở vị trí 0.

Điều này có nghĩa là chúng ta có thể nhận được chữ F từ Freecodecamp bằng cách làm

const publication = "freeCodeCamp";
publication[0].toUpperCase();

const publication = "freeCodeCamp";
publication[0].toUpperCase();

Theo cách tương tự, bạn có thể truy cập các chữ cái khác từ từ này. Bạn có thể thay thế "0" bằng bất kỳ số nào, miễn là bạn không vượt quá độ dài từ. Bằng cách vượt quá độ dài từ, tôi có nghĩa là cố gắng làm một cái gì đó như

const publication = "freeCodeCamp";
publication[0].toUpperCase() + publication.substring(1);

Cách viết hoa chữ cái đầu tiên

Bây giờ chúng ta đã biết cách truy cập một chữ cái từ một từ, hãy viết hoa nó.

Trong JavaScript, chúng ta có một phương thức gọi là

const publication = "freeCodeCamp";
publication[0].toUpperCase();

Ví dụ:

const publication = "freeCodeCamp";
publication[0].toUpperCase();

Chạy mã trên, bạn sẽ nhận được vốn F thay vì f. Để lấy lại toàn bộ từ, chúng ta có thể làm điều này:F instead of f. To get the whole word back, we can do this:

const publication = "freeCodeCamp";
publication[0].toUpperCase() + publication.substring(1);

Bây giờ nó kết hợp "F" với "Reecodecamp", có nghĩa là chúng ta lấy lại từ "Freecodecamp". Đó là tất cả!

Hãy tóm tắt lại

Để chắc chắn mọi thứ 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, đế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ụ:

  const publication = "freeCodeCamp";
  publication[0].toUpperCase() + publication.substring(1);
  

  2.
• Không sử dụng một chỉ mục vượt quá độ dài chuỗi (sử dụng phương thức độ dài -

  const publication = "freeCodeCamp";
  publication[0].toUpperCase() + publication.substring(1);
  

  3 - để tìm phạm vi bạn có thể sử dụng).
• Sử dụng phương pháp tích hợp

  const publication = "freeCodeCamp";
  publication[0].toUpperCase();
  

  2 trên chữ cái bạn muốn chuyển đổi thành chữ hoa.

Viết hoa chữ cái đầu tiên của mỗi từ từ một chuỗi

Bước tiếp theo là lấy một câu và tận dụng từng từ từ câu đó. Hãy lấy câu sau:

const mySentence = "freeCodeCamp is an awesome resource";

Chia nó thành từ

Chúng ta phải viết hoa chữ cái đầu tiên từ mỗi từ từ câu

const publication = "freeCodeCamp";
publication[0].toUpperCase() + publication.substring(1);

Bước đầu tiên chúng tôi thực hiện là chia câu thành một loạt các từ. Tại sao? Vì vậy, chúng tôi có thể thao tác từng từ riêng lẻ. Chúng ta có thể làm điều đó như sau:Why? So we can manipulate each word individually. We can do that as follows:

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 mã trên, biến

const publication = "freeCodeCamp";
publication[0].toUpperCase() + publication.substring(1);

const publication = "freeCodeCamp";
publication[0].toUpperCase() + publication.substring(1);

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 từ và viết hoa chữ cái đầu tiên của mỗi từ.

Trong mã trên, mỗi từ được lấy riêng biệt. Sau đó, nó viết hoa chữ cái đầu tiên, và cuối cùng, nó kết hợp 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ừ

Mã trên đang làm gì? Nó lặp lại trên mỗi từ và nó thay thế nó 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ụ, có vẻ như

const publication = "freeCodeCamp";
publication[0].toUpperCase() + publication.substring(1);

Sau khi nó lặp lại tất cả các từ, mảng

const publication = "freeCodeCamp";
publication[0].toUpperCase() + publication.substring(1);

const mySentence = "freeCodeCamp is an awesome resource";

Bước cuối cùng là tham gia 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 tôi có một phương thức gọi là

const mySentence = "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);
}

words.join(" ");

Trong đoạn mã trên, chúng ta có thể thấy phương thức tham gia hoạt động. Chúng tôi gọi nó trên mảng

const publication = "freeCodeCamp";
publication[0].toUpperCase() + publication.substring(1);

Do đó,

const mySentence = "freeCodeCamp is an awesome resource";

const mySentence = "freeCodeCamp is an awesome resource";

Các phương pháp khác

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, chúng ta 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 hàm

const mySentence = "freeCodeCamp is an awesome resource";

const mySentence = "freeCodeCamp is an awesome resource";

const mySentence = "freeCodeCamp is an awesome resource";

const mySentence = "freeCodeCamp is an awesome resource";

Hãy đi xa hơn nữa, và cố gắng làm một lớp lót. Hãy nhận biết! Một giải pháp một dòng có thể trông mát mẻ, nhưng trong thế giới thực, chúng hiếm khi được sử dụng vì nó rất khó để hiểu chúng. Khả năng đọc mã luôn luôn đến trước.one-liner. Be aware! One line solutions might look cool, but in the real world they are rarely used because it is challenging to understand them. Code readability always comes first.

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 những gì xảy ra:RegEx to transform the letters. The RegEx might look confusing, so let me explain what happens:

• const mySentence = "freeCodeCamp is an awesome resource";
  

  7 khớp với phần đầu của chuỗi.

• const mySentence = "freeCodeCamp is an awesome resource";
  

  8 khớp với bất kỳ ký tự từ nào.

• const mySentence = "freeCodeCamp is an awesome resource";
  

  9 chỉ lấy ký tự đầu tiên.
• Do đó,

  const mySentence = "freeCodeCamp is an awesome resource";
  const words = mySentence.split(" ");
  

  0 khớp với chữ cái đầu tiên của từ.

• const mySentence = "freeCodeCamp is an awesome resource";
  const words = mySentence.split(" ");
  

  1 hoạt động như Boolean

  const mySentence = "freeCodeCamp is an awesome resource";
  const words = mySentence.split(" ");
  

  2. Nó phù hợp với biểu thức sau và trước

  const mySentence = "freeCodeCamp is an awesome resource";
  const words = mySentence.split(" ");
  

  1.

• const mySentence = "freeCodeCamp is an awesome resource";
  const words = mySentence.split(" ");
  

  4 khớp với bất kỳ lượng khoảng trắng nào giữa các từ (ví dụ: không gian, 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ự chúng tôi đã hoàn thành trong các giải pháp trên. Nếu bạn muốn chơi xung quanh với Regex và để tìm hiểu thêm, bạn có thể sử dụng trang web này.

Sự kết luận

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 cách:

• Truy cập các ký tự từ chuỗi
• viết hoa chữ cái đầu tiên của một từ
• Chia một chuỗi thành một mảng các từ
• Tham gia lại các từ từ một mảng để tạo một chuỗi
• Sử dụng regex để hoàn thành cùng một nhiệm vụ

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 xuất bản các bài viết thường xuyên trên blog của tôi Catalins.tech nếu bạn muốn đọc thêm nội dung từ tôi.