計算した金額をそのまま画面に出したら「1234.5」や「0.30000000000000004」のような、人には読みにくい数値になってしまった――そんな経験はないでしょうか。JavaScript には、数値を「小数点以下2桁」に揃えたり、「1,234,567」のように3桁区切りにしたり、「￥1,235」のような通貨表記にしたりと、表示用に整形するための便利なメソッドが用意されています。この記事では、その代表格である toFixed と toLocaleString の使い方と使い分けを、正しい出力例を交えて丁寧に解説します。
目次
なぜ数値の整形が必要なのか
JavaScript の数値をそのまま表示すると、意図しない見た目になることがよくあります。たとえば小数を含んだ計算では、コンピューターが数値を2進数で扱う都合上、次のような誤差が生じます。
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(1000000); // 1000000（桁区切りが無く読みにくい）このような数値をユーザーに見せる場合、小数点以下の桁数を揃えたり、大きな数値に3桁区切りのカンマを入れたりして、読みやすい形に整える必要があります。計算に使う「値としての数値」と、人に見せる「表示としての文字列」は分けて考えるのがポイントです。その整形を担うのが、これから紹介する toFixed と toLocaleString です。
toFixed で小数点以下の桁数を揃える
toFixed(桁数) は、数値を指定した小数点以下の桁数に丸めた文字列を返すメソッドです。引数には残したい小数点以下の桁数を渡します。次の例を見てみましょう。
console.log((3.14159).toFixed(2)); // "3.14"
console.log((5).toFixed(2)); // "5.00"
console.log((1.5).toFixed(0)); // "2"注目してほしいのは、(5).toFixed(2) が "5.00" のように足りない桁を0で埋めてくれる点です。価格表示のように「必ず小数点以下2桁で揃えたい」という場面でとても役立ちます。丸め方は基本的に四捨五入で、桁数を 0 にすれば整数に丸められます。
ここで最も大事なのは、toFixed の戻り値は数値ではなく文字列であるということです。上の例の結果がすべてダブルクォートで囲まれていることからも分かります。この性質は後述するつまずきの原因になりやすいので、必ず覚えておいてください。
四捨五入されない有名なケース
toFixed は四捨五入するのが基本ですが、2進数での表現に由来して直感に反する結果になる有名な例があります。
console.log((1.005).toFixed(2)); // "1.00"（"1.01" ではない）「1.005 を小数点2桁に丸めれば 1.01 になるはず」と思いますが、実際には "1.00" になります。これは 1.005 という値がコンピューター内部では正確に 1.005 として保持されておらず、ほんのわずかに小さい値（およそ 1.00499...）として扱われているためです。バグではなく、浮動小数点数の仕組み上こうなります。厳密な金額計算では、あらかじめ整数に直して計算するなどの対策が必要になる場合があると覚えておくとよいでしょう。
toLocaleString で3桁区切りや通貨に整形する
toLocaleString() は、数値を地域（ロケール）に応じた表記に整形して文字列で返すメソッドです。引数なしで呼ぶと、実行環境の設定に合わせて桁区切りを入れてくれます。
console.log((1234567).toLocaleString()); // "1,234,567"このように、大きな数値を人が読みやすい3桁区切りにするのが最もよく使われる用途です。さらに、第1引数にロケール（'ja-JP' など）、第2引数にオプションのオブジェクトを渡すことで、通貨やパーセントなど細かい整形ができます。
// 日本円の通貨表示
console.log(
(1234.5).toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })
); // "￥1,235"
// パーセント表示（0.25 → 25%）
console.log(
(0.25).toLocaleString('ja-JP', { style: 'percent' })
); // "25%"円は小数点以下を持たない通貨なので、currency: 'JPY' を指定すると自動的に整数へ丸められ、通貨記号 ￥ と3桁区切りが付きます。style: 'percent' は 0.25 のような割合を 25% という表記に変換してくれます（元の値を100倍する点に注意してください）。
よく使うオプション
第2引数のオブジェクトでは、さまざまな整形オプションを指定できます。代表的なものを表にまとめます。
| オプション | 意味 |
|---|---|
style | 'decimal'（既定）/ 'currency' / 'percent' の表示スタイル |
currency | style: 'currency' のときの通貨コード（'JPY'、'USD' など） |
minimumFractionDigits | 小数点以下の最小桁数（足りなければ0で埋める） |
maximumFractionDigits | 小数点以下の最大桁数（超える分は丸める） |
minimumFractionDigits と maximumFractionDigits を組み合わせると、桁数を自由にコントロールできます。次の例では小数点以下をちょうど2桁に揃えつつ、3桁区切りも同時に効かせています。
console.log(
(1234.5).toLocaleString('ja-JP', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
); // "1,234.50"toFixed と toLocaleString の使い分け
どちらも数値を整形して文字列を返しますが、得意な役割が異なります。ざっくりとした使い分けの目安を表にまとめます。
| やりたいこと | 向いているメソッド |
|---|---|
| 小数点以下を固定桁数に丸めたい | toFixed |
| 大きな数値を3桁区切りにしたい | toLocaleString |
| 金額（通貨記号付き）で表示したい | toLocaleString（style: 'currency'） |
| パーセント表示にしたい | toLocaleString（style: 'percent'） |
おおまかには、桁数を固定したいだけなら toFixed、人に見せる金額や大きな数値の区切りが欲しいなら toLocaleString と考えると迷いにくくなります。両者を組み合わせることも可能です。たとえば「小数点以下2桁で丸めたうえで3桁区切りも付けたい」場合は、次のように書けます。
const price = 1234567.891;
// toFixed で桁を丸めてから数値に戻し、toLocaleString で区切る
const result = Number(price.toFixed(2)).toLocaleString();
console.log(result); // "1,234,567.89"toFixed(2) の結果は文字列なので、いったん Number() で数値に戻してから toLocaleString() に渡している点がポイントです。もっとも、桁数と区切りの両方を toLocaleString のオプションだけで実現することもできるので、コードがすっきりするほうを選ぶとよいでしょう。
整形でつまずきやすいポイント
戻り値が文字列であることを忘れて計算する
最も多いのが、toFixed の戻り値が文字列であることを忘れ、そのまま計算に使ってしまうミスです。+ 演算子は文字列に対しては「連結」として働くため、思わぬ結果になります。
const a = (1.5).toFixed(2); // "1.50"（文字列）
console.log(a + 1); // "1.501"（文字列連結になる）
console.log(Number(a) + 1); // 2.5（数値に戻せば正しく計算できる）整形した値をふたたび計算に使いたいときは、Number() や単項の +（+a）で数値に戻してから使いましょう。逆に言えば、表示用の最後の一手として整形し、計算が終わったあとに toFixed を掛けるのが安全です。
toLocaleString の結果は環境によって変わる
toLocaleString を引数なしで呼んだ場合、桁区切りや小数点の記号は実行環境のロケール設定に依存します。たとえば地域によっては小数点にカンマ、桁区切りにピリオドが使われることもあり、日本の 1,234.5 が別の地域では 1.234,5 のように表示されることもあります。表示を確実に固定したい場合は、'ja-JP' のようにロケールを明示的に指定しておくと安全です。
丸めの方向に注意する
先ほどの (1.005).toFixed(2) の例のように、浮動小数点数の性質上、丸めの結果が直感とわずかにずれることがあります。会計や課金など1円のずれも許されない処理では、整形メソッドの丸めに頼りきらず、計算の段階で整数化するなどの工夫を検討してください。表示のための整形と、正確な計算は別物として扱うのが基本方針です。
まとめ
toFixed は小数点以下の桁数を固定して丸めた文字列を返すメソッドで、価格のように「必ず2桁で揃えたい」場面に向いています。一方 toLocaleString は、3桁区切りや通貨・パーセントなど、地域に応じた「人に見せるための表記」に整形するのが得意です。どちらも戻り値は文字列である点、そして再計算するなら Number() で数値に戻す点を押さえておけば、数値の表示まわりで困ることはぐっと減ります。用途に合わせて2つを上手に使い分けてください。