デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.isNumeric( )数値かどうかをチェック

構文

数値かどうかをチェック返値:true/false
jQuery.isNumeric( 調査対象 )ver1.7〜

機能

jQuery.isNumericメソッドは引数に指定したものが数値かどうかをチェックします。数値であればtrue、異なればfalseを返します。jQuery.isNumericメソッドが数値と見なすものには以下の様な種類があります。

$.isNumeric("-10"); // true(数値をクォートで囲んだもの)
$.isNumeric(0xFF); // true(16進数)
$.isNumeric("0xFF"); // true(16進数をクォートで囲んだもの)
$.isNumeric("8e5"); // true(指数表記をクォートで囲んだもの)
$.isNumeric(0144); // true(8進数)
$.isNumeric(Infinity); // false(無限大は数値とは見なされない)
$.isNumeric(NaN); // false
$.isNumeric(null); // false
$.isNumeric(true); // false
$.isNumeric(undefined); // false

解説

数値かどうかをチェックする

サンプル(isNumeric/01.html)を開いてbody内にbutton要素しかないことを確認して下さい。jQueryでは、まず以下の様に変数「myNumber」が作成されていることを確認してください。

var myNumber = 999;

続いて以下の部分を確認してください。buttonをクリックするとjQuery.isNumericメソッドを利用して、数値かどうかチェックします。チェックした結果は変数chkに代入しアラートで表示します。

$("button").click(function(){
	var chk = $.isNumeric(myNumber);
	alert(chk);
});

myNumber(値は999)は数値なので、buttonをクリックするとアラートで「true」と表示されます。ついでに数値ではない場合のサンプルも作成しました。

サンプル(isNumeric/01b.html)を開いてisNumeric/01.htmlとはほとんど同じで、異なるのは以下の様に数値ではなく文字列「test」が設定されている点だけです。

var myNumber = "test";

文字列「test」は数値ではないので、buttonをクリックするとアラートで「false」と表示されます。

数値以外?で数値と見なされるもの

isNumericメソッドは数値がクォートに囲まれていても数値と見なします。サンプル(isNumeric/02.html)を開いてbody内の構成に変更はないことを確認して下さい。jQueryも殆ど同じで、以下の様に変数myNumberにダブルクォート付きの数値「10」が設定されているだけです。

var myNumber = "10";

isNumericメソッドは数値がクォートに囲まれていても数値と見なすため、buttonをクリックすると「true」と表示されます。これは便利な場合もあるかもしれませんが、純粋に数値かどうかを判断したい場合は気を付けましょう。純粋に数値かどうかを判定したい場合はjavaScriptのtypeofで調べましょう(メモに説明有り)。

また16進数も数値と見なされます。サンプル(isNumeric/03.html)を開いて、以下の様に変数myNumberに16進数が設定されていることを確認して下さい。

var myNumber = 0xFF;

buttonをクリックすると「true」が表示され、16進数が数値と見なされることが確認できます。また16進数をクォートで囲んでも数値と見なされます。→サンプル(isNumeric/03b.html

var myNumber = "0xFF";

こちらもbuttonをクリックすると「true」と表示されます。

メモ

厳密に数値であることを確認したい時は

厳密に数値かどうかを調べたい場合は、「値の型」を調べるjQuery.typeメソッドを利用してください。サンプル(isNumeric/test01)を開いてjQueryが以下の様に変更されているのを確認して下さい。

var myNumber = "999";
$(function () {
	$("button").click(function(){
		var chk = $.type(myNumber);
		alert(chk);
	});
});

まずは1行目で変数myNumberにクォート付きの数値999が設定されているのを確認して下さい。そして4行目ではisNumericメソッドの代わりにjQuery.typeメソッドを利用しています。

jQuery.typeメソッドはクォートが付いていれば文字列と判断するため、buttonをクリックすると「string」と表示します。