Viết hoa các chuỗi trong JavaScript
Tôi yêu JavaScript, nhưng nó thiếu thao tác chuỗi tích hợp so với PHP. Chắc chắn, bạn có thể thu hút dependencies của bên thứ ba cho nhu cầu thao tác chuỗi của bạn , nhưng đôi khi điều đó mang lại nhiều trọng lượng hơn bạn có thể cần trong ứng dụng của bạn .
Mặc dù JavaScript thiếu các tính năng bổ sung, nó vẫn đi kèm với quá đủ chức năng để giúp bạn dễ dàng xử lý các việc viết hoa.
Bắt đầu
Vì ta sẽ sử dụng JavaScript thuần túy, không có gì bổ sung cần được cài đặt. Trên thực tế, bạn có thể dễ dàng theo dõi trong console của trình duyệt hoặc thông qua Node.js REPL!
Cách viết hoa toàn bộ chuỗi
Điều này thật dễ dàng và có thể bạn đã biết. Để viết hoa toàn bộ chuỗi, chỉ cần gọi .toUpperCase() trên chuỗi:
let myString = 'alligator';
myString.toUpperCase();
Điều này sẽ chuyển đổi chuỗi chữ thường thành chữ hoa, ALLIGATOR .
Điều này thậm chí có thể hoạt động trên các chuỗi trường hợp hỗn hợp:
myString = 'AlliGator';
myString.toUpperCase();
Cùng một kết quả, chuỗi trở thành ALLIGATOR .
Cách viết hoa chữ cái đầu tiên của chuỗi
Được rồi, vì vậy cái đầu tiên thật dễ dàng và mọi thứ sắp trở nên phức tạp hơn rất nhanh.
Bởi vì không có một phương thức tích hợp sẵn trên nguyên mẫu String thành chữ hoa chỉ là chữ cái đầu tiên của chuỗi, ta phải sáng tạo một chút.
Ý chính của mọi thứ là ta cần lấy ký tự đầu tiên của chuỗi, viết hoa nó, sau đó lấy phần còn lại của chuỗi và tập hợp lại mọi thứ.
May mắn là ta không phải thực hiện từng bước đó và chỉ có thể sử dụng một biểu thức chính quy để lấy chữ cái đầu tiên và viết hoa nó, trả về chuỗi đã sửa đổi:
myString = 'the quick green alligator...';
myString.replace(/^\w/, (c) => c.toUpperCase());
Điều này sẽ dẫn đến việc chuỗi trở thành The quick green alligator...
Điều này là tuyệt vời miễn là chuỗi của bạn không có bất kỳ khoảng trắng nào ở phía trước của nó.
Nếu bạn không chắc mình có gặp phải phần đệm nói trên hay không, chẳng hạn như khi bạn xử lý sự mâu thuẫn của nội dung do user tạo, bạn có thể bao gồm phương thức .trim() để làm sạch mọi thứ trước khi viết hoa:
myString = ' the quick green alligator...';
myString.trim().replace(/^\w/, (c) => c.toUpperCase());
Cách viết hoa chữ cái đầu tiên của mỗi từ trong một chuỗi
Tương tự như viết hoa chữ cái đầu tiên của một chuỗi, không có gì được đưa vào JavaScript để viết hoa chữ cái đầu tiên của mỗi từ trong một chuỗi, còn gọi là cách viết hoa tiêu đề.
Ta cũng cần thực hiện một cách tiếp cận tương tự, chuỗi cần được chia thành các từ, mỗi từ cần được viết hoa và sau đó được ghép lại với khoảng trống ở giữa chúng.
Ta có thể tiếp cận điều này bằng cách sử dụng .split() và .join() với biểu thức chính quy viết hoa của ta từ trước đó được kẹp ở giữa.
Hoặc, ta có thể tiếp cận nó bằng cách chỉ cần thêm một biểu thức chính quy khác vào hỗn hợp:
myString = 'the quick green alligator...';
myString.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
Sẽ cung cấp cho ta The Quick Green Alligator...
Bởi vì ta đang cô lập chính các từ, phương pháp này có khả năng chịu lỗi cao hơn một chút khi tiến hành khoảng cách. Tuy nhiên, bạn có thể vẫn muốn trim() chuỗi, nếu bạn không muốn có phần đệm trong chuỗi kết quả.
Nếu bạn đang làm việc với một chuỗi có các từ là MiXeD CaSe, bạn cũng có thể cần bao gồm một lệnh gọi tới .toLowerCase() để làm cho mọi thứ nhất quán.
myString = ' tHE QuICk GrEEn alliGATOR... ';
myString.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
Vẫn được ta The Quick Green Alligator...
Được cấp, điều này cũng sẽ viết thường bất kỳ từ viết tắt nào trong chuỗi, vì vậy số dặm của bạn có thể khác nhau!
Kết luận
Ngay cả khi không có các phương pháp tiện ích bổ sung, hộp công cụ hiện có của JavaScript có thể thực hiện các nhiệm vụ viết hoa ngắn gọn khi làm việc với chuỗi. Điều này chủ yếu nhờ vào sức mạnh của các biểu thức chính quy bởi vì nếu không có chúng, các ví dụ mã này thậm chí còn dài hơn.
Các tin liên quan
Sử dụng toLocaleString với Numbers, Arrays hoặc Dates trong JavaScript2019-11-11
Công cụ V8 và Mẹo tối ưu hóa JavaScript
2019-10-10
Hiểu phạm vi biến trong JavaScript
2019-10-01
Hiểu điều này, ràng buộc, gọi và áp dụng trong JavaScript
2019-09-30
Sử dụng phương pháp cắt chuỗi trong JavaScript
2019-09-16
Những lý do tại sao bạn không bao giờ nên sử dụng eval () trong JavaScript
2019-08-26
Toàn cầu mới Thuộc tính JavaScript này
2019-08-08
Vẽ hình với API Canvas JavaScript
2019-08-05
clientWidth và clientHeight trong JavaScript
2019-07-24
Các phương pháp hay nhất để gỡ lỗi mã JavaScript trong trình duyệt
2019-07-05
