JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示する方法｜DAD UNION

JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示する方法をご紹介します。
四捨五入はMath.round()、切り捨てはMath.floor()、切り上げはMath.ceil()関数を使います。

Contents

小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するCSS記述
小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するHTML記述
JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するJavaScriptの記述
JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するデモページ

小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するCSS記述

※四捨五入・切り捨て・切り上げした出力先（div）のCSS記述です。必要に応じて変更して下さい。

<style>
body {
  font-size: 14px;
  text-align: center;
  line-height: 2em;
}
h1{
  text-align: center;
  font-size: 18px;
  line-height: 1.6em;
  padding: 15px 0 40px 0;
}
div{
  font-size: 20px;
  font-weight: bold;
  padding: 5px 0;
}
</style>

小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するHTML記述

※数値「19.87654321」を小数点以下2桁で四捨五入・切り捨て・切り上げした結果をclass=”sisyagonyu2″、class=”kirisute2″、class=”kiriage2″要素に出力します。

  <h1>JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示</h1>

<div class="sisyagonyu1">
19.87654321
</div>
↓小数点以下2桁で四捨五入
<div class="sisyagonyu2"></div>

<br><br>

<div class="kirisute1">
19.87654321
</div>
↓小数点以下2桁で切り捨て
<div class="kirisute2"></div>

<br><br>

<div class="kiriage1">
19.87654321
</div>
↓小数点以下2桁で切り上げ
<div class="kiriage2"></div>

JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するJavaScriptの記述

※jquery-1.11.0.min.jsファイルを読み込みます。Math.round、Math.floor、Math.ceilを使って指定桁数以下で四捨五入・切り捨て・切り上げ処理を行って結果を返します。

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {

  //↓小数点以下2桁で四捨五入
  var s2 = sisyagonyu($('.sisyagonyu1').text(), 2);
  $('.sisyagonyu2').text(s2);

  //↓小数点以下2桁で切り捨て
  var ks2 = kirisute($('.kirisute1').text(), 2);
  $('.kirisute2').text(ks2);

  //↓小数点以下2桁で切り上げ
  var ka2 = kiriage($('.kiriage1').text(), 2);
  $('.kiriage2').text(ka2);


  //四捨五入
  function sisyagonyu(param, ketasu) {
    return Math.round(param * Math.pow(10, ketasu) ) / Math.pow(10, ketasu);
  }
  //切り捨て
  function kirisute(param, ketasu) {
    return Math.floor(param * Math.pow(10, ketasu) ) / Math.pow(10, ketasu);
  }
  //切り上げ
  function kiriage(param, ketasu) {
    return Math.ceil(param * Math.pow(10, ketasu) ) / Math.pow(10, ketasu);
  }
});
</script>