小数表記の文字列をJavaScript側で引数に渡して数値に変換して処理を行うことは開発現場で時々あることです。
入力ボックスに小数を入れ、それをJavaScript側で受け取って計算し、結果を表示する。
このような処理をしたいこともあります。
しかし、小数表記の文字列を引数に渡して数値に変換する関数はparseFloatとNumberの２つがあります。
どちらを使えばいいか、よく理解せずに使うと予期せぬ動作になることがあるため、この2つの関数の違いはきちんと把握しておきたいところです。
この記事の結果としてNumberを使った方がいいという結果になっていますが、なぜそう言えるのかをきちんと理解してほしいと思います。
parseFloatについて
parseFloatは文字列で与えられた数値を小数に変換します。
例えば以下のような処理を書くと、parseFloatは文字列を小数に変換して表示します。
var pFloat = parseFloat('1.37');
$("#parseFloatResult").text(pFloat);
Numberについて
Numberは文字列で与えられた数値を整数、または小数に変換します。
例えば以下のように処理を書くと、Numberは与えられた数値を整数、または小数に変換して表示します。
//'3'をNumberで小数に変換して表示
var num = Number('3');
$("#numberResult").text(num);
//'3.45'をNumberで小数に変換して表示
var num = Number('3.45');
$("#numberResult2").text(num);
parseFloatで”3”を変換しようとすると3と表示されるので、一応整数の変換にも使えますが、整数の変換が目的でparseFloatを使うのはソースの誤読につながるため、あまりお勧めしません（他の方がソースを見た時に引数に小数の値が渡ってくるケースがあるかを考えてしまいます）。
一方で、Numberは整数と小数のどちらにも対応しており、引数として渡ってくる値が小数、整数のどちらの可能性がある場合にも利用できるし、小数の意味を含むfloatが含まれていないのでソースの可読性を下げることがありません。
parseFloatの様々な動作
parseFloatの動作を確認するために、様々な文字列を入れて動作を確認してみます。
文字列の”2″を引数に指定すると2に変換されるところは問題がないのですが、それ以降が注意点が必要なところです。
文字列の”2.4a”を引数に指定すると、なんと2.4に変換しています。
アルファベットと数値が混合している文字列でも、エラーとせずに数値に変換する処理は、場合によっては予期しない動作になり、バグの原因となります。
そのため、アルファベットと数値が混じる変数が引数に渡らないようにしっかりとチェックを行う必要があります。
3個目の”open”を引数として指定した例と4個目の半角スペースや空文字を指定した例では変換エラーとなりNaNが返されています。
アルファベットの単語などであれば処理前にチェックを行うことでNaNが返ってくることを防ぐことが出来ますが、半角スペースや空文字が入った場合にNaNで返してほしくないケースもあります。
この場合は、半角スペースや空文字などの場合に条件分岐を行って、parseFloatを通らないようにするなど、配慮が必要になってきます。
5個目の例は10.4×10の-1乗をeを使って表現したものを変数として渡しています。
この場合は、そのままの表現にはならず、eの部分を計算した結果を返すようになっています。
場合によっては利用するかもしれませんが、JavaScriptはWeb系のプログラムでよく使われるので、このe表記を使った数値を変換するケースを自分はまだ経験したことがありません。
もしe表記の数値を小数に変換する処理が必要になる経験をすることになった場合は、eの部分を計算した結果が得られることを把握しておくとよいでしょう。
Numberの様々な動作
parseFloatで指定した引数をNumberでも同じように指定してみると以下のようになります。
基本的にparseFloatと変わりませんが、大きく異なるのが引数に”2.4a”のようにアルファベットを含んだ場合、そして空文字やスペースを引数に指定した場合です。
”2.4a”などのようにアルファベットを含んだ引数をNumberで変換しようとするとエラーとなり、NaNが返ってきます。
この点についてはparseFloatよりも厳格な変換になっているので、アルファベットを含んでいることが原因で予期せぬ動作になる心配がなくなります。
また、空文字やスペースの場合は、エラーではなく0を返すようになっています。
ここが少しNumberのクセがあるところと言えますが、空文字やスペースはtrim関数の利用や条件分岐でNumberを通らないようにすることで0にすることを避けられるので、0に変換する動作が嫌であれば条件分岐でNumber関数を通らない作りとするようにしましょう。
parseFloatよりもNumberを使った方が無難
parseFloatとNumberの動作を比較しながら見てきましたが、個人的にはNumberを使った方が無難であるかと思います。
parseFloatは、数値とアルファベットが混在しているときに数値に変換することが出来てしまい、その後の処理をそのまま通るため、バグの原因となります。
一方でNumberは数字とアルファベットが混在していれば原則として変換せずにNaNを返すので、それ以降の処理を通らずにそこで止まるため、デバッグ段階で原因を発見しやすいです。
ただし、空文字やスペースを0に変換するという仕様があるため、0に変換してほしくない場合はNumberを通る条件を考えて、空文字やスペースを通らないようにする工夫は必要です。
parseFloatを整数だけの変換に使うことは絶対に避けてほしいものであり、ソースの可読性が下がるし、なぜこのような作りにしたのかが他の人から見た時に全く分からなくなります。
こういった意味でも、小数や整数を数値に変換する際は、Numberを使うことを推奨します。
なお、整数のみの変換の場合はJavaScriptにはparseIntという関数が用意されていますが、parseFloatと似たような性質があるので、あまり使うことはお勧めしません。
今回の記事はここまでとなります。
また次回の記事でお会いしましょう。
