Number(),parseInt(),parseFloat()のちがい

数値型に変換したい時、どれ使えばいい？

数値型に変換したいけど、どれを使っていいのかわからん！
ってなったのでまとめました。

####特殊な数値の表記
基礎知識として以下の表記についておさえておくと良いかと。
・ 5e2 →5×(10の2乗) → 500
・ 0b、0o、0xはそれぞれ２進数、8進数、16進数を表す。
ex.0b11 → 3、0o11 → 9、0x11 → 17
・16進数では１０以降をa~fで表すことができる(1~9そのまま 10=a,11=b...16=f)
ex.1a → 26、ff → 255

#Number()
####構文
Number(value)
####説明
①文字列を数値にして返す。
②戻り値は10進数になる。
③下記が扱える
・小数点
・10のn乗を表すe
・基数を表す0x,0b,0o
・+、-
・+Infinity、-Infinity
④上記と数字以外を含む文字列を引数にするとNaNを返す。
⑤‘ ‘やnullの戻り値は0になる。

####実行結果

qiita.rb

Number('123')    //123 （①）
Number('12.3')   //12.3  （③）
Number('12.00')  //12 （③ .00は省略されている）
Number('123e-1') //12.3(③e-1は10のマイナス一乗の意味) 
Number(' ')  //0(⑤)
Number(null) //0 (⑤)
Number('0x11')  //17(③‘0x’は16進数を表す表記。0x11で16進数の11の意味) 
Number('0b11')  //3(③‘0b’は２進数を表す表記。0b11で2進数の11の意味) 
Number('0o11')  //9(③‘0o’は8進数を表す表記。0o11で8進数の11の意味) 
Number('foo')   //NaN(⑤ちなみにNaNは数値型です。) 
Number('100a')  //NaN (⑤)
Number('-Infinity') //-Infinity (③)

#parseInt()
####構文
parseInt(string[, radix])
(radixは基数の意味。２進数とか16進数とか。)
####説明
第一引数(string)を文字列に変換し解析して、整数またはNaNを返す。
①数字以外の文字に出会うと、それ以降は無視し、その時点までで解析した整数を返す。
②したがって、少数の場合は.以下を切り捨てた値を返す。
③ただし+と-は扱える。
④第二引数(radix)で変換時の基数を指定することができる。
⑤基数を省略した場合は10進数として変換するが注意が必要。基本的には基数を指定した方が良い。（※理由）

※０で始まる数値の場合に不具合や予期せぬ結果になりやすいため。
※0x、0b、０oは16進数、2進数、8進数を表すため、これらで始まる値はNaNではなく10進数での数値として返ってくる)ex. parseInt(0o11) // 9（0oは８進数を表す）
※上記以外でも0で始まる数値は８進数か１０進数のどちらかで返されてしまうが、それは環境による。

####実行結果

qiita.rb

parseInt('123',10)  //123 
parseInt('12.3',10) //12 (②小数点以下は切り捨てる)
parseInt('ff', 16)  //255(③16進数の整数)
parseInt('123px',10) //123(①pxは無視される)
parseInt('-123',10)  //-123(③)
parseInt('Infinity',10) //NaN(Infinityは扱えない)

#parseFloat()
####構文
parseFloat(value)
valueは文字列か数値
####説明
①引数（value）を実数に変換する。(実数とは存在する全ての数。対義語は虚数)
②引数が数値の場合は数値を10進数で返す。
③引数が文字列の場合は文字列を数値として解析し、その結果を１０進数で返す。

④下記が扱える
・小数点
・10のn乗を表す’e’
・+Infinity,-Infinity
・+、-
⑤解析できない数値は無視される。
⑥解析できない文字はNaNで返す。

####実行結果

qiita.rb

parseFloat('2.8') //2.8（④小数点も扱える）
parseFloat('73bpm') //73（⑦解析できない文字は無視）
parseFloat('280e-2') //2.8 (④280×(10の-2乗)なので)
parseFloat({toString: function(){ return 2.8}}) //2.8
parseFloat('ff') //NaN (⑥)
parseFloat('Infinity') //Infinity(④)

#数字の文字列と演算子、nullの組み合わせ
####説明
JavaScriptはデータ型を自動変換してくれますが、下記のように'誤った'データ型を操作する時には自動的に'正しい'データ型に変換します。

####実行結果

qiita.rb

5 + null    // 5         null -> 0
"5" + null  // "5null"   null -> "null"
"5" + 2     // "52"      2 -> "2"
"5" - 2     // 3         "5" -> 5
"5" * "2"   // 10        "5"と"2" -> 5と2

typeof(+'5') //number

####所感
これ使うとコードの可読性が高まりますね。特に実行結果の最後のところ
文字型'5'を数値型に変換するのに +'5'とするだけですもんね。
ただ+を使うと文字列として連結される可能性があるので、実用するなら
'5' - 0
みたいな形がいいのかなーと。

##参考
Number - JavaScript | MDN
parseInt() - JavaScript | MDN
parseFloat() - JavaScript | MDN
JavaScript Type Conversion

##追記
指摘をいただき下記をそれぞれに加えました。(2020/5/23)
・+と-が扱えるか否か
・Infinityが扱えるか否か

数字の文字列と演算子、nullの組み合わせを加筆(2020/5/24)