JavaScriptで値がNaN(Not-A-Number)かどうかを判定する方法
JavaScriptのグローバルプロパティであるNaNは、「Not-A-Number(非数)」を表す特殊な値です。この値は、主に以下のようなケースで返されます。
- Math関数の計算が失敗した場合(例:
Math.sqrt(-500)) - 数値へのパースを試みた関数が失敗した場合(例:
parseFloat("test"))
重要なポイントとして、NaNは ==、!=、===、!== のいずれの比較演算子を使っても、他のあらゆる値と等しくないと評価されます。さらに特異なことに、NaN同士を比較した場合でも等しくないとみなされます。
そのため、ある値がNaNかどうかを正確にテストするには、Number.isNaNメソッドを使用する必要があります。
コード例
let a = Math.sqrt(-500); console.log(Number.isNaN(a))
実行結果
true
注意: グローバル関数の isNaN() と Number.isNaN() には動作の違いがあります。前者は、値が現在NaNである場合に加えて、数値へ型変換(型強制)した結果がNaNになる場合にも true を返します。一方、後者の Number.isNaN() は、値が現在NaNである場合にのみ true を返し、暗黙的な型変換を行いません。
両者の違いを示すコード例
isNaN('hello world');
Number.isNaN('hello world');実行結果
true false
文字列「hello world」は数値に変換できないため、型変換を行う isNaN() は true を返しますが、変換を行わない Number.isNaN() は false を返します。厳密なNaN判定が必要な場面では、Number.isNaN() の使用が推奨されます。
-
JavaScriptでボタンをクリックするたびに値を10ずつ増加させる方法
ボタンをクリックするたびに値を10ずつ増加させて表示したい場合、jQueryの click() イベントと JavaScript の parseInt() メソッドを組み合わせることで、シンプルかつ確実に実装できます。以下に、ボタンを押すたびに 10、20、30……と累積していく具体的なコード例を紹介します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport&quo
-
JavaScriptでテキストボックスの入力値を取得して表示する方法
JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落(<p>要素)に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">