JavaScriptで文字列を数値に変換する:Number(), parseInt(), parseFloat()

JavaScriptで文字列を数値に型変換する方法について説明します。

Number(), parseInt(), parseFloat()を使った明示的な型変換

文字列を数値型に型変換するにはNumber(), parseInt(), parseFloat()を使います。

Number()は簡単に使えて便利ですが、数字以外を含む文字列を引数に指定するとNaNを返すので注意が必要です。

parseInt()は文字列を整数に変換し、実数の場合は小数点以下を切り捨てます。また、第2引数で変換時の基数を指定することができ、省略した場合は10進数として変換します。基数が10の場合は引数に数字以外の文字が含まれていても無視します。

parseFloat()は文字列を実数に変換します。引数に数字以外の文字が含まれている場合は無視します。

暗黙の型変換

文字列を数値演算すると暗黙に(内部で)数値型に変換されます。

ただし、文字列を含む加算では+が連結演算子として振る舞うため注意が必要です。次の例のように文字列が一つでも含まれると足し算ではなく文字列の連結が行われます。

Number()などを使った明示的な型変換の方が可読性が高まり暗黙の型変換にまつわるバグも減りますが、暗黙の型変換を利用すると短い表記で文字列を数値に変換することができます。次の例は、単項演算子として+を使うと正の符号として振る舞うことを利用して、文字列を数値に変換しています。

暗黙の型変換の注意点

特に暗黙の型変換をした場合、バグが起きやすくなります。アルファベットなどが含まれた文字列を数値変換する際にNaNになることに気づきにくい為です。一度NaNになった値は元に戻すことができず、NaNのままです。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて