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

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

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

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

特殊な数値の表記

基礎知識として以下の表記についておさえておくと良いかと。
・ 5e2 →5×(10の2乗) → 500
・ 0o、0b、0xはそれぞれ2進数、8進数、16進数を表す。
ex.0o11 → 3、0b11 → 9、0x11 → 17
・16進数では10以降を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’は2進数を表す表記。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は基数の意味。2進数とか16進数とか。)

説明

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

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

実行結果

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進数で返す。

④下記が扱える
・小数点
・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)

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
ユーザーは見つかりませんでした