2.7 型変換

JavaScriptでは動的型付けが行われる。暗黙のうちに型変換が行われるケースを整理するとともに、データ型が変わる可能性がある式では、明示的に型変換することをお勧めする。

サンプル・プログラム

暗黙の型変換

「2.2 データ型 - 動的型付け」で紹介したように、JavaScriptでは動的型付けが行われる。
ここでは、暗黙のうちに型変換が行われるケースを整理しておこう。

暗黙の型変換
演算子	意味
+	Number型をString型に変換し結合
-, , /, %, *	String型をNumber型に変換し演算
>, >=-, <, <=, ==	Number型をString型に変換し比較
== false, == true	Number型をBoolean型に変換し比較
!	Boolean型に変換し否定 !null, !NaN, !undefinedはtrueと等価だが、否定演算子を付けない場合はfalseとはならない

typeconv1.html を実行

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     let a = 12.5;       //Number型
  23:     let s = '12.5';     //String型
  24:     let r;
  25:     document.getElementById('ret01').innerHTML = 'a = ' + a.toString() + '...' + typeof a;
  26:     document.getElementById('ret02').innerHTML = 's = ' + s.toString() + '...' + typeof s;
  27:
  28:     //Number型→String型
  29:     r = a.toString();
  30:     document.getElementById('ret03').innerHTML = 'a.toString() ... ' + r + '...' + typeof r;
  31:
  32:     //減算
  33:     r = a - s;
  34:     document.getElementById('ret04').innerHTML = 'a - s ... ' + r.toString() + '...' + typeof r;
  35:
  36:     //乗算
  37:     r = a * s;
  38:     document.getElementById('ret05').innerHTML = 'a * s ... ' + r.toString() + '...' + typeof r;
  39:
  40:     //除算
  41:     r = a / s;
  42:     document.getElementById('ret06').innerHTML = 'a / s ... ' + r.toString() + '...' + typeof r;
  43:
  44:     //大小比較
  45:     r = a > s;
  46:     document.getElementById('ret07').innerHTML = 'a > s ... ' + r.toString() + '...' + typeof r;
  47:
  48:     //等価
  49:     r = a == s;
  50:     document.getElementById('ret08').innerHTML = 'a == s ... ' + r.toString() + '...' + typeof r;
  51:
  52:     //厳密等価
  53:     r = a === s;
  54:     document.getElementById('ret09').innerHTML = 'a === s ... ' + r.toString() + '...' + typeof r;
  55:
  56:     //false
  57:     r = 0 == true;
  58:     document.getElementById('ret10').innerHTML = '0 == false ... ' + r.toString() + '...' + typeof r;
  59:
  60:     //true
  61:     r = 1 == true;
  62:     document.getElementById('ret11').innerHTML = '1 == true ... ' + r.toString() + '...' + typeof r;
  63:
  64:     //空文字
  65:     r = '' == false;
  66:     document.getElementById('ret12').innerHTML = '"" == false ... ' + r.toString() + '...' + typeof r;
  67:
  68:     //null
  69:     r = null == false;
  70:     document.getElementById('ret13').innerHTML = 'null == false ... ' + r.toString() + '...' + typeof r;
  71:
  72:     //NaN
  73:     r = NaN == false;
  74:     document.getElementById('ret14').innerHTML = 'NaN == false ... ' + r.toString() + '...' + typeof r;
  75:
  76:     //undefined
  77:     r = undefined == false;
  78:     document.getElementById('ret15').innerHTML = 'undefined == false ... ' + r.toString() + '...' + typeof r;
  79:
  80:     //undefinedの否定
  81:     r = !undefined == true;
  82:     document.getElementById('ret16').innerHTML = '!undefined == true ... ' + r.toString() + '...' + typeof r;
  83: }
  84: </script>

明示的な型変換

このように暗黙の型変換は複雑で、バグの温床になりかねない。
そこで、データ型が変わる可能性がある式では、明示的に型変換することをお勧めする。

明示的な型変換
関数／メソッド	意味
.toString()	Number型をString型に変換
Number()	Number型に変換数値以外の文字を含んでいるとNaNになる
parseInt()	Number型（整数）に変換数値以外の文字を読み飛ばして変換する
parseFloat()	Number型（小数）に変換数値以外の文字を読み飛ばして変換する
Boolean()	Boolean型に変換 0, ''（空文字），null，undefined，NaNはfalseに変換する

typeconv2.html を実行

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     let a = 12.5;       //Number型
  23:     let s1 = '12.5';    //String型
  24:     let s2 = '12.5a';   //String型
  25:     let r;
  26:     document.getElementById('ret01').innerHTML = 'a = ' + a.toString() + '...' + typeof a;
  27:     document.getElementById('ret02').innerHTML = 's1 = ' + s1.toString() + '...' + typeof s1;
  28:     document.getElementById('ret03').innerHTML = 's2 = ' + s2.toString() + '...' + typeof s2;
  29:
  30:     //Number型→String型
  31:     r = a.toString();
  32:     document.getElementById('ret04').innerHTML = 'a.toString() ... ' + r + '...' + typeof r;
  33:
  34:     //String型→Number型
  35:     r = Number(s1);
  36:     document.getElementById('ret05').innerHTML = 'Number(s1) ... ' + r + '...' + typeof r;
  37:
  38:     //String型→Number型
  39:     r = Number(s2);
  40:     document.getElementById('ret06').innerHTML = 'Number(s2) ... ' + r + '...' + typeof r;
  41:
  42:     //String型→Number型（整数）
  43:     r = parseInt(s2);
  44:     document.getElementById('ret07').innerHTML = 'parseInt(s2) ... ' + r + '...' + typeof r;
  45:
  46:     //String型→Number型（小数）
  47:     r = parseFloat(s2);
  48:     document.getElementById('ret08').innerHTML = 'parseFloat(s2) ... ' + r + '...' + typeof r;
  49:
  50:     //→Boolean型
  51:     r = Boolean(a);
  52:     document.getElementById('ret09').innerHTML = 'Boolean(a) ... ' + r + '...' + typeof r;
  53:
  54:     //→Boolean型
  55:     r = Boolean(s1);
  56:     document.getElementById('ret10').innerHTML = 'Boolean(s1) ... ' + r + '...' + typeof r;
  57:
  58:     //0→Boolean型
  59:     r = Boolean(0);
  60:     document.getElementById('ret11').innerHTML = 'Boolean(0) ... ' + r + '...' + typeof r;
  61:
  62:     //空文字→Boolean型
  63:     r = Boolean('');
  64:     document.getElementById('ret12').innerHTML = 'Boolean("") ... ' + r + '...' + typeof r;
  65:
  66:     //null→Boolean型
  67:     r = Boolean(null);
  68:     document.getElementById('ret13').innerHTML = 'Boolean(null) ... ' + r + '...' + typeof r;
  69:
  70:     //undefined→Boolean型
  71:     r = Boolean(undefined);
  72:     document.getElementById('ret14').innerHTML = 'Boolean(undefined) ... ' + r + '...' + typeof r;
  73:
  74:     //NaN→Boolean型
  75:     r = Boolean(NaN);
  76:     document.getElementById('ret15').innerHTML = 'Boolean(NaN) ... ' + r + '...' + typeof r;
  77: }
  78: </script>