Help us understand the problem. What is going on with this article?

型変換のいろいろ

More than 5 years have passed since last update.

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) がわかりやすいかもしれませんが、+valuevalue - 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楽しい。

zawascript
業務ではUnity。 Webが好き。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした