JavaScriptの数値チェックって、難しいですよね。
チェックが必要な数値自体様々な種類があってどれを使えばよくわからないかと思います。こういう時はまず基本に戻ってよく使う分だけでもまずコーディングしてみてはいかがでしょうか。
今回の記事では、JavaScriptにおける数値チェックについてYOKOTAが解説しました。
サンプルを用意しておりますので是非ご利用ください。
JavaScriptで数値チェック！まず型から確認する
JavaScriptで数値チェックをするときは、対象の数値が本当に数値（number）なのか？
それともオブジェクトなのか型から確認しましょう。
データの型は大きく分けると以下の2種類に分かれます。
①プリミティブ型
プリミティブ型の特徴としては変更できない値として定義される点です。
|
1 2 3 |
var number = 2; number = number + 3; // numの値は5 |
上記は一見すると2を5に変更していると見えるかもしれませんが、あくまでも「5」という数値を新しく生成し、それを代入しているにすぎません。
参考までに、MDNからのプリミティブ型の説明文を引用しておきます。
プリミティブ値
すべてのプリミティブ値は、イミュータブルimmutable、つまり変更できません。
変数には新しい値を再割り当てすることができますが、既存の値については、オブジェクト、配列、関数が変更できるのに対して、プリミティブ値は変更することができません。
出典：https://developer.mozilla.org/ja/docs/Glossary/Primitive
②オブジェクト型
オブジェクト型はプリミティブ値とは違い、変更できる値が定義されるところがの特徴です。
プリミティブ型とオブジェクト型の違いは次のコードの結果を見れば明らかです。
See the Pen
プリミティブ型とオブジェクト型の違い by codepen1 (@codepen112233)
on CodePen.
プリミティブ型
|
1 2 3 |
var p_1 = 20; var p_2 = p_1; p_1 = 50; |
コードを実行するとp_1は50に変化しているのに対してp_2は元の20のままです。
オブジェクト型
|
1 2 3 4 5 6 |
var o_1 = { name: 'ob_1', number: 20 }; var o_2 = o_1; o_1.number = 50; |
ところが、オブジェクト型の場合o_1もo_2も数値が変化しております。
数値チェックの一つとして、対象の数値が数値（number）なのか、オブジェクトなのかtypeof演算子を使用して確認しましょう。
typeof演算子は与えられたデータの型を文字列で返す演算子です。
|
1 |
typeof 値 |
下記、サンプルです。
See the Pen
数値判定typeof演算子 by codepen1 (@codepen112233)
on CodePen.
この中で”数値”に当たるのは一番最初の1（number）しかありません。
他は文字列だったり、オブジェクトだったりです。
”object”と返ってきた型はオブジェクト型、それ以外はプリミティブ型と理解しておきましょう。
JavaScriptの数値チェックの方法は主に2つある
これまでは数値のデータ型を確認する方法でした。
与えられた数値が整数かどうかを判断するのは下記のNumber.isInteger()とNumber.isFinite()を使用します。
Number.isInteger()
対象の値が数値型で、整数の場合はtrueを返します。
Number.isFinite()
対象の値が数値型で、有限な値（有限数）かどうか調べて、trueもしくはfalseを返します。
NaNもしくはInfinityの場合はfalseを返します。
Number.isInteger()でfalseを返して、Number.isFinite()でtrueだった場合は小数点だと言えます。
詳しくは、下記の記事を参考にしてみてください。
JavaScriptで数値チェックする方法５選
実際に下記のサンプルコードで確認してみましょう。
空欄から自分の調べたい数字を打ち込んで、結果を確認してみてください。
例えば、10,-10と打てば、整数でもあり、限られた数でもあるのでどちらもtrueとなります。
しかし、0.1と打つと、限られた数ではあるが、整数ではないので下記のような結果となります。
|
1 2 |
Number.isInteger(0.1):false Number.isFinite(0.1):true |
なお、フォームタグから打ち込まれた値は文字列として認識されますが、Number()で数値に変換しております。
See the Pen
数値チェック Number.isFinite()、Number.isInteger() by codepen1 (@codepen112233)
on CodePen.
One Point Advise
プログラミングでは小数点の扱いに気を付ける必要があります。
実世界では主に10進数を扱っていますが、コンピュータは2進数を扱っているため、基数を変換しながら少数を計算します。その結果数字によっては普通に計算できないことがあります。例えば”0.2”です。
|
1 2 3 |
let a = 0.1; let b = 0.2; let c = a + b; |
上記の計算は普通なら0.3と出てくるはずですが、結果は下記のコードの通りです。
See the Pen
小数点の扱いは注意が必要 by codepen1 (@codepen112233)
on CodePen.
こういうケースがあるので、小数点を扱うときは下記のように桁数を指定してはいかがでしょうか。
|
1 |
c = c.toFixed(2); |
まとめ
今回は、JavaScriptにおける数値チェックに関する内容について解説しました。
プログラミングでは受け取った値がObjectか数値かで結果が変わってくるときがあるし、数値を受け取ってから処理することが多いので、正確に数値を読み取れるようになりましょう。
少しでも本記事が参考になれば幸いです。
P.S.
最近実は健康ブームで、マレーシアのご当地料理「肉食茶（バクテー）」にハマっています。
肉食茶には、消化促進効果のある八角や、肝臓や腎臓の働きを良くするクコの実等10種類くらいの中国漢方が入っていまして大変健康にはよい料理です。どうせ食事をするなら、少しでも体を労われるものを食べたいですよね。
