NỘI DUNG BÀI VIẾT
Đôi khi, bạn muốn chuyển đổi một chuỗi JavaScript thành kiểu Camel Case bằng JavaScript nhưng không biết cách nào.
Trong bài viết này, cùng mình xem cách chuyển đổi bất kỳ chuỗi nào thành kiểu Camel Case bằng JavaScript.
Cần Loại bỏ khoảng trắng giữa các từ của tên biến?
Trong lập trình, chúng ta thường xóa khoảng trắng giữa các từ vì các ngôn ngữ lập trình dùng ký tự khoảng trắng (‘ ‘) cho các mục đích đặc biệt. Vì thế, chúng ta không thể sử dụng nó để thể hiện một tên biến như cách thể hiện bằng ngôn ngữ của chúng ta với nhiều từ chứa khoảng cách.
Ví dụ, khái niệm về số lượng người đăng nhập. Chúng tôi không thể làm như sau:
<code>user login count = 5</code>Code language: HTML, XML (xml)Một trình biên dịch ngôn ngữ lập trình sẽ coi từng từ như một biến riêng biệt. Người dùng, đăng nhập và số lượng sẽ được coi là những thứ riêng biệt. Vì vậy, chúng tôi viết lại như sau:
<code>userLoginCount = 5</code>Code language: HTML, XML (xml)Bây giờ, trình phân tích cú pháp sẽ thấy một biến, người dùng userlogincount và các lập trình viên Hoa Kỳ có thể dễ dàng nhìn thấy sự biểu diễn.
Không có cách tốt nhất để kết hợp các từ. Trong ví dụ trên, chúng tôi đã xóa không gian và viết hoa từng chữ theo từ đầu tiên. Có 1 cách sẽ giúp bạn thực hiện tốt, hãy đọc đến cuối bài viết để hiểu rõ hơn nhé!
Kiểu Camel Case là gì?
CamelCase là kiểu viết code theo dạng lạc đà (u bướu) mà chắc ai cũng dễ dàng nhận ra khi mới bắt đầu học code. Các chữ cái đầu từ đều được viết hoa. Style này dùng đặt tên biến, tên function… thường sẽ xuất hiện ở những ngôn ngữ lập trình: java, javascript, php…
Ví dụ:
var productItems;
function checkNumber() {};Code language: JavaScript (javascript)Kiểu Camel Case kết hợp các từ bằng cách viết hoa tất cả các từ theo từ đầu tiên và xóa không gian, như sau:
Kiểu Gốc: user login count
Kiểu Camel Case: userLoginCount
Đây là một cách rất phổ biến để kết hợp các từ để tạo thành một tên biến. Nó thường được sử dụng như một quy ước trong khai báo biến trong nhiều ngôn ngữ.
Sử dụng phương thức String.prototype.replace
Bạn có thể sử dụng phương pháp replace của các phiên bản chuỗi để chuyển đổi từng từ trong chuỗi, và để chuyển đổi từ đầu tiên thành chữ thường, các từ còn lại thành chữ hoa, sau đó xóa khoảng trắng.
Để làm điều này, tôi viết:
const camelize = (str) => {
return str.replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
return index === 0 ? word.toLowerCase() : word.toUpperCase();
}).replace(/\s+/g, '');
}
console.log(camelize("EquipmentClass name"));Code language: JavaScript (javascript)Tôi gọi replace với một regex tìm kiếm ranh giới từ với \b và \w.
\b phù hợp với một khoảng lùi.
\w khớp với bất kỳ ký tự chữ và số nào từ bảng chữ cái Latinh.
Tôi kiểm tra index để xác định xem đó có phải là từ đầu tiên hay không.
Nếu nó là 0, thì bạn quay lại word.toLowerCase() để chuyển đổi ký tự đầu tiên của từ thành chữ thường vì đó là từ đầu tiên.
Nếu không, bạn quay lại word.toUpperCase để chuyển đổi ký tự đầu tiên của từ thành chữ hoa.
Sau đó, chúng tôi gọi replace lần nữa với \s+/g và một chuỗi trống để thay thế các khoảng trắng bằng các chuỗi trống.
Do đó, camelize trả về kết quả 'equipmentClassName’.
Phương pháp camelCase Lodash
Chúng ta có thể sử dụng phương thức Lodash camelCase để chuyển đổi bất kỳ chuỗi nào thành kiểu camelCase giống như cách hàm camelize làm.
Ví dụ, chúng ta có thể viết:
console.log(_.camelCase("EquipmentClass name"));Code language: JavaScript (javascript)Sau đó, tôi nhận được kết quả tương tự như ví dụ trước.
Kết thúc
Bạn có thể chuyển đổi bất kỳ chuỗi JavaScript nào thành kiểu Camel Case bằng phương thức String.prototype.replace hoặc phương thức camelCase.
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
