JavaScript | 基礎構文:数値・演算 – 四捨五入

JavaScript JavaScript
スポンサーリンク

四捨五入を一言でいうと

四捨五入は、
「小数のある数値を、キリのいい数(だいたい整数)に“丸める”操作」 です。

JavaScript では主に

  • Math.round(四捨五入)
  • Math.floor(切り捨て)
  • Math.ceil(切り上げ)
  • toFixed(表示用の丸め)

を組み合わせて使います。

ここが重要です。
「四捨五入」と「切り捨て」「切り上げ」「見た目だけ丸める(文字列)」は、
似ているようで役割が違います。
何をしたい場面なのかで、どれを使うべきかが変わります。


Math.round の基本(標準的な四捨五入)

四捨五入の基本ルール

Math.round(x) は、
「x を一番近い整数に丸めた数値」 を返します。

0.5 未満 → 切り捨て
0.5 以上 → 切り上げ

という、いわゆる「学校で習う四捨五入」です。

console.log(Math.round(1.2)); // 1
console.log(Math.round(1.4)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.6)); // 2

console.log(Math.round(3));   // 3(小数がなくてもそのまま)
JavaScript

負の数の四捨五入(ここは少し直感とズレるかも)

負の数でも Math.round は同じルールです。

console.log(Math.round(-1.2)); // -1
console.log(Math.round(-1.5)); // -1(-2 っぽく感じるかもしれないけど -1)
console.log(Math.round(-1.6)); // -2
JavaScript

「0 に近い方に寄せる」わけではありません。
あくまで「0.5 未満切り捨て・0.5 以上切り上げ」を、負の方向にも適用しています。

ここが重要です。
Math.round は「常に 0 に近い方に寄せる」のではなく、
数直線上で見たときに、“一番近い整数”に寄せる と考えるとしっくりきます。
正でも負でも「0.5 境界でどちら側に近いか」で決まる、と覚えてください。


小数第 n 位で四捨五入するパターン

「小数第 2 位で四捨五入」などのよくある要望

Math.round は「整数にする」四捨五入ですが、
実務では「小数第 2 位で四捨五入して表示したい」のような場面がよく出てきます。

例えば、3.14159 を「小数第 2 位で四捨五入」するなら 3.14 にしたい、という感じです。

基本パターン:一度スケールしてから戻す

小数第 2 位で四捨五入する関数は、こう書けます。

function roundTo2(num) {
  return Math.round(num * 100) / 100;
}

console.log(roundTo2(3.14159)); // 3.14
console.log(roundTo2(1.234));   // 1.23
console.log(roundTo2(1.235));   // 1.24
JavaScript

やっていることは、

  1. num * 100 で、「小数第 2 位を整数の 1 桁目」に持ってくる
    例:3.14159 * 100 = 314.159
  2. Math.round で整数に四捨五入
    例:Math.round(314.159) = 314
  3. 最後に / 100 で元のスケールに戻す
    例:314 / 100 = 3.14

という流れです。

n 桁を自由に変えられる汎用関数

小数第 n 位で四捨五入したいときの汎用関数も書けます。

function roundTo(num, digits) {
  const factor = 10 ** digits; // Math.pow(10, digits) と同じ
  return Math.round(num * factor) / factor;
}

console.log(roundTo(3.14159, 2)); // 3.14
console.log(roundTo(3.14159, 3)); // 3.142
console.log(roundTo(123.456, 0)); // 123(整数に丸め)
JavaScript

ここが重要です。
「特定の小数桁で四捨五入したい」=「いったん整数として扱える位置までズラしてから四捨五入し、戻す」。
このパターンを覚えておくと、「小数第 1 位」「第 3 位」など、柔軟に対応できます。


切り捨て・切り上げとの違いをしっかり整理する

Math.floor(切り捨て)

Math.floor は「小数点以下を切り捨て」です。

console.log(Math.floor(3.9));  // 3
console.log(Math.floor(3.1));  // 3
console.log(Math.floor(-1.1)); // -2(より小さい方へ)
JavaScript

Math.ceil(切り上げ)

Math.ceil は「小数点以下を切り上げ」です。

console.log(Math.ceil(3.1));  // 4
console.log(Math.ceil(3.9));  // 4
console.log(Math.ceil(-1.1)); // -1(より大きい方へ)
JavaScript

Math.round との違いを感覚で押さえる

例えば 3.6 の場合:

Math.floor(3.6) → 3(常に下に)
Math.ceil(3.6) → 4(常に上に)
Math.round(3.6) → 4(四捨五入)

3.4 の場合:

Math.floor(3.4) → 3
Math.ceil(3.4) → 4
Math.round(3.4) → 3

