toFixed と toLocaleString の 桁揃え/丸めの挙動を比較する小さな比較表と、実用的な例・注意点をわかりやすくまとめます。すぐブラウザで貼って試せるコード例つきです。
比較サマリ(要点)
| 項目 | toFixed(n) | toLocaleString(locales, options) |
|---|---|---|
| 目的 | 小数点以下を固定桁で表現(固定小数点文字列) | ロケールに応じた書式(桁区切り、通貨、パーセント等)でフォーマット |
| 戻り値の型 | 文字列 | 文字列 |
| 桁区切り(千区切り) | しない(常に連続した数字) | デフォルトで有効(useGrouping で制御可能) |
| 小数桁の指定 | toFixed の引数で「必ずその小数桁数」を出す(不足分は0で埋める) | minimumFractionDigits / maximumFractionDigits で柔軟に制御 |
| 丸め(四捨五入) | 指定桁で丸め(四捨五入に相当) | maximumFractionDigits 等により丸め。ロケールは影響しないが表示形式は変わる |
| ロケール依存 | しない(小数点は . を使う) | する(, や .、空白などが変わる) |
| 通貨/% 表示 | できない(自前で付加) | style: 'currency' / 'percent' で自動化 |
| 推奨用途 | 値の固定小数表示(たとえば、UIで「小数を必ず2桁で見せたい」) | ユーザー表示(ロケールに応じた見せ方/通貨表示)や柔軟な丸め |
| 注意点(浮動小数点誤差) | 浮動小数点の丸め誤差の影響を受ける(注意) | 同上(数値の丸めはJSのNumberの表現に依存) |
具体的な例
const a = 1234.567;
// toFixed: 固定小数。千区切りなし、戻りは文字列
console.log(a.toFixed(2)); // "1234.57"
console.log((1000).toFixed(2)); // "1000.00"
// toLocaleString: ロケールにより小数点・区切りが変わる
console.log(a.toLocaleString('en-US', { minimumFractionDigits: 2 })); // "1,234.57"
console.log(a.toLocaleString('de-DE', { minimumFractionDigits: 2 })); // "1.234,57"
// toLocaleString で丸め上限を指定
console.log(1234.567.toLocaleString('en-US', { maximumFractionDigits: 1 })); // "1,234.6"
// 通貨表示(自動で通貨小数桁を考慮)
console.log(1234.5.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })); // "¥1,235"
console.log(1234.5.toLocaleString('en-US', { style: 'currency', currency: 'USD' })); // "$1,234.50"
// パーセント表示(数値を100倍して % を付ける)
console.log(0.1234.toLocaleString('en-US', { style: 'percent', minimumFractionDigits: 1 })); // "12.3%"
// 千区切りを無効にする例
console.log(1234.567.toLocaleString('en-US', { useGrouping: false, minimumFractionDigits: 2 })); // "1234.57"
JavaScriptよくある誤解・注意ポイント(実務で大事)
toFixedはロケール非対応:ユーザーの国に合わせた桁区切りや小数点記号が必要ならtoLocaleStringを使う。- どちらも丸めは JS の Number(IEEE754)に依存:例えば「1.005 を小数2桁に丸めるとどうなるか」はエンジンの内部表現のため思わぬ結果(四捨五入の境界で誤差)になることがある。金融用途なら整数(セントや銭)で計算するか、
big.js/decimal.jsのようなライブラリを検討。 - 表示だけの目的なら
toLocaleStringが便利:通貨や%を自然に表示でき、ロケール差も吸収してくれる。だが内部計算は別に正確にしておく。 - パフォーマンス:大量にフォーマットする場合、
new Intl.NumberFormat(locale, options)を作成してformat()を繰り返す方が速い(toLocaleStringは内部で新しいフォーマッタを作る実装が多い)。 - 整数リテラルに注意:
1000.toFixed(2)は構文エラーなので(1000).toFixed(2)のようにする。
