Javascript 四捨五入・切り上げ・切り捨て方法 Math.round,Math.ceil,Math.floor ホームページ制作 | 墨田区

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

LINEで送る
Pocket

JavaScript で、数値を四捨五入・切り上げ・切り捨てをする方法をご紹介します。
実務では、外貨などを扱う場合や、消費税の計算など、いろいろな場面で大変よく使いますよね。
※数字の端数を切り捨てる事を「丸める」といいます。

利用関数

以下の 3 つの関数を利用することで、四捨五入・切り上げ・切り捨てを可能とします。
関数備考
Math.round四捨五入
Math.ceil切り上げ
Math.floor小数以下を切り捨て

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




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


小数点第 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


小数点第 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 />

サンプル

こちら にサンプルを用意しています。

ソース

ソースは こちら からダウンロードができます。

[注]本ツールの利用やソースの変更は自由ですが、こちらでは一切の保障ができませんので、自己責任にてお願い致します。

おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

Javascript / jQueryの勉強が思うように進まないときは!

Javascript / jQueryの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Javascript / jQueryコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Javascript / jQueryコースあり!現場のプロが直接指導 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL