Làm cách nào để tránh NaN trong JavaScript?

Bạn sẽ tìm hiểu về JavaScript NaN trong hướng dẫn này, cách kiểm tra xem một giá trị có phải là NaN hay không và cách xử lý hiệu quả NaN

NaN trong Javascript là gì?

NaN, trong JavaScript, có thể là nhiều thứ. Trên thực tế, nó có thể là hầu hết mọi thứ, miễn là nó không phải là một con số. Loại của nó về mặt kỹ thuật là "số" (khi được đánh giá bằng "typeof"), mặc dù nó là viết tắt của Not a Number

Các giá trị trong NaN Javascript

Các giá trị có thể trở thành NaN thông qua nhiều phương tiện khác nhau, thường liên quan đến các phép tính toán sai (chẳng hạn như 0/0) hoặc do ép buộc kiểu, ngầm định hoặc rõ ràng

Một ví dụ phổ biến là khi bạn chạy parseInt trên một chuỗi bắt đầu bằng một ký tự chữ cái. Điều này không dành riêng cho parseInt, vì nó cũng áp dụng khi sử dụng cưỡng chế rõ ràng với Number() hoặc với toán tử “+” đơn nguyên

Làm cách nào để kiểm tra NaN trong Javascript?

Trước khi chọn phương pháp kiểm tra NaN, bạn không nên kiểm tra NaN như thế nào?

NaN là một giá trị kỳ lạ trong JavaScript, vì nó không bằng chính nó khi được so sánh với toán tử đẳng thức lỏng lẻo (==) hoặc đẳng thức nghiêm ngặt (===). NaN là giá trị duy nhất trong toàn bộ ngôn ngữ hoạt động theo cách này liên quan đến so sánh

Ví dụ: nếu parseInt(“a”) trả về NaN, thì parseInt(“a”) === NaN sẽ trả về false. Điều này có vẻ lạ, nhưng nó hoàn toàn hợp lý sau khi nghĩ về NaN thực sự là gì

NaN không cho bạn biết thứ gì đó là gì, nó cho bạn biết nó không phải là gì

Hai chuỗi khác nhau này được chuyển đến parseInt() đều sẽ trả về NaN

parseInt(“abc”) // NaN
parseInt(“def”) // NaN

Cả hai câu lệnh đều trả về NaN, nhưng chúng có thực sự giống nhau không?

Dưới đây là một số ví dụ về so sánh bất bình đẳng nghiêm ngặt, thể hiện sự không nhất quán của NaN

2 !== 2 // false
true !== true // false
“abc” !== “abc” // false
...
NaN !== NaN // true

Phương pháp 1. isNaN hoặc Số. làNaN

JavaScript có một phương thức tích hợp, được đặt tên thích hợp là “isNaN”, dùng để kiểm tra NaN. Có một chức năng mới hơn được gọi là Số. isNaN, được bao gồm trong thông số ES2015

Sự khác biệt giữa isNaN và Số. isNaN là isNaN buộc đối số thành một loại số. Để tránh những kết quả phức tạp và không mong muốn, người ta thường khuyên nên sử dụng Số mới hơn, mạnh mẽ hơn. isNaN để tránh các tác dụng phụ này

Số. isNaN không thực hiện bất kỳ chuyển đổi kiểu bắt buộc nào, do đó, nó chỉ trả về giá trị boolean dựa trên tham số

Dưới đây là một ví dụ về sự khác biệt giữa hai phương pháp

isNaN(undefined) // true
Number.isNaN(undefined) // false

isNaN, khi được thông qua không xác định, trả về true vì không xác định trở thành NaN sau khi ép số. Bạn có thể tự kiểm tra điều này bằng cách chạy Number(undefined). Bạn sẽ thấy rằng nó trả về NaN

Số. isNaN, mặt khác, trả về false. Điều này là do không có sự ép buộc nào diễn ra và không xác định không phải là NaN, nó chỉ đơn giản là không xác định

Cũng cần lưu ý rằng Số. isNaN là một phương thức mới hơn (ES2015) trong JavaScript, vì vậy trình duyệt hỗ trợ Number. isNaN không ổn định như isNaN, đã có từ ES1 (1997)

Phương pháp 2. Mục tiêu. Là

Object.is là một phương thức JavaScript kiểm tra tính giống nhau. Nó thường thực hiện các đánh giá giống như toán tử đẳng thức nghiêm ngặt (===), mặc dù nó xử lý NaN khác với đẳng thức nghiêm ngặt

Object.is(0, -0) sẽ trả về false, trong khi 0 === -0 sẽ trả về true. So sánh 0 và -0 khác nhau, cũng như so sánh NaN. Khái niệm này được gọi là “Bình đẳng giá trị bằng không. ”

NaN === NaN // false
Object.is(NaN, NaN) // true

Object.is(NaN, NaN) trên thực tế sẽ trả về true, trong khi chúng ta đã biết rằng NaN === NaN trả về false. Điều đó làm cho đây trở thành một cách hợp lệ khác để kiểm tra xem thứ gì đó không phải là số

Phần kết luận

Trong số các phương pháp kiểm tra NaN đã cho, phổ biến nhất là sử dụng hàm isNaN toàn cầu hoặc Số ES2015. phương thức isNaN. Mặc dù phương pháp #2 hợp lệ nhưng hầu hết mọi người thường sẽ sử dụng isNaN hoặc Number. isNaN, được tạo riêng để kiểm tra NaN

Các giá trị giả trong JavaScript là null, undefined, false, 0, "" (chuỗi trống), NaN (không phải số)

Trong ví dụ này, chúng tôi không kiểm tra rõ ràng xem giá trị có bằng NaN hay không, chúng tôi kiểm tra xem giá trị đó có sai không

Giá trị có thể là một chuỗi rỗng, undefined, null, v.v.

Một cách dễ hiểu là giá trị bên phải của toán tử là giá trị dự phòng trong trường hợp giá trị bên trái là sai

Chuyển đổi NaN thành 0 bằng Số. làNaN

Ngoài ra, bạn có thể kiểm tra rõ ràng nếu giá trị là NaN

Khai báo biến 03 với từ khóa 04 cho phép chúng ta gán lại nó nếu giá trị được lưu trữ bằng NaN

Các biến được khai báo bằng cách sử dụng 06 không thể được gán lại

Mặc dù cách tiếp cận này dài dòng hơn một chút, nhưng nó vẫn dễ đọc và trực quan

Ngoài ra, bạn có thể sử dụng toán tử bậc ba

Chuyển đổi NaN thành 0 bằng toán tử ternary

Sử dụng toán tử bậc ba để chuyển đổi NaN thành 0

Nếu giá trị bằng NaN, toán tử trả về 0, nếu không thì trả về giá trị

Toán tử bậc ba rất giống với câu lệnh const result = val || 0;0

Nếu biểu thức bên trái dấu chấm hỏi là true, toán tử trả về giá trị bên trái dấu hai chấm, ngược lại, giá trị bên phải dấu hai chấm được trả về

Bạn có thể tưởng tượng rằng giá trị trước dấu hai chấm là khối const result = val || 0;1 và giá trị sau dấu hai chấm là khối const result = val || 0;2

Lưu ý rằng chúng tôi đã sử dụng Số. phương thức isNaN để kiểm tra xem giá trị có phải là NaN (không phải số)

Bạn không nên cố so sánh một cách rõ ràng với NaN vì NaN là giá trị duy nhất trong JavaScript, giá trị này không bằng chính nó

Tại sao tôi nhận được NaN trong JavaScript?

Làm cách nào để xử lý NaN trong JavaScript?

Làm cách nào để thay thế NaN bằng trống trong JavaScript?

Làm cách nào để chuyển đổi NaN thành 0 trong JavaScript?