JavaScript | 数値を指定したロケールに応じた形式で文字列に変換(toLocaleString() メソッド)

javascrpit JavaScript
スポンサーリンク

toFixedtoLocaleString桁揃え/丸めの挙動を比較する小さな比較表と、実用的な例・注意点をわかりやすくまとめます。すぐブラウザで貼って試せるコード例つきです。

比較サマリ(要点)

項目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

よくある誤解・注意ポイント(実務で大事)

  1. toFixed はロケール非対応:ユーザーの国に合わせた桁区切りや小数点記号が必要なら toLocaleString を使う。
  2. どちらも丸めは JS の Number(IEEE754)に依存:例えば「1.005 を小数2桁に丸めるとどうなるか」はエンジンの内部表現のため思わぬ結果(四捨五入の境界で誤差)になることがある。金融用途なら整数(セントや銭)で計算するか、big.js / decimal.js のようなライブラリを検討。
  3. 表示だけの目的なら toLocaleString が便利:通貨や%を自然に表示でき、ロケール差も吸収してくれる。だが内部計算は別に正確にしておく。
  4. パフォーマンス:大量にフォーマットする場合、new Intl.NumberFormat(locale, options) を作成して format() を繰り返す方が速い(toLocaleString は内部で新しいフォーマッタを作る実装が多い)。
  5. 整数リテラルに注意1000.toFixed(2) は構文エラーなので (1000).toFixed(2) のようにする。
タイトルとURLをコピーしました