Viết hoa mỗi chữ cái đầu tiên JavaScript

Trong bài viết nhanh này, chúng ta sẽ xem cách bạn có thể viết hoa chữ cái đầu tiên của tất cả các từ trong một chuỗi trong JavaScript—còn được gọi là chuyển đổi văn bản thành kiểu chữ hoa tiêu đề

JavaScript là một trong những công nghệ cốt lõi của web. Phần lớn các trang web sử dụng nó và tất cả các trình duyệt web hiện đại đều hỗ trợ nó mà không cần plugin. Trong loạt bài này, chúng ta sẽ thảo luận về các mẹo và thủ thuật khác nhau sẽ giúp bạn phát triển JavaScript hàng ngày

Là một nhà phát triển JavaScript, đôi khi bạn cần viết hoa chữ cái đầu tiên của tất cả các từ trong một chuỗi—ví dụ nếu bạn đang phát ra một tiêu đề kiểu Envato Tuts+. Không có chức năng tích hợp nào trong JavaScript cho phép bạn viết hoa tất cả các từ trong một chuỗi, nhưng có nhiều cách khác nhau mà bạn có thể sử dụng để đạt được điều đó. Cụ thể, có các hàm JavaScript khác nhau mà bạn có thể sử dụng để đạt được hiệu quả mong muốn

Chúng ta sẽ thảo luận về cách thực hiện cùng với một vài ví dụ

Ví dụ JavaScript. Viết hoa chữ cái đầu tiên của tất cả các từ

Trong phần này, chúng ta sẽ xây dựng một hàm JavaScript tùy chỉnh cho phép bạn viết hoa chữ cái đầu tiên của tất cả các từ trong JavaScript

Hãy xem nhanh ví dụ sau

Như bạn có thể thấy, chúng tôi đã tạo hàm JavaScript

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

5, hàm này nhận một đối số duy nhất. Bạn cần chuyển một chuỗi làm đối số đầu tiên của hàm JavaScript

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

5 và hàm này sẽ xử lý chuỗi đầu vào và trả về chuỗi bằng cách viết hoa chữ cái đầu tiên của tất cả các từ

Hãy hiểu cách thức hoạt động của nó. Đầu tiên, chúng tôi đã sử dụng phương thức chuỗi JavaScript

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

7 để chuyển đổi chuỗi đầu vào thành chữ thường. Nó đảm bảo rằng chuỗi kết quả là chữ thường. Tiếp theo, chúng tôi đã sử dụng phương pháp chuỗi JavaScript

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

8 để phân tách chuỗi bằng khoảng trắng và kết quả là chúng tôi có một mảng các chuỗi

Bây giờ, chúng ta chỉ cần lặp qua tất cả các phần tử của mảng và viết hoa chữ cái đầu tiên của mỗi phần tử. Đầu tiên, chúng ta đã sử dụng phương thức chuỗi JavaScript

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

9 để lấy ký tự đầu tiên, sau đó chúng ta đã sử dụng phương thức chuỗi JavaScript

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

0 để biến nó thành chữ hoa. Cuối cùng, chúng tôi đã sử dụng phương thức chuỗi JavaScript

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

1 để lấy phần còn lại của chuỗi. Nối hai chuỗi này lại ta được chuỗi viết hoa

Cuối cùng, chúng tôi đã sử dụng phương thức mảng JavaScript

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

2 để nối tất cả các phần tử của một mảng với khoảng trắng và nó trả về chuỗi. Vì vậy, đó là cách nó viết hoa chữ cái đầu tiên của tất cả các từ trong một chuỗi

Ví dụ JavaScript. Viết hoa chữ cái đầu tiên của tất cả các từ bằng phương pháp bản đồ

Trong phần trước, chúng ta đã thảo luận về ví dụ JavaScript để minh họa cách bạn có thể viết hoa chữ cái đầu tiên của tất cả các từ trong một chuỗi

Trong phần này, chúng ta sẽ sửa lại ví dụ đã nói ở trên với phương thức mảng JavaScript

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

3. Hãy xem nhanh ví dụ sau

