JavaScript数値の固定小数点表示（toFixed）の基本と実践
金額や割合など「小数点以下の桁数を揃えたい」ときは toFixed。指定した桁数に丸め、足りない桁は0で埋めた文字列を返します。
構文と挙動
const s = num.toFixed(digits); // digitsは0〜100（省略時は0）
- 返り値: 文字列。数値ではなく「整形済みの文字列」を返す点に注意。
- 桁数指定: digitsは小数点以下の桁数。省略時は0（整数化された文字列）。
- 丸め: 指定桁に合わせて丸め（四捨五入相当）し、足りない桁は0でパディング。
- 例外: digitsが0未満または100超ならRangeError。
- 大きい数: 絶対値がとても大きいと科学記数法表記になることがある。
すぐ使えるテンプレート集
// 1) 基本：2桁で丸め＋0埋め
const price = 34.5642;
console.log(price.toFixed(2)); // "34.56"
// 2) 整数に整形（文字列で返る）
console.log(price.toFixed()); // "35"
// 3) 0埋め（桁数を増やす）
const n = 728.52;
console.log(n.toFixed(5)); // "728.52000"
// 4) とても小さい/大きい数の扱い
console.log((1.6e-2).toFixed(3)); // "0.016"
- ポイント: 返り値は文字列。計算に再利用するなら数値へ変換して使う（例：Number(…)）。
実務で便利な使い方
- 金額の表示を統一:
- ポイント: UI表示を2桁に揃える。数値計算に再利用するときは数値化してから。
const amount = 1234.5;
const display = amount.toFixed(2); // "1234.50"
- 割合の表示:
const ratio = 0.123456;
const pct = (ratio * 100).toFixed(1) + "%"; // "12.3%"
- 配列の一括整形＋連結:
const nums = [1.2, 3.456, 7];
console.log(nums.map(x => x.toFixed(2)).join(", ")); // "1.20, 3.46, 7.00"
- 文字列→数値（計算用）へ戻す:
const rounded = Number((3.14159).toFixed(3)); // 3.142
よくある落とし穴と対策
- 文字列が返る: そのまま計算に使うと連結になることも。数値化してから計算。
- digitsの範囲: 0〜100以外はRangeError。ユーザー入力から受ける場合はバリデーション。
- 丸め誤差（浮動小数点）: 二進小数の誤差で期待と微妙にずれることがある。必要なら一度整数にスケールして丸め→戻すなどの対策を検討。
- 科学記数法への切替: 非常に大きい数はtoStringと同様に科学記数法になる可能性。
練習問題（手を動かして覚える）
- 1. 3桁で丸め＋0埋め
const x = 3.14159;
console.log(x.toFixed(3)); // "3.142"
- 2. 金額を2桁で表示し、数値として再利用
const s = (987.6).toFixed(2); // "987.60"
const v = Number(s); // 987.6
- 3. リストを表形式で整形
const data = [0.1, 0.02, 10];
console.log(data.map(n => n.toFixed(2))); // ["0.10","0.02","10.00"]
直感的な指針
- 表示を揃えるなら: toFixed(digits)。
- 計算に使うなら: 返り値を数値化してから。
- digitsは安全に: 0〜100の範囲でバリデーション。