JavaScript PR

JavaScriptで理解する:小数点以下の数値を桁数指定で四捨五入、切り捨て、切り上げする完全ガイド

  /
記事内に商品プロモーションを含む場合があります

今回はJavaScriptを使って、小数点以下の数値を桁数指定して四捨五入、切り捨て、切り上げをする方法について詳しく解説します。
このテクニックは、ウェブ開発やデータ処理において非常に役立ちます。特に、金融や科学計算などの精度が求められる場面での応用が可能です。まずは基本的な関数の使い方から見ていきましょう。

Contents

JavaScriptの数学関数を使った数値処理

JavaScriptでは、Math オブジェクトを使用して様々な数学計算が行えます。ここでは、特に小数点以下の処理に焦点を当てて、四捨五入には Math.round()、切り捨てには Math.floor()、切り上げには Math.ceil() を使用します。

  1. 四捨五入 – Math.round()
    Math.round() 関数は、最も近い整数に四捨五入します。例えば、Math.round(1.5) は 2 に、Math.round(1.4) は 1 に四捨五入されます。
  2. 切り捨て – Math.floor()
    Math.floor() 関数は、与えられた数値以下の最大の整数に切り捨てます。たとえば、Math.floor(1.9) は 1 に切り捨てられます。
  3. 切り上げ – Math.ceil()
    Math.ceil() 関数は、与えられた数値以上の最小の整数に切り上げます。例えば、Math.ceil(1.1) は 2 に切り上げられます。

小数点以下を桁数指定して処理する方法

小数点以下を特定の桁数で四捨五入、切り捨て、切り上げを行うには、上記の関数を少し工夫して使います。以下の関数を定義して、任意の桁数で処理を行う方法を見てみましょう。

// 四捨五入
function sisyagonyu(value, digits) {
    const factor = Math.pow(10, digits);
    return Math.round(value * factor) / factor;
}

// 切り捨て
function kirisute(value, digits) {
    const factor = Math.pow(10, digits);
    return Math.floor(value * factor) / factor;
}

// 切り上げ
function kiriage(value, digits) {
    const factor = Math.pow(10, digits);
    return Math.ceil(value * factor) / factor;
}

実装例とデモページ

これらの関数を実際に使ってみると、より具体的な理解が深まります。例えば、数値 19.87654321 を小数点以下2桁でそれぞれの方法によって処理するデモを以下に示します。HTMLとCSSを使って見やすく表示し、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の記述

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>

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

以下に実装したデモページも用意していますので、ぜひアクセスしてみてください。

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

まとめ

今回はJavaScriptを使用して小数点以下の数値を特定の桁数で四捨五入、切り捨て、切り上げる方法を学びました。これらの技術は、プログラミングだけでなく、日常生活での計算やビジネスシーンでの数値処理にも応用できるため、非常に実用的です。プログラミングの学習を進める上で、これらの基本的な数学関数の理解は必須ですので、ぜひこの機会にしっかりとマスターしてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

四捨五入 切り捨て 切り上げ
RELATED POST