JavaScriptの数値フォーマット（小数点以下の桁数調整）を学ぼう

1. toFixed()メソッドで小数点以下の桁数を指定する

1. toFixed()メソッドで小数点以下の桁数を指定する

最もよく使われるのが、toFixed()メソッドです。これは、数値を指定した小数点以下の桁数に丸めて文字列として返すメソッドです。たとえば、「3.14159」を小数点以下2桁で表示したいときに使います。

let num = 3.14159;
let result = num.toFixed(2);
console.log(result);

3.14

このように出力されます。注意点として、toFixed()の結果は文字列型（string）になります。もし再び数値として計算に使いたい場合は、Number()で変換して使いましょう。

let num = 3.14159;
let result = Number(num.toFixed(2));
console.log(result + 1); // 数値として計算できる

4.14

toFixed()は、金額表示や平均値など「見た目を整える」場面でとても便利です。

2. toPrecision()で全体の桁数を指定する

2. toPrecision()で全体の桁数を指定する

toPrecision()は、全体の桁数（有効数字）を指定するメソッドです。小数点の位置ではなく、数全体の桁数を調整したい場合に使います。

let num = 3.14159;
console.log(num.toPrecision(3));

3.14

この場合は「3.14」となりますが、桁数を増やすと結果も変わります。

console.log(num.toPrecision(5));

3.1416

このように、toPrecision()は科学計算や統計データなど、数の「精度」を指定したいときに使われます。

3. Math.round()・Math.floor()・Math.ceil()で丸める

3. Math.round()・Math.floor()・Math.ceil()で丸める

次に紹介するのは、Mathオブジェクトを使った小数の丸め処理です。

• Math.round()：四捨五入
• Math.floor()：切り捨て
• Math.ceil()：切り上げ

たとえば、「3.14159」を小数点以下2桁にしたい場合、100倍してから処理し、100で割ることで調整できます。

let num = 3.14159;
let rounded = Math.round(num * 100) / 100;
console.log(rounded);

3.14

このように、Mathを使う方法は数値のまま扱えるのが特徴です。計算結果をそのまま別の計算に使いたい場合におすすめです。

4. Intl.NumberFormatでフォーマットを整える

4. Intl.NumberFormatでフォーマットを整える

Intl.NumberFormatは、数値のフォーマットを指定できる便利なオブジェクトです。特に通貨や桁区切り（カンマ区切り）を使うときに使われます。

let num = 1234.567;
let formatter = new Intl.NumberFormat("ja-JP", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
console.log(formatter.format(num));

1,234.57

この例では、小数点以下を2桁に固定して表示しています。さらに、桁区切り（1,000のようなカンマ）も自動でつけてくれるので、金額表示などに最適です。

5. 小数点の桁数を調整する場面の具体例

5. 小数点の桁数を調整する場面の具体例

プログラムで小数点の桁数を調整する場面は、実は日常的にたくさんあります。たとえば、ショッピングサイトや家計簿アプリ、料理アプリなどです。

たとえば、商品の税込価格を計算して表示したいとき、消費税を掛け算した結果をそのまま表示すると小数点が長くなり、見た目が悪くなります。

let price = 980;
let tax = 0.1;
let total = price * (1 + tax);
console.log(total); // 1078.0000000000002

1078.0000000000002

このように、コンピュータの計算では小数点誤差が出ることがあります。見た目を整えるには、toFixed()を使うと簡単です。

let displayTotal = total.toFixed(2);
console.log("合計金額: " + displayTotal + "円");

合計金額: 1078.00円

こうすることで、ユーザーにわかりやすい表示になります。見た目を整えることも、プログラムの大切な役割のひとつです。

6. 使い分けのまとめ（概要）

6. 使い分けのまとめ（概要）

ここまでで紹介した方法を簡単に整理すると、次のようになります。

目的に応じてこれらを使い分けることが、JavaScriptの数値操作の上達への第一歩です。