jQuery入門 | ユーティリティメソッド | 型チェックメソッド $.type() $.isArray() $.isNumeric()

ユーティリティメソッド

jQueryは、プログラミングに役立つ多数のユーティリティメソッドを提供している。

型チェックメソッド

jQueryは、引数として渡された値の型を簡単に確認できる次のようなメソッドを提供している。

メソッド	説明
$.type()	渡された値をJavaScriptの内部クラスと比較し、より正確な型チェックを提供する。
$.isArray()	渡された値が配列かどうかをチェックする。
$.isFunction()	渡された値がJavaScript関数オブジェクトかどうかをチェックする。
$.isNumeric()	渡された値がJavaScript Numberオブジェクトかどうかをチェックする。
$.isEmptyObject()	渡された値が空のオブジェクト、つまり列挙できるプロパティを持たないオブジェクトかどうかをチェックする。
$.isPlainObject()	渡された値がプレーンオブジェクト(plain object)かどうかをチェックする。
$.isWindow()	渡された値がJavaScript Windowオブジェクトかどうかをチェックする。
$.isXMLDoc()	渡されたDOMノードがXML文書に含まれているか、またはXML文書かどうかをチェックする。

$.type()メソッド

JavaScriptのtypeof演算子は、値によって不正確または矛盾した型チェック結果を返すことがある。
しかしjQueryは、渡された値をJavaScriptの内部クラスと比較し、より正確な型チェックを提供する$.type()メソッドを用意している。

例

$("#text")
    .append($.type(undefined) +"<br>")          // undefined
    .append($.type() +"<br>")                   // undefined
    .append($.type(window.notDefined) +"<br>")  // undefined
    .append($.type(null) +"<br>")               // null       
    .append($.type(true) +"<br>")               // boolean
    .append($.type(new Boolean()) +"<br>")      // boolean
    .append($.type(3) +"<br>")                  // number
    .append($.type(new Number(3)) +"<br>")      // number
    .append($.type("test") +"<br>")             // string
    .append($.type(new String("test")) +"<br>") // string
    .append($.type(function(){}) +"<br>")       // function
    .append($.type([]) +"<br>")                 // array
    .append($.type(new Array()) +"<br>")        // array
    .append($.type(new Date()) +"<br>")         // date
    .append($.type(new Error()) +"<br>")        // error - as of jQuery 1.9
    .append($.type(Symbol()) +"<br>")           // symbol - as of jQuery 1.9
    .append($.type(Object(Symbol())) +"<br>")   // symbol - as of jQuery 1.12
    .append($.type(/test/) +"<br>");            // regexp

コードを実行

特定の型をチェックするメソッド

jQueryは$.type()メソッドだけでなく、渡された値が特定の型の値かどうかをチェックするさまざまなメソッドを提供している。

例

$("#text")
    .append($.isArray([]) + "<br>")                      // true
    .append($.isArray(10) + "<br>")                      // false
    .append($.isFunction(new Function()) + "<br>")       // true
    .append($.isFunction("文字列") + "<br>")              // false
    .append($.isNumeric(10) + "<br>")                    // true
    .append($.isNumeric([10]) + "<br>")                  // false
    .append($.isEmptyObject({}) + "<br>")                // true
    .append($.isEmptyObject({name: "text"}) + "<br>")    // false
    .append($.isPlainObject(new Object()) + "<br>")      // true
    .append($.isPlainObject(new Object("text")) + "<br>") // false
    .append($.isWindow(window) + "<br>")                 // true
    .append($.isXMLDoc(document) + "<br>");              // false

コードを実行

<!DOCTYPE html>
<html lang="ja">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  $(function() {
    $("#text")
      .append($.isArray([]) + "<br>")                       // true
      .append($.isArray(10) + "<br>")                       // false
      .append($.isFunction(new Function()) + "<br>")        // true
      .append($.isFunction("文字列") + "<br>")               // false
      .append($.isNumeric(10) + "<br>")                     // true
      .append($.isNumeric([10]) + "<br>")                   // false
      .append($.isEmptyObject({}) + "<br>")                 // true
      .append($.isEmptyObject({name: "text"}) + "<br>")     // false
      .append($.isPlainObject(new Object()) + "<br>")       // true
      .append($.isPlainObject(new Object("text")) + "<br>") // false
      .append($.isWindow(window) + "<br>")                  // true
      .append($.isXMLDoc(document) + "<br>");               // false
  });
  </script>
</head>
<body>
  <h1>jQuery type check method</h1>
  <p id="text"></p>
</body>
</html>

参照

https://api.jquery.com/jQuery.type/