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

HOME
JavaScript入門
四捨五入・切り上げ・切り捨て

このページでは、数字を四捨五入や切り上げ、切り捨てをして整数にまとめる方法について解説します。 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>

＜サンプル＞

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

前へ次へ