JavaScriptで四捨五入や切り上げ、切り捨てを行う方法について解説

HOME
更新日:2013.10.04
HOMEJavaScript入門 > 四捨五入・切り上げ・切り捨て

四捨五入・切り上げ・切り捨て

このページでは、数字を四捨五入切り上げ切り捨てをして整数にまとめる方法について解説します。 JavaScriptではいろいろな場面で大変よく使います。記述自体は簡単なので、しっかり覚えて下さい。

さらにこのページでは、整数以外に丸める方法についても考えます。 小数二桁などに丸めたいこともあるでしょう。 金額などを扱う場合は千円単位、万円単位で丸めたいこともあると思います。

実際丸める桁数を変えることはできないのですが、ほんのちょっとした工夫で可能になります。 その方法についても見ることにしましょう。

四捨五入・切り上げ・切り捨て

では以下のスクリプトをHTMLのBODY内に記入してみてください。

<form name="marume">
<input type="text" value="3.14159">:丸める数字<br>
<input type="text" value="">:四捨五入<br>
<input type="text" value="">:切り上げ<br>
<input type="text" value="">:切り捨て<br>
<input type="button" value="計算" onclick="keisan()">
</form>

<script>

function keisan(){

  //最初のテキストボックスの値を数字に変換
  var num = parseFloat(document.marume.elements[0].value);
  
  //順に、四捨五入・切り上げ・切り捨てを求める
  document.marume.elements[1].value = Math.round(num);
  document.marume.elements[2].value = Math.ceil(num);
  document.marume.elements[3].value = Math.floor(num);
}
</script>

<サンプル>

:丸める数字
:四捨五入
:切り上げ
:切り捨て

関数keisan()の最初に、 「丸める数字」テキストボックスの文字列をparseFloat()を使って数字に変換し、 変数numに代入します。

続いてテキストボックスの2番目以降に、 それぞれ四捨五入・切り上げ・切り捨てた値を計算して表示しています。

Math.round(数字)
数字を四捨五入して整数に丸めます
Math.ceil(数字)
数字を切り上げして整数にします
Math.floor(数字)
小数以下を切り捨てして整数にします

整数以外に丸めたい場合

上記の場合は整数に丸めましたが、小数○○桁に丸めたいと言うこともあると思います。 また金額を計算するときは千円とか1万円の単位で丸めたいこともあります。 そんな時は小数点の位置を移動させて数字を丸め、その後元に戻します。

以下のスクリプトをHTMLのBODY内に記入してみてください。

<form name="marume2">
<input type="text" value="12345.6789">:丸める数字<br>
<input type="text" value="">:小数2桁に丸める<br>
<input type="text" value="">:1000単位に丸める<br>
<input type="button" value="計算" onclick="keisan2()">
</form>


<script>

function keisan2(){

  //最初のテキストボックスの値を数字に変換
  var num = parseFloat(document.marume2.elements[0].value);
  
  //小数点の位置を2桁右に移動する(1234567.89にする)
  var num1 = num * 100;

  //四捨五入したあと、小数点の位置を元に戻す
  num1 = Math.round(num1) / 100;
  
  //2番目のテキストボックスに表示する
  document.marume2.elements[1].value = num1;


  //小数点の位置を左に3桁移動して計算し、元に戻す
  var num2 = num / 1000;
  num2 = Math.round(num2) * 1000;
  document.marume2.elements[2].value = num2;
}

</script>

<サンプル>

:丸める数字
:小数2桁に丸める
:1000単位に丸める

四捨五入や切り上げ、切り捨てはJavaScriptにおいても大変よく使います。 しっかりマスターしてください。