JavaScript 逆引き集 | 数値を固定小数点

JavaScript JavaScript
スポンサーリンク

数値を「小数点以下 n 桁」にそろえるという発想

num.toFixed(2) は、数値を「小数点以下 2 桁」にそろえて文字列として返すメソッドです。 たとえば金額表示や平均値の表示など、「見た目をきれいに整えたい場面」で非常によく使われます。

天才プログラマー視点で言うと、「計算結果をそのまま出すと桁がバラバラになる問題」を一発で解決する道具toFixed です。

小数点以下を 2 桁にそろえる基本動作

まずは最もよく使う例から見てください。

const num = 3.14159;
const fixed = num.toFixed(2);

console.log(fixed); // "3.14"
JavaScript

ここで重要なのは、 返り値が数値ではなく「文字列」になるという点です。

3.14159 を「見た目として 3.14 に整える」ためのメソッドなので、 計算用の数値というより「表示用の文字列」を作るための機能だと理解するとスッと入ります。

四捨五入されることを深掘りする

toFixed は、ただ切り捨てるのではなく 四捨五入 します。

(3.146).toFixed(2); // "3.15"
(3.144).toFixed(2); // "3.14"
JavaScript

つまり、 「小数点以下 n 桁に丸める」という動きをしているわけです。

計算結果を丸めて表示したいときに非常に便利です。

桁数を自由に変えられる

toFixed の引数は「小数点以下の桁数」です。

const num = 1.2345;

num.toFixed(0); // "1"
num.toFixed(1); // "1.2"
num.toFixed(3); // "1.234"
num.toFixed(5); // "1.23450"
JavaScript

桁数を増やすと、足りない部分は 0 で埋められます。 これが「固定小数点」という名前の由来です。

実務でよくある例:金額表示をそろえる

金額やポイント表示は、桁が揃っていると読みやすくなります。

const price = 1200;
console.log(price.toFixed(2)); // "1200.00"
JavaScript

EC サイトや請求書などでは、 「小数点以下 2 桁で統一する」というルールがよく使われます。

実務でよくある例:平均値の見た目を整える

計算結果は桁がバラバラになりがちです。

const avg = 7 / 3;
console.log(avg);          // 2.3333333333333335
console.log(avg.toFixed(2)); // "2.33"
JavaScript

このように、 「計算結果を人間が読みやすい形に整える」ために toFixed は欠かせません。

数値として使いたい場合は Number に戻す

toFixed は文字列を返すため、そのまま計算に使うと困ることがあります。

const s = (3.14).toFixed(2); // "3.14"
const n = Number(s);         // 3.14(数値に戻す)
JavaScript

計算に使うなら Number()parseFloat() で数値に戻してください。

まとめ:toFixed は「見た目を整えるための小数点フォーマッタ」

num.toFixed(2) を使いこなすと、 数値の表示が一気に整い、読みやすさが大きく向上します。

  • 小数点以下の桁数をそろえる
  • 四捨五入される
  • 足りない桁は 0 で埋まる
  • 返り値は文字列なので注意
  • 金額・平均値・統計表示などで大活躍

「この数値、見た目をきれいに整えたい」と感じた瞬間に、 まず toFixed を思い出していただきたいです。

次に知っておくと便利なのは、 数値フォーマットの違いIntl.NumberFormat を使った本格的な数値整形 です。

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