ここが重要です。
「どっち方向に寄せたいのか?」で使うものが変わる。
「四捨五入」がしたいのか、「必ず小さく・必ず大きく」したいのかを明確にしてから、
round / floor / ceil を選ぶのがポイントです。


表示用の丸め:toFixed の特徴と注意点

toFixed は「文字列」で返ってくる

Number.prototype.toFixed(n) は、
「小数点以下 n 桁までで四捨五入した“文字列”」 を返します。

const num = 3.14159;

console.log(num.toFixed(2)); // "3.14"(文字列)
console.log(num.toFixed(4)); // "3.1416"
JavaScript

ここで気をつけるべきは、戻り値が number ではなく string だということです。

const s = num.toFixed(2);
console.log(typeof s); // "string"
JavaScript

toFixed は「表示フォーマット」として使う

toFixed は、計算のためというより「表示のため」に使います。

const price = 1234.5;
const text = `税込価格: ¥${price.toFixed(2)}`;

console.log(text); // "税込価格: ¥1234.50"
JavaScript

常に 2 桁表示したい(3.13.10 など)ときには便利です。

数値として使いたいなら Number で包む

toFixed の結果をさらに計算に使いたい場合は、
一度 Number() で数値に戻す必要があります。

const num = 1.005;
const fixed = Number(num.toFixed(2)); // "1.01" → 1.01(number)

console.log(fixed);        // 1.01
console.log(typeof fixed); // "number"
JavaScript

ここが重要です。
toFixed は「見た目を整えるための四捨五入」。
Math.round は「数値として丸めるための四捨五入」。
目的が「表示」か「計算」かで、使うべきものが変わります。


JavaScript 特有の「小数の誤差」と四捨五入の関係

浮動小数点の誤差が四捨五入に影響する例

JavaScript の数値は「2進数の浮動小数点」で表されているので、
10進数の小数がぴったり表現できないことがよくあります。

console.log(0.1 + 0.2); // 0.30000000000000004
JavaScript

この誤差が、四捨五入にも影響します。

console.log(1.005 * 100);        // 100.49999999999999(ぴったり 100.5 ではない)
console.log(Math.round(1.005 * 100) / 100); // 1 になることがある
JavaScript

このため、「金融や精度が厳密に必要な計算」では工夫が必要ですが、
基礎の段階では「誤差が出る可能性がある」ことだけ知っておけば十分です。

対策のイメージ(ざっくり)

厳密さが必要な場面では、例えば

  • 一度整数(例えば円単位)で管理して最後に割る
  • 専用のライブラリ(decimal.js など)を使う

といった方法を取ります。

ここが重要です。
初心者のうちは「小数には誤差がつきもの」「四捨五入でたまに“あれ?”となるのはそのせい」と理解しておけば ok。
「数値をそのまま信じ切らないで、必要なら表示を整える・整数で扱う」という発想を持っておくと、後々かなり楽になります。


初心者として本当に押さえてほしいポイント

Math.round(x) は「x を一番近い整数に四捨五入」する。
0.5 未満は切り捨て、0.5 以上は切り上げ。

「小数第 n 位で四捨五入」は、
いったん 10^n 倍 → Math.round10^n で割る、というパターンで実現できる。

Math.floor(切り捨て)、Math.ceil(切り上げ)とは役割が違う。
どっち方向に丸めたいのかを意識して使い分ける。

toFixed(n) は「小数第 n 位で四捨五入した“文字列”」。
表示用に便利だが、計算に使うなら Number() で数値に戻す必要がある。

ここが重要です。
「これは“表示のための丸め”なのか、“計算のための丸め”なのか?」
「整数にしたいのか、小数第 n 位にしたいのか?」
この 2 点を毎回自分に問いかけて、Math.round / Math.floor / Math.ceil / toFixed を選ぶ癖をつけると、
四捨五入まわりの混乱がかなり減ります。

もし自分の手で試してみたくなったら、次のコードを書いてみてください。

const nums = [1.4, 1.5, 1.6, -1.4, -1.5, -1.6];

for (const n of nums) {
  console.log(
    "n =", n,
    "round:", Math.round(n),
    "floor:", Math.floor(n),
    "ceil:", Math.ceil(n)
  );
}

console.log("----");

const x = 3.14159;
console.log("roundTo2:", Math.round(x * 100) / 100);
console.log("toFixed(2):", x.toFixed(2));
JavaScript

それぞれの結果を見比べると、
「四捨五入」「切り捨て」「切り上げ」「表示用丸め」の違いが、かなりハッキリ体で分かるようになるはずです。

タイトルとURLをコピーしました