ywork2020.com

Title

数値であるかを判定する

$.isNumeric関数の概要

isNumeric は直訳すると「数値なの?」ということになります。
実際の動きとしては、そのままですが引数が数値であるのかを評価して、Boolean型で返します。 つまり引数が数値であればtrueを返し、数値でなければfalseを返します。

ただし、この関数は評価前の段階で微妙な調整がされており、文字数字を数値に変換してから評価を行っているようです。 それはjavascriptで使う、NumberオブジェクトとparseFloat関数の中間的な仕様である動作をしています。

例えば、100という値を引数にすると数値なのでtrueが戻るのは普通です。ですが"100"なら、どうでしょうか。これは文字列なので falseが戻ると思うのが自然ですが、実際の戻り値はtrueとなります。

このことから文字列を評価前に数値に変換しているのは間違いないのですが、 空白文字の変換や単位付きの文字数値の変換などはNumberオブジェクトやparseFloat関数のどちらの仕様とも異なる動作をしています。

実際にこの関数を使用する上では特に気にする必要はありませんが文字数値も数値として評価されるということだけは考慮すべきといえます。

実機サンプル

このサンプルでは評価される値がテキストボックスの値であるため、文字列を評価しているということになります。 仮に100と入力したとしても実際の引数は"100"ということになります。

サンプルテキスト: id="idText"

答え: id="idAnswer"
innerText

実行: idTextの値を評価します。

サンプルコード

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<input type="text" value="" id="idText">
	<script>
		$("#idAnswer").text($.isNumeric($("#idText").val()));
	</script>
</body>

サンプルコードではボダンがクリックされた時の処理は、混乱をさける為に掲載していません。
ボタンがクリックされたらscript要素の中のコードが実行されると思って下さい。

このコードで重要なのは$.isNumeric($("#idText").val())の部分です。
構文は$.isNumeric(引数)となり、セレクター無しの関数の引数に判定したい値や変数などを指定します。

サンプルコードの要点

  1. input要素テキスト型にid="idText"で識別子を設定しています。
  2. $.isNumeric(引数)の引数にidTextのvalueプロパティを指定しています。
  3. 2項の値をidAnswerのinnerTextプロパティに代入しています。
以下のjQueryメソッドとjavascriptプロパティは同じものを参照しています。
  • js: valueプロパティ = jq: valメソッド
  • js: innerTextプロパティ = jq: textメソッド