おじんブログ

Webアプリに関する知見とか雑記です

JavaScript で小数点以下を桁数指定して四捨五入するなら、parseFloat() と toFixed() を組み合わせればよい

TL;DR

第一引数に四捨五入する値を、第二引数に小数点以下の桁数を指定する関数を定義する。

/**
 * Rounding number with digit
 * Example:
 * round(3.14159265359, 2) = 3.14
 * @param {number} value
 * @param {number} digits default : 0
 * @returns {number} rounded number
 */
function round(value, digits = 0){
  return parseFloat(value.toFixed(digits))
}

// Math.E = 3.141592653589793
round(Math.PI, 3)
// expected output: 3.142

round(Math.PI)
// expected output: 3

Math.round(Math.PI)
// expected output: 3

解説

JavaScriptで四捨五入するための関数として Math.round() があった。 ただしこれは、引数として与えられた数字を四捨五入して整数部分しか表示できない。

四捨五入後に、整数部分だけでなく、小数点以下の桁数取り扱う場合は下記の関数を組み合わせる必要がある。

まず toFixed() で桁数を指定して整形する。このとき、戻り値が文字列なので、 parseFloat() によって小数点を含んだ文字列に変換する。

3.141592653589793.toFixed(3)
// expected output: "3.142"
parseFloat("3.142")
// expected output: 3.142

厳密にやる場合はparseFloat() の値に対して Number.isNaN() で判定すれば良いと思われる。

余談

自分がこの方法を調べたとき、元の数字に100を掛けて Math.round() した後に再び100で割る、という方法がかなり出てきて直感的に「なんかスマートじゃない」と思った。

なので、調べてみたところ、Math.jsが提供している round() 関数では自分がやりたいことに近かったので、該当する実装箇所 を参考にした。

他にも参考になりそうな実装があるので数値処理をしたい方は Math.js のソースを読めば良いと思います。