*

javascript:変数(オブジェクト)の型を確認する方法

公開日: : 最終更新日:2014/09/19 javascript


プログラムを書いていると変数の型によって処理を分岐させるなど、変数の型を取得したい場合がでてきます。まぁ、実際にそういったケースに遭遇したので備忘も兼ねてjavascriptで変数の型判定をする方法を掲載します。

 

typeof関数を使用

javascriptではtypeof関数というものが用意されているので、それを使ってみます。

関数名:typeof(operand)

返り値:変数の型名称(文字列型)

 

var val_str  = 'あいう'; //文字列
var val_str2 = new String('かきく'); //String型をnewする
var val_int  = 7; //数値
var val_bol  = true; //boolean型
var val_date = new Date(); //日付
var val_nul  = null; //null
var val_ary  = [1, 2]; //配列
var val_obj  = {} //object
var val_reg  = new RegExp('ab+c'); //RegExpをnew
var val_err  = new Error('エラー'); //Errorをnew
var val_undef; //未定義

function FooBase() {};
function Foo() {};
Foo.prototype    = new FooBase();
var val_foobase  = new FooBase(); // 独自定義
var val_foo      = new Foo(); //独自定義

// 上記変数をtypeofで出力
document.write('val_str     : ' + typeof(val_str) + '<br>');
document.write('val_str2    : ' + typeof(val_str2) + '<br>');
document.write('val_int     : ' + typeof(val_int) + '<br>');
document.write('val_bol     : ' + typeof(val_bol) + '<br>');
document.write('val_date    : ' + typeof(val_date) + '<br>');
document.write('val_nul     : ' + typeof(val_nul) + '<br>');
document.write('val_ary     : ' + typeof(val_ary) + '<br>');
document.write('val_obj     : ' + typeof(val_obj) + '<br>');
document.write('val_err     : ' + typeof(val_err) + '<br>');
document.write('val_reg     : ' + typeof(val_reg) + '<br>');
document.write('val_undef   : ' + typeof(val_undef) + '<br>');
document.write('val_foobase : ' + typeof(val_foobase) + '<br>');
document.write('val_foo     : ' + typeof(val_foo) + '<br>');

//出力結果
val_str   : string
val_str2  : object    //new String() がobjectとなる
val_int   : number
val_bol   : boolean
val_date  : object    //Dateがobjectとなる
val_nul   : object    //Nullがobjectとなる
val_ary   : object    //配列がobjectとなる
val_obj   : object
val_err   : object    //new Error() がobjectとなる
val_reg   : object    //new RegExp() がobjectとなる
val_undef : undefined
val_foobase : object  //new FooBase() がobjectとなる
val_foo     : object  //new Foo() がobjectとなる

出力結果を確認してみると、一部の結果が意図しない値が返されています。typeofを使用すると変数の型を返してくれますが、new で生成した変数はすべてobject、null/配列もobjectで返されてしまいます。

これでは細かなobject型の判定はできませんし、配列/Null/日付等の区別もできません。利用できるとしたら変数が定義されているか(undefined)を調べるくらいでしょうか。。。

これではとても使えないので、下記のような方法を使うと厳密な型判定ができるようになります。

 

対処法

変数の型判定を行う関数を作成します。

//typeEquals関数
//type: 変数型(文字列)
//obj : 調査するオブジェクト(変数)
//return : objの型とtypeが一致した場合はture
function typeEquals(type, obj) {
  var clas = Object.prototype.toString.call(obj).slice(8, -1);
  return clas === type;
}

var val_str  = 'あいう'; //文字列
var val_str2 = new String('かきく'); //String型をnewする
var val_int  = 7; //数値
var val_bol  = true; //boolean型
var val_date = new Date(); //日付
var val_nul  = null; //null
var val_ary  = [1, 2]; //配列
var val_obj  = {} //object
var val_reg  = new RegExp('ab+c'); //RegExpをnew
var val_err  = new Error('エラー'); //Errorをnew
var val_undef; //未定義

function FooBase() {};
function Foo() {};
Foo.prototype    = FooBase();
var val_foobase  = new FooBase(); // 独自定義
var val_foo      = new Foo(); //独自定義

// 上記変数をtypeEqualsで判定
document.write('val_str     : ' + typeEquals('String', val_str) + '<br>');
document.write('val_str2    : ' + typeEquals('String', val_str2) + '<br>');
document.write('val_int     : ' + typeEquals('Number', val_int) + '<br>');
document.write('val_bol     : ' + typeEquals('Boolean', val_bol) + '<br>');
document.write('val_date    : ' + typeEquals('Date', val_date) + '<br>');
document.write('val_nul     : ' + typeEquals('Null', val_nul) + '<br>');
document.write('val_ary     : ' + typeEquals('Array', val_ary) + '<br>');
document.write('val_obj     : ' + typeEquals('Object', val_obj) + '<br>');
document.write('val_err     : ' + typeEquals('Error', val_err) + '<br>');
document.write('val_reg     : ' + typeEquals('RegExp', val_reg) + '<br>');
document.write('val_undef   : ' + typeEquals('Undefined', val_undef) + '<br>');
document.write('val_foobase : ' + typeEquals('FooBase', val_undef) + '<br>');
document.write('val_foo     : ' + typeEquals('Foo', val_undef) + '<br>');

