ITコラム

判定

JavaScript

2017.11.21

JavaScript【 typeof 】 ~ 型の判定

typeof 演算子は、式のデータ型が何であるかを判定するための演算子です。
JavaScript は、他の言語と比べると、データ型についての取扱いが緩やかですが、ある変数のデータ型の種類によって 後続処理に影響を及ぼす場面などで、typeof 演算子を使用します。
今回は、このような typeof 演算子の使い方について紹介します。

目次

 
1.typeof 演算子
2.ラッパーオブジェクトの判定

1.typeof 演算子

 
typeof 演算子は、引数に指定した値のデータ型を識別する文字列を返す演算子です。

次のように記述して、使用します。

typeof( 式 );

引数には、型情報を取得するための任意の式を指定します。
引数を指定するための カッコ は省略できます。

typeof 演算子は、型情報を次の文字列で返します。

返り値 型情報
number 数値型
string 文字列型
boolean 真偽値型
object オブジェクト
function Function
null Null
undefined Undefined

 
 
typeof 演算子を使用して、データ型を判定します。
判定ボタンをクリックしてみて下さい。

typeof(“あいう”) 
  
 

typeof(1.23) 
  
 

typeof(true) 
  
 

typeof([1,2,3]) 
  
 

typeof(new Function(“”)) 
  
 

 
判定結果が「 number 」などの文字列で返るのが確認できます。

上のサンプルのソースコードは次の通りです。

<script type="text/javascript">
<!--
function disp() {
    document.getElementById("dat").value = typeof("あいう");
}
function disp2() {
    document.getElementById("dat2").value = typeof(1.23);
}
function disp3() {
    document.getElementById("dat3").value = typeof(true);
}
function disp4() {
    document.getElementById("dat4").value = typeof([1,2,3]);
}
function disp5() {
    document.getElementById("dat5").value = typeof(new Function(""));
}
//-->
</script>

<div style="background-color : #CCC; padding : 20px 20px 10px;">
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:350px;">typeof("あいう")</nobr> 
        <nobr><input type="button" value="判定" onClick="disp()"></nobr>  
        <input type="text" id="dat" size="7"> 
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:350px;">typeof(1.23)</nobr> 
        <nobr><input type="button" value="判定" onClick="disp2()"></nobr>  
        <input type="text" id="dat2" size="7"> 
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:350px;">typeof(true)</nobr> 
        <nobr><input type="button" value="判定" onClick="disp3()"></nobr>  
        <input type="text" id="dat3" size="7"> 
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:350px;">typeof([1,2,3])</nobr> 
        <nobr><input type="button" value="判定" onClick="disp4()"></nobr>  
        <input type="text" id="dat4" size="7"> 
    </div>
    <div style="display:inline-flex; align-items: center;">
        <nobr style="width:350px;">typeof(new Function(""))</nobr> 
        <nobr><input type="button" value="判定" onClick="disp5()"></nobr>  
        <input type="text" id="dat5" size="7"> 
    </div>
</div>

▲目次へ戻る

 

2.ラッパーオブジェクトの判定

 
JavaScriptのデータ型は、大きくプリミティブ型とオブジェクトに分けられます。

そして、プリミティブ型に分類される 真偽値型、数値型、文字列型 には、それぞれ対応するオブジェクトが存在します。

例えば、文字列型に対応するオブジェクトは Stringオブジェクトです。

この Stringオブジェクトを new することで、Stringオブジェクトのインスタンスを作ることができます。

var str = new String("あいう");

このようにインスタンス化されたものは、プリミティブ型の値を包んだ(ラップした)オブジェクトということで、プリミティブ型の値に対しての ラッパーオブジェクト といいます。

プリミティブ型とラッパーオブジェクトとの対応は次の通りです。

プリミティブ型 ラッパーオブジェクト
数値型 Number
文字列型 String
真偽値型 Boolean

ラッパーオブジェクトは、名前の通り「 オブジェクト 」ですので、typeof 演算子でラッパーオブジェクトを判定すると、判定結果は下記の通りとなります。
判定ボタンをクリックしてみて下さい。

typeof(“あいう”) 
  
 

typeof(new String(“あいう”)) 
  
 

typeof(1.23) 
  
 

typeof(new Number(1.23)) 
  
 

typeof(true) 
  
 

typeof(new Boolean(true)) 
  
 

 

このように、typeof 演算子でラッパーオブジェクトを判定すると「 object 」という文字列が返ります。

typeof 演算子を使用してデータ型の判定を行う際には、同じデータでも 違う判定結果(「 string 」と「 object 」等 )が出る場合があることに注意が必要です。

typeof 演算子を使用する場面でもそうですが、一般的に、明確な必要性がない場合は、文字列型、数値型、真偽値型 のコンストラクタは使用しない方が賢明です。

一方で、この相違点を利用して、typeof 演算子でプリミティブ型かオブジェクトかの判定をすることも可能です。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.