Bạn đã bao giờ gặp tình huống trong đó các phép so sánh giá trị nhất định trong JavaScript không mang lại kết quả như bạn mong đợi chưa?
Ví dụ: hãy xem điều kiện bên dưới
Mặc dù kết quả của []==0 là true , nhưng điều kiện if vẫn chưa được thực hiện theo kết quả đó. Bao giờ tự hỏi tại sao lại như vậy?
Bài viết này là tất cả về việc giải thích cách thức hoạt động của các phép so sánh giá trị này và điều gì ảnh hưởng đến chúng. Trước khi đi sâu vào giải thích đó, có một khái niệm mà bạn nên làm quen;
Chuyển đổi loại JavaScript là gì?Điều này còn được gọi là Loại ép buộc. Đối với những bạn chưa quen với khái niệm này, nó chỉ đơn giản là việc tự động chuyển đổi các giá trị từ loại dữ liệu này sang loại dữ liệu khác
Điều này xảy ra vì JavaScript là một ngôn ngữ gõ yếu
Hãy xem một ví dụ để làm cho nó rõ ràng hơn
Trong ví dụ này, hai biến được xác định thuộc hai loại; . Tuy nhiên, khi chúng tôi so sánh những thứ đó bằng cách sử dụng == [So sánh bình đẳng trừu tượng / So sánh không nghiêm ngặt], kết quả là true. Lý do đằng sau điều này là khi chúng ta so sánh hai cái này bằng cách sử dụng == JavaScript sẽ tự động cố gắng chuyển đổi loại Chuỗi thành loại Số để tạo ra kết quả. Đó là một loại chuyển đổi mạnh mẽ
Có nhiều loại ép buộc trong JavaScript
- chuyển đổi số
- Chuyển đổi chuỗi
- chuyển đổi Boolean
- Chuyển đổi loại cho các đối tượng, v.v.
Dưới đây là một số ví dụ
Có phải kiểu ép buộc luôn luôn tốt?
Chà, trong một tình huống như trên, việc chuyển đổi loại không có hại. Tuy nhiên, có nhiều trường hợp ép buộc kiểu có thể gây ra sự cố
Hãy xem một ví dụ
Ở đây, JavaScript đã chuyển kiểu Number thành String. Điều này trái ngược với những gì đã xảy ra trong so sánh bình đẳng. Kết quả chúng tôi mong đợi là 450. Tuy nhiên, thay vào đó, chúng tôi có đầu ra Chuỗi
Vì vậy, kết luận của chúng tôi là gì?
Chuyển đổi loại JavaScript không nhất quán. Nó nên tránh trong mã sản xuất
Bây giờ bạn đã có một ý tưởng rõ ràng về chuyển đổi loại và lý do tại sao nên tránh chúng, hãy xem cách tránh chúng. Đây là phần quan trọng nhất của bài viết này. Vì vậy, hãy ngồi lại, uống một ly cà phê và tập trung cao độ 😃
Mẹo. Xây dựng với các thành phần độc lập, cho tốc độ và quy mô
Thay vì xây dựng các ứng dụng nguyên khối, trước tiên hãy xây dựng các thành phần độc lập và kết hợp chúng thành các tính năng và ứng dụng. Nó làm cho quá trình phát triển nhanh hơn và giúp các nhóm xây dựng các ứng dụng nhất quán và có thể mở rộng hơn
Các công cụ OSS như Bit mang lại trải nghiệm tuyệt vời cho nhà phát triển để xây dựng các thành phần độc lập và soạn ứng dụng. Nhiều nhóm bắt đầu bằng cách xây dựng Hệ thống thiết kế hoặc Giao diện vi mô của họ, thông qua các thành phần độc lập.
Hãy dùng thử →
Cách tránh chuyển đổi loại JavaScript
1. Sử dụng chuyển đổi rõ ràng với các hoạt động toán học
Nếu bạn cần sử dụng một phép toán trên đầu vào của người dùng hoặc bất kỳ giá trị nào khác, sẽ an toàn hơn nếu bạn tự thực hiện chuyển đổi rõ ràng trước khi thực hiện thao tác. Bằng cách này, bạn có thể tránh mọi hành vi không mong muốn. Đặc biệt với toán tử +. Đây là một loại toán tử đặc biệt được sử dụng để bổ sung cũng như nồng độ chuỗi. Do đó, nếu bạn cần thêm, sẽ an toàn hơn nếu chuyển đổi các giá trị thành số nguyên và float trước
2. Nối chuỗi bằng chữ mẫu thay vì +
Nếu bạn có hai số cần nối, sẽ an toàn hơn khi sử dụng chữ mẫu. Đặc biệt nếu bạn không chắc chắn về loại giá trị của mình
Bạn cũng có thể sử dụng chuyển đổi rõ ràng để thu được kết quả tương tự
3. Sử dụng so sánh nghiêm ngặt [===] khi so sánh các giá trị
Ở phần trước, chúng ta đã thấy rằng khi sử dụng ==, JavaScript thực hiện chuyển đổi kiểu ẩn dẫn đến kết quả không nhất quán. Do đó, điều này không an toàn để sử dụng trong mã sản xuất của chúng tôi
Để có được kết quả mong đợi, chúng ta nên luôn sử dụng === để so sánh. Dấu hiệu ba bằng này ngầm nói,
Tôi quan tâm đến cả giá trị và loại của một biến
Do đó, nếu một số và một chuỗi được so sánh với giá trị, nó sẽ cho kết quả là false vì nó cũng sẽ xem xét loại biến
Đây là cách tiếp cận an toàn hơn để thu được kết quả nhất quán như mong đợi
Cho đến bây giờ, chúng tôi đã khám phá các chuyển đổi loại JS và cách tránh chúng để loại bỏ các lỗi không mong muốn. Tuy nhiên, bạn vẫn có thể nhầm lẫn về ví dụ đầu tiên tôi cung cấp và tại sao nó lại xảy ra như vậy.
Trong JavaScript, có hai biến thể của kiểu dữ liệu
- Các giá trị nguyên thủy [Chuỗi, Số, v.v. ]
- Các giá trị không nguyên thủy [Mảng, Đối tượng]
Cho đến nay chúng ta đã nói về chuyển đổi kiểu của các kiểu dữ liệu nguyên thủy. Ví dụ đầu tiên tôi cung cấp liên quan đến các kiểu dữ liệu không nguyên thủy, chẳng hạn như mảng
Tất cả các loại dữ liệu không nguyên thủy đều có chức năng sẵn có gọi là true0. Khi các giá trị không nguyên thủy và nguyên thủy được so sánh, loại không nguyên thủy được hàm này tự động chuyển đổi thành loại nguyên thủy. Trong ví dụ đầu tiên chúng ta đã xem xét, mảng trống được chuyển thành chuỗi rỗng khi thực hiện so sánh không nghiêm ngặt bằng hàm này. Nói chính xác, hàm chính xác được sử dụng để thực hiện chuyển đổi này là true1. Do đó, mảng trống [được chuyển thành chuỗi rỗng] bằng 0
Tuy nhiên, như chúng ta đã thấy trước đó, khi mảng trống được kiểm tra bên trong điều kiện if, dòng bên trong điều kiện đã được thực thi. Nhưng làm thế nào điều đó có thể xảy ra nếu mảng trống chuyển đổi hoàn toàn thành 0?
Chà, điều này thuộc một điều kiện JavaScript riêng biệt; . Cùng với true , JavaScript coi tất cả các giá trị là giá trị trung thực, ngoại trừ một số giá trị. Ví dụ: 0, -0, true4 được coi là giá trị giả. Bạn có thể tìm thấy tất cả các giá trị sai ở đây. Vì một mảng trống không được coi là một giá trị giả, nên khi nó được kiểm tra trong một điều kiện, nó sẽ được thực thi như true. [Ở đây sẽ không xảy ra chuyển đổi kiểu, mảng trống được giữ dưới dạng một mảng — Một ví dụ khác cho sự không nhất quán của chuyển đổi kiểu. ]
Phần kết luận
JavaScript là ngôn ngữ được gõ lỏng lẻo thực hiện chuyển đổi kiểu ẩn. Điều này sẽ dẫn đến sự không nhất quán và kết quả không mong muốn. Do đó, chúng ta nên tránh chuyển đổi loại như vậy mọi lúc. Nếu bạn không chắc chắn về loại giá trị, nó có thể được kiểm tra bằng cách sử dụng true6. Kiểm tra loại sẽ giúp bạn hiểu rõ hơn về cách bạn nên thực hiện chuyển đổi