JavaScriptは型変換がおもしろいと思うので残しておく
JavaScriptの勉強中なので、こうしたほうがいいなどありましたらガンガン言っていただけると喜びます。
基本型から
文字列 と 数値
変換の方法がいくつかあり、それぞれ挙動が違ってきます。
文字列 → 数値
var value = '1234';
// 以下、1234
Number(value);
parseInt(value,10);
value - 0;
+value;
value - 0
数値演算のオペランドに文字列値を書くと、暗黙に数値に型変換されます。（+は文字列連結として扱われる）
そのため、value - 0 ではnumが暗黙の型変換によって数値になりますが、0を引いても数値は変わらないため型変換だけが行われることになります。
+value
また、+演算子を単項演算子で使用すると、正の符号演算になります。正の符号演算で数値型への型変換が行われるので、+value とだけ記述すると、結果的に数値型への型変換のみを行います。
---- 2015/05/14追記 ----
+valueに関して
Airbnb JavaScript Style Guideによると +valueは //badとなっておりましたので、parceInt()やNumber()を使用するのが良さそうです。
しかし、全てが同じ挙動をするわけではなく、それぞれ微妙に違う動きをします。
// 文字列混じり(後)
var value = '123px';
Number(value); // NaN
parseInt(value,10); // 123
value - 0; // NaN
+value; // NaN
// 文字列混じり(前)
value = 'A123';
Number(value); // NaN
parseInt(value,10); // NaN
value - 0; // NaN
+value; // NaN
// 空文字
value = '';
Number(value); // 0
parseInt(value,10); // NaN
value - 0; // 0
+value; // 0
JavaScriptをあまり知らない人からすると、Number(value) や parseInt(value,10) がわかりやすいかもしれませんが、+value や value - 0 のほうが少しだけ短いですね。
また、+valueが一番速く、またメジャーでもあるようです。
数値 → 文字列
var value = 1234
// 以下、'1234'
String(value);
value.toString();
value + '';
// 特別な値
String(NaN); // 'NaN'
String(Infinity) // 'Infinity'
value + '' が使われることが多いようです。
数値、文字列 と ブーリアン型
JavaScriptでのブーリアン型への型変換の多くは暗黙的なものを利用しますね。(if文やwhile文の条件式に直接記述)
数値、文字列 → ブーリアン型
以下の値はJavaScriptでは全てfalseになります。
- 数値 0
- 数値 NaN
- 文字列値 '' (空文字列)
- undefined値
- null値
逆に言うと、これ以外の値が全てtrueになります。
また、オブジェクト型の話になりますが、オブジェクト型を変換すると全てtrueになります。
型変換の手法として、Boolean関数を使うか、!演算を使用したイディオムがあります。
// Boolean関数を使う
Boolean(1); // true
Boolean(0); // false
Boolean(NaN); // false
Boolean('zawa') // true
Boolean('false') // true
Boolean('') // false
Boolean(null); // false
Boolean(undefined); // false
// !を使う
!!1; // true
!!0; // false
!!'zawa'; // true
!!''; // false
!!null; // false
!!undefined; // false
// オブジェクト型の型変換
// newを使うことによってオブジェクト生成
// 全て true
Boolean( new Number(0) );
Boolean( new String('') );
Boolean( new Boolean(false) ); // 注意!
!!
!演算子はブーリアン型のオペランドに対する論理否定演算子であり、ブーリアン型以外の値に対してはブーリアン型への変換が行われます。その後に真偽値の反転を行います。
すなわち、反転した値を更に反転するので、結果として型変換しただけということになります。
ブーリアン型 → 数値、文字列
あまりすることが無いかもしれませんが、記述しておきます。
- 数値型への変換はtrueが1、falseが0になります
- 文字列型への変換はそのままの文字列になります
// ブーリアンから数値へ
Number(true); // 1
Number(false); // 0
true - 0; // 1
+true ; // 1
// これはだめ
parseInt(true,10); // NaN
// ブーリアンから文字列へ
String(true); // 'true'
String(false); // 'false'
true + ''; // 'true'
true.toString(); // 'true'
null値、undefined値の型変換
// 数値へ変換
Number(null); // 0
Number(undefined); // NaN
// 文字列へ変換
String(null); // 'null'
String(undefined); // 'undefined'
基本型とオブジェクト型
JavaScriptといえばオブジェクト（？）。
当然、オブジェクト型も型変換することができます。
オブジェクト型 → 基本型
表
| 変換先 | 結果 |
|---|---|
| 文字列型 | オブジェクトのtoStringメソッドの結果を文字列型に変換したもの。 |
| 数値型 | valueOfメソッドの結果になる。 valueOfメソッドの結果が数値にできなければtoStringメソッドの結果を数値に変換したもの |
| ブーリアン型 | true |
例
// オブジェクト生成
var obj = {value: 1}
// 文字列
String(obj); // '[object Object]'
obj.toString(); // '[object Object]'
// 数値
Number(obj); // NaN
// ブーリアン型
Boolean(obj) // true
// toStringメソッドの実装を変更
obj.toString = function(){
return '1234';
}
// 変更後
String(obj); // '1234'
obj.toString(); // '1234'
Number(obj); // 1234
Boolean(obj); // true
基本型 → オブジェクト型
基本型からオブジェクト型への変換は、暗黙に変換されることが多いので、そもそも使う必要性が余り感じられませんが一応。
表
| 変換前 | 変換後 |
|---|---|
| 文字列型 | Stringオブジェクト |
| 数値型 | Numberオブジェクト |
| ブーリアン型 | Booleanオブジェクト |
| null型 | Errorオブジェクト |
| undefined型 | Errorオブジェクト |
例
// 文字列をオブジェクトに
// Stringオブジェクトが生成される
Object('hoge');
new Object('hoge');
new String('hoge');
// 数値をオブジェクトに
// Numberオブジェクトが生成される
Object(123);
new Object(123);
new Number(123);
// ブーリアン値をオブジェクトに
// Booleanオブジェクトが生成される
Object(true);
new Object(true);
new Boolean(true);
// null値、undifined値をオブジェクトに
// Errorオブジェクトが生成される
Object(null);
new Object(null);
Object(undefined);
new Object(undefined);
おわりに
少し長くなってしまいましたが、型変換についてでした。
実際はどんな風に使われているのかわかりませんが、ユニークな型変換が多いですね。
JavaScript楽しい。