JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのMath.round()メソッドで数値を四捨五入する方法

JavaScriptのMath.round()メソッドとは

この記事では、JavaScriptのMathオブジェクトを使って、浮動小数点数を最も近い整数に四捨五入する方法を解説します。

四捨五入の基本ルール

数値を四捨五入する際は、小数点以下の値を見て、切り上げるか切り下げるかを判断します。

  • 正の数の場合： 小数部分が0.5以上であれば切り上げ、0.5未満であれば切り下げとなります。
  • 負の数の場合： 挙動が少し異なります。たとえば-2.5は-2に丸められます。JavaScriptでは、ちょうど半分（.5）の値は常に正の無限大の方向へ丸められるためです。

Math.round()の構文

Math.round(inputVal);

Mathオブジェクトのメソッドを使用するため、まず「Math」と記述し、その後にroundメソッドを呼び出します。括弧内に渡した値に対してメソッドが実行され、四捨五入された結果が返されます。

実際のコード例

以下は、ユーザーが入力した数値を四捨五入して画面に表示するシンプルなサンプルコードです。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <form onsubmit=handleSubmit(event)>
     <label for="round">Enter a number:</label>
     <input id="round" onchange=handleChange(event) type="text" name="round" value=""/>
     <input type="submit" value="Submit" />
   </form>
 
   <h3 id="root"></h3>
 
   <script>
     let inputVal = ""
 
     const handleChange = e => {
 
       inputVal = e.target.value;
       console.log(inputVal)
     }
     const handleSubmit = e => {
       e.preventDefault();
       const root = document.querySelector("#root");
       root.innerHTML = Math.round(inputVal);
 
     }
     const inputValue = document.getElementById("round").value
   </script>
 </body>
</html>

入力欄に文字列やnullを入力した場合、戻り値はNaN（Not a Number）になるので注意してください。ぜひ上のコードを実際に動かして、さまざまな浮動小数点数を入力しながら、Math.round()メソッドの動作を確認してみてください。

まとめ

以上で解説は終わりです。これでMathオブジェクトを使って数値を四捨五入する方法をマスターできました。次に学ぶべきテーマをお探しの方は、以下の関連記事も参考にしてみてください。

  • JavaScriptで乱数を生成する方法：完全ガイド
  • JavaScript parseInt：ステップバイステップガイド
  • JavaScriptカウントダウンタイマーの作り方：チュートリアル
  • JavaScript toStringメソッドの使い方
  • JavaScript toUpperCaseとtoLowerCaseの使い方
  1. JavaScriptのRegExp（正規表現）オブジェクトとは？基本の使い方をわかりやすく解説

    RegExp（正規表現）オブジェクトは、テキストに対してパターンマッチングを行い、目的の文字列部分を検索・抽出するために使用されます。JavaScriptでは、RegExpオブジェクトを「RegExpコンストラクタ」または「リテラル構文」の2通りの方法で作成できます。 RegExpオブジェクトの作成方法 コンストラクタを使用する場合： new RegExp(pattern) リテラル構文を使用する場合： /pattern/ 主なメソッド test()：文字列がパターンに一致するかどうかを真偽値（true / false）で返します。 exec()：パターンに一致した文字列を返します。

  2. JavaScriptのオブジェクト初期化子とは？使い方をサンプルコードで解説

    オブジェクト初期化子とは オブジェクト初期化子（Object Initializer）は、新しく生成したオブジェクトを初期化するための式です。波括弧 {} の中に、「プロパティ名」と「それに対応する値」のペアを0個以上、カンマ区切りで列挙して記述します。 これにより、変数宣言と同時にオブジェクトの中身を簡単に定義することができます。 以下は、JavaScriptでオブジェクト初期化子を使用したサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta chars