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 演算子でプリミティブ型かオブジェクトかの判定をすることも可能です。

▲目次へ戻る

コメントを残す

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