//出力結果
val_str     : true
val_str2    : true
val_int     : true
val_bol     : true
val_date    : true
val_nul     : true
val_ary     : true
val_obj     : true
val_err     : true
val_reg     : true
val_undef   : true
val_foobase : false
val_foo     : false

とりあえず、標準で組み込まれているオブジェクトについては判定ができました。ただ、独自に定義したオブジェクトについては全て「Object」となってしまい、詳細に判定することができません。

 

オブジェクトの型判定

オブジェクトの型を判定するにはプロトタイプを用いて判定を行います。

function FooBase() {};
function Foo() {};
Foo.prototype = new FooBase();
var val_date     = new Date(); //Date型
var val_foobase  = new FooBase(); // 独自定義
var val_foo      = new Foo(); //独自定義

//上記の定義をisPrototypeOfを使用して判定
document.write('val_foobase is foobase : ' + FooBase.prototype.isPrototypeOf(val_foobase) + '<br>');
document.write('val_foobase is foo     : ' + Foo.prototype.isPrototypeOf(val_foobase) + '<br>');
document.write('val_foo     is foobase : ' + FooBase.prototype.isPrototypeOf(val_foo) + '<br>');
document.write('val_foo     is foo     : ' + Foo.prototype.isPrototypeOf(val_foo) + '<br>');

//出力結果
val_foobase is foobase : true  // foobase の prototype は foobase なのでtrue
val_foobase is foo     : false // foobase は foo ではないのでfalse
val_foo     is foobase : true  // foo は foobase を継承しているので true
val_foo     is foo     : true  // foo は foo なので true

 

以上です。

javascriptの型には「文字列/数値/boolean/null/undefined」の5つの基本型と基本型以外としてオブジェクト型があります。今回、確認してみた結果ですが、基本型については対処法で記載した「Object.prototype.toString」を用いた関数を利用する方法、オブジェクト型についてはprototype用いた方法が良さそうですかね。

jQueryを使う方法がありそうなので、後日掲載したいと思います。それ以外にもいい方法がありましたらコメントいただけると有難いです。

 

ad_right_top

関連記事

blog_logo_small

javascript(jQuery):submit時に処理を実施

jQueryを使用してsubmit時に処理を行う方法です。入力内容のチェック処理などは、サーバー側で

記事を読む

blog_logo_small

javascript(jQuery):ページ離脱時にアラートを出す方法

申し込みフォームなどの情報を入力する画面で、途中まで入力したけどうっかり戻ったら入力内容がなくなって

記事を読む

blog_logo_small

javascript(jQuery):変数の型を確認する方法

前回、javascriptで変数(オブジェクト)の型を判定する方法を掲載しましたが、今回はjQuer

記事を読む

blog_logo_small

javascript:配列の要素を連結して文字列として出力

phpで配列の要素を連結して出力する方法を掲載したので、ついでにjavascriptでの方法も掲載し

記事を読む

blog_logo_small

javascript(jQuery):scrollTopを使用する際の注意点

scrollTopを使用するとブラウザのスクロール上部の位置を取得できますが、ブラウザによって少し挙

記事を読む

blog_logo_small

javascript(jQuery):指定位置までスクロールする方法

jQueryを使用して指定位置までスクロールする方法です。htmlのid指定でリンクをすると瞬時にペ

記事を読む

google以外広告

Comment

  1. 通りすがり より:

    オブジェクトの型が同じかどうかは、プロトタイプが同じかどうかで判断してください

    • ko より:

      ご指摘いただきましてありがとうございます。
      よくよく確認してみたらオブジェクトの型は全然判定出来ていませんでしたので、
      プロトタイプを用いて判定する方法を追記させていただきました。。。
      今後とも宜しくお願いします。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ad_right_top

linux-pen
【cron】秒間隔で定期実行する為の設定方法

コマンドを定期実行させたい場合に利用するcronですが、普通に利用する

blog_logo_small
【Apache】 ReverseProxy(リバースプロキシ)を設定してサブディレクトで別サーバーの内容を表示

今回はApacheのリバースプロキシ設定について紹介したいと思います。

blog_logo_small
【Apache】 Aliasを設定してサブディレクトでDocumentRoot以外を参照する

今回はApacheのAlias設定について紹介したいと思います。この方

no image
2015:新年のご挨拶

明けましておめでとうございます。 昨年はたくさんの方々に当ブログ

blog_logo_small
MySQL:外部ホストからのDBアクセス方法

MySQLではデフォルトで外部ホストからのアクセスを許可していないので

→もっと見る

  • アクセスカウンター
PAGE TOP ↑