Như bạn có thể thấy, đó là hàm một dòng cho phép bạn thực hiện dễ dàng hơn nhiều. Đó là nhờ phương thức

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

3, cho phép chúng ta lặp qua các phần tử của mảng với cú pháp rõ ràng hơn nhiều. Nếu bạn để ý, chúng tôi đã sử dụng phương thức mảng JavaScript

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

50 thay vì phương thức

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

1 trong phiên bản này

Ví dụ JavaScript. Chuyển đổi sang trường hợp tiêu đề

Trong phần trước, chúng ta đã biết cách viết hoa chữ cái đầu tiên của tất cả các từ trong một chuỗi. Tuy nhiên, đó không thực sự là cách một tiêu đề nên trông. Trong tiêu đề, chúng tôi chỉ viết hoa chữ cái đầu tiên của các từ chính và chúng tôi để lại các từ phụ viết thường

Đây là một ví dụ về cách áp dụng cùng một quy tắc viết hoa tiêu đề của Envato Tuts+ mà chúng tôi sử dụng trên tất cả các bài đăng của mình

Như bạn có thể thấy, chúng tôi đã thêm một biểu thức chính quy,

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

52, để kiểm tra xem một từ có phải là phụ và nên để chữ thường hay không. Chúng tôi cũng đã tạo một hàm đơn giản để kiểm tra xem một từ ở đầu hay cuối chuỗi và liệu từ đó có khớp với danh sách từ nhỏ hay không. Một lần nữa, chúng tôi sử dụng phương pháp

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

3 để biến đổi từng từ. Lần này, chúng tôi cũng đang sử dụng tham số

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

54 mà

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

3 cung cấp—đây là cách chúng tôi tìm hiểu xem từ đó nằm ở đầu hay cuối chuỗi

Phần kết luận

Hôm nay, chúng ta đã thảo luận về cách viết hoa chữ cái đầu tiên của tất cả các từ trong JavaScript, cùng với một số ví dụ thực tế. Cuối cùng, bạn đã thấy cách viết mã một phiên bản hơi đơn giản của định dạng chữ hoa chữ thường mà chúng tôi sử dụng ở đây tại Envato Tuts+

Đầu tiên, chúng ta sử dụng phương thức

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

0 để viết thường toàn bộ chuỗi, đảm bảo rằng chỉ có chữ cái đầu tiên của mỗi từ là chữ hoa

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

Mẹo. Nếu các chữ cái còn lại trong mỗi từ không cần thiết phải là chữ thường, bạn có thể bỏ lệnh gọi phương thức

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

1

Sau đó, chúng tôi gọi phương thức

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

2

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

3 trên chuỗi để chia tất cả các từ thành một mảng

// [ 'welcome', 'to', 'coding', 'beauty' ]
console.log['welcome to coding beauty'.split[' ']];

Sau khi tạo mảng, chúng ta gọi phương thức

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

4 trên đó, với hàm gọi lại làm đối số. Hàm này sẽ được gọi và trả về kết quả cho mỗi từ trong mảng

Trong hàm, chúng ta lấy ký tự đầu tiên của từ bằng

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

5, chuyển đổi nó thành chữ hoa bằng

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

6 và nối nó với phần còn lại của chuỗi

Chúng ta sử dụng phương thức

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

7

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

8 để lấy phần còn lại của chuỗi. Truyền

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

9 đến

// [ 'welcome', 'to', 'coding', 'beauty' ]
console.log['welcome to coding beauty'.split[' ']];

0 làm cho nó trả về một phần của chuỗi từ ký tự thứ hai [chỉ số 1] đến cuối

// welcome to coding beauty
console.log['WELCOME to coding beauty'.toLowerCase[]];

3

Vì vậy,

// [ 'welcome', 'to', 'coding', 'beauty' ]
console.log['welcome to coding beauty'.split[' ']];

1 trả về một mảng chứa tất cả các từ trong chuỗi, với chữ cái đầu tiên của mỗi từ được viết hoa

Làm cách nào để viết hoa chữ cái đầu tiên trong mảng JavaScript?

Các biến JavaScript có thể bắt đầu bằng chữ hoa không?