2.7 型変換

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

サンプル・プログラム

暗黙の型変換

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

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

typeconv1.html を実行

0019: <script>
0020: //ページのロード時に実行
0021: window.onload = function() {
0022:     let a = 12.5;     //Number型
0023:     let s = '12.5';     //String型
0024:     let r;
0025:     document.getElementById('ret01').innerHTML = 'a = ' + a.toString() + '...' + typeof a;
0026:     document.getElementById('ret02').innerHTML = 's = ' + s.toString() + '...' + typeof s;
0027:
0028:     //Number型→String型
0029:     r = a.toString();
0030:     document.getElementById('ret03').innerHTML = 'a.toString() ... ' + r + '...' + typeof r;
0031:
0032:     //減算
0033:     r = a - s;
0034:     document.getElementById('ret04').innerHTML = 'a - s ... ' + r.toString() + '...' + typeof r;
0035:
0036:     //乗算
0037:     r = a * s;
0038:     document.getElementById('ret05').innerHTML = 'a * s ... ' + r.toString() + '...' + typeof r;
0039:
0040:     //除算
0041:     r = a / s;
0042:     document.getElementById('ret06').innerHTML = 'a / s ... ' + r.toString() + '...' + typeof r;
0043:
0044:     //大小比較
0045:     r = a > s;
0046:     document.getElementById('ret07').innerHTML = 'a > s ... ' + r.toString() + '...' + typeof r;
0047:
0048:     //等価
0049:     r = a == s;
0050:     document.getElementById('ret08').innerHTML = 'a == s ... ' + r.toString() + '...' + typeof r;
0051:
0052:     //厳密等価
0053:     r = a === s;
0054:     document.getElementById('ret09').innerHTML = 'a === s ... ' + r.toString() + '...' + typeof r;
0055:
0056:     //false
0057:     r = 0 == true;
0058:     document.getElementById('ret10').innerHTML = '0 == false ... ' + r.toString() + '...' + typeof r;
0059:
0060:     //true
0061:     r = 1 == true;
0062:     document.getElementById('ret11').innerHTML = '1 == true ... ' + r.toString() + '...' + typeof r;
0063:
0064:     //空文字
0065:     r = '' == false;
0066:     document.getElementById('ret12').innerHTML = '"" == false ... ' + r.toString() + '...' + typeof r;
0067:
0068:     //null
0069:     r = null == false;
0070:     document.getElementById('ret13').innerHTML = 'null == false ... ' + r.toString() + '...' + typeof r;
0071:
0072:     //NaN
0073:     r = NaN == false;
0074:     document.getElementById('ret14').innerHTML = 'NaN == false ... ' + r.toString() + '...' + typeof r;
0075:
0076:     //undefined
0077:     r = undefined == false;
0078:     document.getElementById('ret15').innerHTML = 'undefined == false ... ' + r.toString() + '...' + typeof r;
0079:
0080:     //undefinedの否定
0081:     r = !undefined == true;
0082:     document.getElementById('ret16').innerHTML = '!undefined == true ... ' + r.toString() + '...' + typeof r;
0083: }
0084: </script>

明示的な型変換

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

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

typeconv2.html を実行

0019: <script>
0020: //ページのロード時に実行
0021: window.onload = function() {
0022:     let a = 12.5;     //Number型
0023:     let s1 = '12.5';    //String型
0024:     let s2 = '12.5a';   //String型
0025:     let r;
0026:     document.getElementById('ret01').innerHTML = 'a = ' + a.toString() + '...' + typeof a;
0027:     document.getElementById('ret02').innerHTML = 's1 = ' + s1.toString() + '...' + typeof s1;
0028:     document.getElementById('ret03').innerHTML = 's2 = ' + s2.toString() + '...' + typeof s2;
0029:
0030:     //Number型→String型
0031:     r = a.toString();
0032:     document.getElementById('ret04').innerHTML = 'a.toString() ... ' + r + '...' + typeof r;
0033:
0034:     //String型→Number型
0035:     r = Number(s1);
0036:     document.getElementById('ret05').innerHTML = 'Number(s1) ... ' + r + '...' + typeof r;
0037:
0038:     //String型→Number型
0039:     r = Number(s2);
0040:     document.getElementById('ret06').innerHTML = 'Number(s2) ... ' + r + '...' + typeof r;
0041:
0042:     //String型→Number型（整数）
0043:     r = parseInt(s2);
0044:     document.getElementById('ret07').innerHTML = 'parseInt(s2) ... ' + r + '...' + typeof r;
0045:
0046:     //String型→Number型（小数）
0047:     r = parseFloat(s2);
0048:     document.getElementById('ret08').innerHTML = 'parseFloat(s2) ... ' + r + '...' + typeof r;
0049:
0050:     //→Boolean型
0051:     r = Boolean(a);
0052:     document.getElementById('ret09').innerHTML = 'Boolean(a) ... ' + r + '...' + typeof r;
0053:
0054:     //→Boolean型
0055:     r = Boolean(s1);
0056:     document.getElementById('ret10').innerHTML = 'Boolean(s1) ... ' + r + '...' + typeof r;
0057:
0058:     //0→Boolean型
0059:     r = Boolean(0);
0060:     document.getElementById('ret11').innerHTML = 'Boolean(0) ... ' + r + '...' + typeof r;
0061:
0062:     //空文字→Boolean型
0063:     r = Boolean('');
0064:     document.getElementById('ret12').innerHTML = 'Boolean("") ... ' + r + '...' + typeof r;
0065:
0066:     //null→Boolean型
0067:     r = Boolean(null);
0068:     document.getElementById('ret13').innerHTML = 'Boolean(null) ... ' + r + '...' + typeof r;
0069:
0070:     //undefined→Boolean型
0071:     r = Boolean(undefined);
0072:     document.getElementById('ret14').innerHTML = 'Boolean(undefined) ... ' + r + '...' + typeof r;
0073:
0074:     //NaN→Boolean型
0075:     r = Boolean(NaN);
0076:     document.getElementById('ret15').innerHTML = 'Boolean(NaN) ... ' + r + '...' + typeof r;
0077: }
0078: </script>