Javascript 四捨五入・切り上げ・切り捨ての方法 - 関数 Math.round, Math.ceil, Math.floor
JavaScript で、数値を四捨五入・切り上げ・切り捨てをする方法を紹介します。
実務では外貨などを扱う場合や消費税の計算など、いろいろな場面で四捨五入・切り上げ・切り捨てをよく使います。
数字の端数を切り捨てる事を「丸める」といいます。
ここでは JavaScriptで数値を四捨五入・切り上げ・切り捨てをする方法 を紹介します。
Sponsored Links
目次
利用関数
以下の 3 つの関数を利用することで、四捨五入・切り上げ・切り捨てを可能とします。
関数 | 備考 |
---|---|
Math.round | 四捨五入 |
Math.ceil | 切り上げ |
Math.floor | 小数以下を切り捨て |
Javascript で四捨五入・切り上げ・切り下げする場合、小数点の扱いには少し工夫が必要です。
Sponsored Links
小数点第 2 位で四捨五入させる場合
基となる数値を 10 で乗算させ、それを四捨五入し、その後 10 で除算して小数点を戻します。 結果、小数点第 2 位で四捨五入された値を求めることができます
Math.round 基となる値が 12345.6789 の場合
- 123456.789 = 12345.6789 * 10 // 10 で乗算
- 123457 = Math.round(123456.789) // 四捨五入
- 12345.7 = 1234567 / 10 // 10 で除算
Answer : 12345.7
小数点第 3 位で切り上げさせる場合
基となる数値を 100 で乗算させ、それを切り上げし、その後 100 で除算して小数点を戻します。 結果、小数点第 3 位で切り上げされた値を求めることができます
Math.ceil 基となる値が 12345.6789 の場合
- 1234567.89 = 12345.6789 * 100 // 100 で乗算
- 1234568 = Math.ceil(1234567.89) // 切り上げ
- 12345.68 = 1234568 / 100 // 100 で除算
Answer : 12345.68
Sponsored Links
小数点第 3 位で切り捨てさせる場合
基となる数値を 100 で乗算させ、小数以下を切り捨てし、その後 100 で除算して小数点を戻します。 結果、小数点第 3 位で切り捨てされた値を求めることができます。
Math.floor 基となる値が 12345.6789 の場合
- 1234567.89 = 12345.6789 * 100 // 100 で乗算
- 1234568 = Math.floor(1234567.89) // 切り上げ
- 12345.67 = 1234568 / 100 // 100 で除算
Answer : 12345.67
上記を 1 つの関数にすると、以下のようになります。
/** * 指定された方法も基づき計算します。 * * @param value 数値 * @param digit 桁数 * @param method '1': 四捨五入, '2': 切り上げ, '3': 切り捨て * @return 計算した値 */ function roundCalc(value, digit, method) { if ( value == "" || digit == "" || method == "" ) { return value; } var v = Number(value) if ( isNaN(v) ) return value; var d = Number(digit) if ( isNaN(d) ) return value; var t = "1"; for ( i = 0; i < Number(d); i++ ) { t += "0"; } var digits = Number(t); // 四捨五入 if ( method == "1" ) return Math.round(parseFloat(value) * digits) / digits; // 切り上げ if ( method == "2" ) return Math.ceil(parseFloat(value) * digits) / digits; // 切り捨て if ( method == "3" ) return Math.floor(parseFloat(value) * digits) / digits; return value; }
そして、利用用途に合わせた関数を用意します。
/** * 数値を指定した桁数に四捨五入した値を返します。 * * @param value 数値 * @param digit 桁数 * @return 四捨五入した値 */ function round(value, digit) { return roundCalc(value, digit, "1"); } /** * 数値を切り上げます。 * * @param value 数値 * @param digit 桁数 * @return 切り上げした値 */ function roundUp(value, digit) { return roundCalc(value, digit, "2"); } /** * 数値を切り捨てます。 * * @param value 数値 * @param digit 桁数 * @return 切り捨てした値 */ function roundDown(value, digit) { return roundCalc(value, digit, "3"); }
以下のように読み出し元の html を生成すれば完成です。
<input id="roundValue" type="text" value="12345.6789"><input id="resultRoundValue" type="text" value="" readonly ><input type="button" value="計算" onclick="resultRoundValue.value=round(roundValue.value, '1');">:小数第 2 位で四捨五入<br /> <input id="roundUpValue" type="text" value="12345.6789"><input id="resultRoundUpValue" type="text" value="" readonly ><input type="button" value="計算" onclick="resultRoundUpValue.value=roundUp(roundUpValue.value, '2');">:小数第 3 位で切り上げ<br /> <input id="roundDownValue" type="text" value="12345.6789"><input id="resultRoundDownValue" type="text" value="" readonly ><input type="button" value="計算" onclick="resultRoundDownValue.value=roundDown(roundDownValue.value, '2');">:小数第 3 位で切り捨て<br />
サンプル
こちら にサンプルを用意しています。
Sponsored Links
ソース
ソースは こちら からダウンロードができます。
本ツールの利用やソースの変更は自由ですが、こちらでは一切の保障ができませんので、自己責任にてお願い致します。
おつかれさまでした。
Sponsored Links