JavaScriptで小数点第n位までで四捨五入する方法

はじめに

JavaScriptで 0.123456789 → 0.12346 にするのどうやるんだろ？てなったので整理してみた

結論

• toFixedで、「小数点第n位まで」を指定して、四捨五入した結果を得られる
  • ただし、返り値は文字列となる

数値で小数点第5位まで取得するサンプル

const data = 0.123456789;
const digit = 5;
console.log(parseFloat(data.toFixed(digit))); // 0.12346
console.log(typeof parseFloat(data.toFixed(digit))); // number

やってみたこと

四捨五入する方法の確認

roundを使う

Math.roundを使って四捨五入ができる。返り値は整数

const data = 0.123456789;
console.log(Math.round(data)); // 0

toFixedを使う

toFixedで　小数点の後 に現れる桁の数を指定できる。最後の桁で四捨五入される。返り値は文字列。

const data = 0.123456789;
const digit = 0;
console.log(data.toFixed(digit)); // 0

const data = 0.123456789;
const digit = 3;
console.log(data.toFixed(digit)); // 0.123

const data = 0.123456789;
const digit = 5;
console.log(data.toFixed(digit)); // 0.12346

toFixedの返り値をNumberにする

parseFloatを使う

const data = 0.123456789;
const digit = 5;
console.log(parseFloat(data.toFixed(digit))); // 0.12346
console.log(typeof parseFloat(data.toFixed(digit))); // number

（おまけ）Math.roundに一手間加えて桁数をコントロールする

Math.roundにわたす前にMath.powで10のn乗して、最後に10のn乗で割る。 その上でparseFloatする

const data = 0.123456789;
const digit = 5;
console.log(Math.round( data * Math.pow( 10, digit )) / Math.pow( 10, digit )); // 0.12346

数値の変化の流れとしてはこんな感じ。

• 0.123456789
  ↓ 10の5乗(10 x 10 x 10 x 10 x 10 = 100000)
• 12345.6789
  ↓ round
• 12346
  ↓ 10の5乗(10 x 10 x 10 x 10 x 10 = 100000)で割る
• 0.12346

参考

• javascriptで小数点以下の桁数を指定して表示する – nackpan Blog https://nackpan.net/blog/2013/11/30/javascript-tofixed/
  • 最初のとっかかりに参考にさせていただきました。シンプルでやさしい解説
• Math.round() - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/round
• Number.prototype.toFixed() - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
• Math.pow() - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/pow