■はじめに
こんにちは。白水（しらみず）と申します。
普段は不動産スタートアップでフロントエンドエンジニアとしてお仕事しています。
不動産系のサービスに携わっていると、賃料や管理費、敷金、礼金など数字に関わるものを多々扱うことがあります。
その中でも整数なのか少数なのかで、利用するJSのメソッドが違うため、毎回動作を確認するのが大変でした。
そこで、今回「Number()」と「parseFloat()」と「parseInt()」の動作違いを検証したので備忘録として残そうと思います。
短い記事なので、良ければご覧ください。
Shiramizu_Junya lit.link(リットリンク)
■Numberメソッド
Number("12"); // 12
Number("015", 10); // 15
Number("12.3"); // 12.3
Number("12.00"); // 12
Number("12.03"); // 12.03
Number("0.35"); // 0.35
Number("15,123"); // NaN
Number(undefined); // NaN
Number(null); // 0
Number(''); // 0
整数、少数を気にしないで、とりあえず数値型に変えたければNumberが良さそうな気がします。
しかし、Number(null);やNumber('');が「０」になるのは気をつけたほうが良さそうです。
■parseIntメソッド
parseInt('12', 10); // 12
parseInt("015", 10); // 15
parseInt('12.3', 10); // 12
parseInt('12.9', 10); // 12
parseInt('12.00', 10); // 12
parseInt("12.03", 10); // 12
parseInt("0.35", 10); // 0
parseInt("15,123", 10); // 15 → カンマあると、カンマ以降が消えちゃう。。。
parseInt(undefined, 10); // NaN
parseInt(null, 10); // NaN
parseInt('', 10); // NaN
少数でも切り捨てて整数にしたい場合は、parseIntが良さそうです。
四捨五入したい場合は、Math.floor()やMath.ceil()や**Math.round()**を使ったほうが良さそうです。
しかし、Number型に変換できないとNaNになるので、ここは注意が必要かなと思います。
日本のお金は「15,123円」のように「,」が入ることがあるので、そこは注意が必要そうです。
■parseFloatメソッド
parseFloat('12'); // 12
parseFloat("015", 10); // 15
parseFloat("12.3"); // 12.3
parseFloat("12.00"); // 12
parseFloat("12.03"); // 12.03
parseFloat("0.35"); // 0.35
parseFloat("15,123"); // 15 → カンマあると、カンマ以降が消えちゃう。。。
parseFloat(undefined) // NaN
parseFloat(null) // NaN
parseFloat(''); // NaN
少数を維持したい場合は、parseFloat()でいい感じです。
parseFloat() - JavaScript | MDN
■まとめ
数値を扱うWebサービスは多々ある中で、メソッドの戻り値が意図したものになるか気にする必要があるので、この機会に動作確認できてよかったです。