ホームページ制作 | 墨田区

Developer's Blog

Javascript 四捨五入・切り上げ・切り捨ての方法 - 関数 Math.round, Math.ceil, Math.floor

JavaScript で、数値を四捨五入・切り上げ・切り捨てをする方法を紹介します。

Javascript 四捨五入・切り上げ・切り捨ての方法 - 関数 Math.round, Math.ceil, Math.floor

実務では外貨などを扱う場合や消費税の計算など、いろいろな場面で四捨五入・切り上げ・切り捨てをよく使います。

数字の端数を切り捨てる事を「丸める」といいます。

ここでは JavaScriptで数値を四捨五入・切り上げ・切り捨てをする方法 を紹介します。

Sponsored Links


利用関数

以下の 3 つの関数を利用することで、四捨五入・切り上げ・切り捨てを可能とします。

関数備考
Math.round四捨五入
Math.ceil切り上げ
Math.floor小数以下を切り捨て

Javascript で四捨五入・切り上げ・切り下げする場合、小数点の扱いには少し工夫が必要です。

Sponsored Links

小数点第 2 位で四捨五入させる場合

基となる数値を 10 で乗算させ、それを四捨五入し、その後 10 で除算して小数点を戻します。 結果、小数点第 2 位で四捨五入された値を求めることができます

Math.round 基となる値が 12345.6789 の場合

  1. 123456.789 = 12345.6789 * 10 // 10 で乗算
  2. 123457 = Math.round(123456.789) // 四捨五入
  3. 12345.7 = 1234567 / 10 // 10 で除算

Answer : 12345.7

小数点第 3 位で切り上げさせる場合

基となる数値を 100 で乗算させ、それを切り上げし、その後 100 で除算して小数点を戻します。 結果、小数点第 3 位で切り上げされた値を求めることができます

Math.ceil 基となる値が 12345.6789 の場合

  1. 1234567.89 = 12345.6789 * 100 // 100 で乗算
  2. 1234568 = Math.ceil(1234567.89) // 切り上げ
  3. 12345.68 = 1234568 / 100 // 100 で除算

Answer : 12345.68

Sponsored Links

小数点第 3 位で切り捨てさせる場合

基となる数値を 100 で乗算させ、小数以下を切り捨てし、その後 100 で除算して小数点を戻します。 結果、小数点第 3 位で切り捨てされた値を求めることができます。

Math.floor 基となる値が 12345.6789 の場合

  1. 1234567.89 = 12345.6789 * 100 // 100 で乗算
  2. 1234568 = Math.floor(1234567.89) // 切り上げ
  3. 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