【JavaScript】Math.round()で指定した数値の四捨五入を行う!

(この記事は2022年9月11日に投稿されました。)

JavaScsiptで数値を四捨五入する方法として、Math.round()があります。

Math.round()とは指定した数値を四捨五入するメソッドであり、小数第1位を四捨五入した数値を返り値として返します。

そのため、税込の数値を計算する場合に使用することができます。

また、Math.round()は小数第1位を四捨五入しますがが、位置を設定することはできません。

しかし、10倍や100倍をして小数点をずらすことで四捨五入の位置を変更することができます。

今回はJavaScriptのMath.round()でで指定した数値の四捨五入を行う方法について紹介していきます。




この記事はこんな方におすすめ
・四捨五入した数値を取得したい人

Math.round()とは

Math.round()とは指定した数値を四捨五入するメソッドとなります。

そして、四捨五入する位置は「小数第1位」となります。

Math.round()の書き方

Math.round()の書き方は下記のようになります。

Mathクラスを呼び出した後にround()を指定することで使用することができます。

Math.round()のパラメータ

Math.round()のパラメータは下記のようになります。

  1. 対象の数値(必須):
    四捨五入したい数値を指定する

Math.round()は必須なパラメータとして「対象の数値」を指定します。

Math.round()の返り値

Math.round()の返り値は「四捨五入した数値」になります。

Math.round()で指定した数値の四捨五入を行うサンプルコード

Math.round()で指定した数値の四捨五入を行うサンプルコードについてご紹介します。

ここでは下記の3つのパターンでMath.round()を使用します。

  1. 対象の数値に正の数を指定する場合
  2. 対象の数値に負の数を指定する場合
  3. 対象の数値に数値以外の値を指定する場合

対象の数値に正の数を指定する場合

対象の数値に正の数を指定して、Math.round()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

対象の数値に正の数を指定してMath.round()を使用した結果

Math.round()によって指定された正の数が四捨五入されて表示されています。

そのため、「6.7」が「7」になり、「3.1424」が「3」になって表示されています。

対象の数値に負の数を指定する場合

対象の数値に負の数を指定して、Math.round()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

対象の数値に負の数を指定してMath.round()を使用した結果

Math.round()によって指定された負の数が四捨五入されて表示されています。

そのため、「-6.7」が「-7」になり、「-3.1424」が「-3」になって表示されています。

対象の数値に数値以外の値を指定する場合

対象の数値に数値以外の値を指定して、Math.round()を使用してみます。

⚫︎ Main.js

⚫︎ 実行結果

対象の数値に数値以外の値を指定してMath.round()を使用した結果

Math.round()を文字列に対して使用すると非数を返すようになります。

また、真偽値に対して使用すると、「1」や「0」を返すようになります。

そのため、「NAN」や「1」が表示されています。

Math.round()で四捨五入する位置を変更する場合

Math.round()だけでは四捨五入する位置を変更することはできません。

しかし、下記のようにすることで四捨五入する位置を変更することが可能になります。

四捨五入する位置を変更するには
  1. 指定した数値にn倍する
  2. n倍した数値に対してnで割る

⚫︎ Main.js

⚫︎ 実行結果

四捨五入する位置を変更してMath.round()を使用した結果

指定した数値にn倍することで小数第1位の位置をずらし、四捨五入した数値をnで割ることで元に戻しています。

そのため、指定した数値が四捨五入され「56.746」が「56.7」となり、「56.789」が「56.79」になって表示されています。

Math.round()を実際に使用できるケース

Math.round()を実際に使用できるケースについて紹介します。

例えば、入力した数値の合計を税込で表示するアプリを作成する場合にMath.round()を実際に使用することができます。

⚫︎ index.html

⚫︎ 実行結果

Math.round()で入力した数値の合計を税込で表示した結果

Math.round()によって入力された数値の合計を税込で表示するアプリを作成しています。

そのため、「1000」や「1500」、「2000」が合計されて「4500」となり、税込価格である「4860」円になって表示されています。

指定した数値を切り上げて取得する場合

指定した数値を切り上げて取得する場合はMath.ceil()を使用します。

Math.ceil()とは指定した数値の小数を切り上げるメソッドになります。

⚫︎ Main.js

⚫︎ 実行結果

Math.ceil()で指定した数値の小数を切り上げた結果

Math.ceil()によって指定した数値の小数を切り上げられています。

そのため、「3.866」や「3.248」が「4」となって表示されています。

指定した数値を切り捨てて取得する場合

指定した数値を切り捨てて取得する場合はMath.floor()を使用します。

Math.floor()とは指定した数値の小数を切り捨てるメソッドになります。

⚫︎ Main.js

⚫︎ 実行結果

Math.floor()で指定した数値の小数を切り捨てた結果

Math.floor()によって指定した数値の小数を切り捨てられています。

そのため、「3.866」や「3.248」が「3」となって表示されています。

指定した数値の整数のみを取得する場合

指定した数値の整数のみを取得する場合はMath.trunc()を使用します。

Math.trunc()とは指定した数値の整数部分のみ取得するメソッドになります。

⚫︎ Main.js

⚫︎ 実行結果

Math.trunc()で指定した数値の整数部分のみ取得した結果

Math.trunc()によって指定した数値の整数部分のみ取得しています。

そのため、「56.89」が「56」となり、「99.248」が「99」となって表示されています。

まとめ

⚫︎ Math.round()とは指定した数値を四捨五入するメソッドである

⚫︎ Math.round()の必須パラメータとして「数値」を指定する

⚫︎ 対象の数値に正の数を指定してMath.round()を使用すると正の数で四捨五入が行われる

⚫︎ 対象の数値に負の数を指定してMath.round()を使用すると、負の数で四捨五入が行われる

⚫︎ 対象の数値に数値以外の数を指定してMath.round()を使用すると、非数や数値を返す
(文字列の場合はNaN、真偽値の場合は0や1を返す)

⚫︎ Math.round()で四捨五入する位置を変更するには下記のようにする
・指定した数値にn倍する
・n倍した数値に対してnで割る

⚫︎ 指定した数値を切り上げて取得する場合はMath.ceil()を使用する

⚫︎ 指定した数値を切り捨てて取得する場合はMath.floor()を使用する

⚫︎ 指定した数値の整数部分のみ取得する場合はMath.trunc()を使用する

コメントを残す

メールアドレスが公開されることはありません。