Làm thế nào viết hoa chữ cái đầu tiên của một từ trong JS (capitalize string js)

Có bao giờ bạn thắc mắc vì sao Js chỉ có toUpperCase() và toLowerCase() mà không có toCapitalizeCase() không. Hẳn có lý do của nó. Capitalize nghĩa là bạn viết hoa chữ cái đầu tiên trong một từ, ví dụ “Đà Nẵng”, Đ và N được viết hoa lên đấy.

Quay lại cái lý do vì sao JS không hỗ trợ hàm nào để capitalize string, thì mình có quan điểm như sau. Do mục đích ngay ban đầu của JS ra đời là để phục vụ phía front-end, giúp website tăng thêm tính tương tác (ẩn hiện, click chỗ này chỗ kia, …) thay vì chỉ html + css đơn thuần. Mà mục đích ban đầu như thế thì JS cần gì một hàm capitalize string, trong khi đã có CSS, CSS lo phần hiển thị, bố cục, định dạng, format data cho có màu mè trên màn hình và hỗ trợ sẵn text-transform: capitalize;.

Vậy các bạn sẽ nói, bản thân css cũng hỗ trợ uppercase và lowercase. Vậy Js cần gì toUpperCase() và toLowerCase().

Bạn thử tưởng tượng nhé, chúng ta có chuỗi “chÀo bạN, tôi là SiMPLE, RẤT vui làm quen VỚI Bạn”, và bạn muốn search thử trong chuỗi kia có từ simple hay không thì bạn sẽ làm thế nào với JS. simple trong chuỗi kia “biến tướng” liên tục, có thể nó được viết simplE, hoặc SimplE, so sánh bằng thì là đều không khả thi. Đơn giản chỉ cần chuyển nó về chữ thường toLowerCase() và tìm từ simple là xong.

1	"chÀo bạN, tôi là SiMPLE, RẤT vui làm quen VỚI Bạn".toLowerCase();

Đấy là đôi lời dài dòng mình muốn nói lý do JS không cần support capitalize string. Và bạn cũng không cần đâu, dùng CSS là được rồi =))). Nói vậy chứ vẫn tùy trường hợp (chỉ muốn viết hoa chữ cái đầu câu), nên mình sẽ show code implement capitalize string trong JS nhé.

Viết hoa chữ cái đầu tiên của mỗi từ. Đây cũng chính là tính năng của text-transform: capitalize;

function capitalize(str) {
  if (typeof str === 'string') {
    return str.toLowerCase().replace(/\w\S*/g, w => w.replace(/^\w/, l => l.toUpperCase()));
  }

  return str;
}

capitalize('chÀo bạN, tôi là SiMPLE, RẤT vui làm quen VỚI Bạn');
// "Chào Bạn, Tôi Là Simple, Rất Vui Làm Quen Với Bạn"

Viết hoa duy nhất chữ cái đầu câu:

function capitalizeFirstLetterOfString(str) {
  if (typeof str === 'string') {
    return str.toLowerCase().replace(/^\w/g, wl => wl.toUpperCase())
  }

  return str;
}
capitalizeFirstLetterOfString('chÀo bạN, tôi là SiMPLE, RẤT vui làm quen VỚI Bạn');
// "Chào bạn, tôi là simple, rất vui làm quen với bạn"

Chú giải Regex:

\w lấy bất cứ ký tự là chữ cái
\S lấy 1 ký tự ngoại trừ dấu khoảng trắng, tab, break …
\S* lấy nhiều, * nghĩa là nhiều
^\w lấy lấy bất cứ ký tự là chữ cái mà nó đứng đầu tiên trong chuỗi đó.
g duyệt cả chuỗi, cả line

Trên đây là mình sử dụng regex expression để giải quyết, ngoài ra chúng ta còn có thể dùng cách khác.

function capitalizeFirstLetterOfString(str) {
  if (typeof str === 'string') {
    var lowerStr = str.toLowerCase();

    return str.charAt(0).toUpperCase() + lowerStr.slice(1);
  }

  return str;
}

capitalizeFirstLetterOfString('chÀo bạN, tôi là SiMPLE, RẤT vui làm quen VỚI Bạn');
// "Chào bạn, tôi là simple, rất vui làm quen với bạn"

Giải thích:

Bước 1: chuyển hết về chữ thường: “chào bạn, tôi là simple, rất vui làm quen với bạn”
Bước 2: từ chuỗi gốcl lấy ký tự đầu tiên: chuỗi gốc “chÀo bạN, tôi là SiMPLE, RẤT vui làm quen VỚI Bạn” ký tự đầu tiên là c.
Bước 3: Upper case c lên thành C.
Bước 4: lấy chuỗi chữ thường cắt lấy từ đầu tới cuối trừ ký tự c ra -> “hào bạn, tôi là simple, rất vui làm quen với bạn”.
slice(1) nghĩa là lấy từ 1 là h tới cuối (chuỗi hay mảng giống nhau, đều bắt đầu từ 0)
Bước 5: Nối chữ C đã viết hoa nối với chuỗi đã cắt thành => “Chào bạn, tôi là simple, rất vui làm quen với bạn”.

Tóm lại

Cá nhân mình thấy dùng regex mạnh mẽ và gọn gàng hơn rất nhiều. Dùng regex sẽ cho tốc độ thực thi tốt hơn. Trên đó là giải pháp, các bạn chọn cho mình cái ưng ý rồi xài nhé.