カテゴリ: JavaScript 更新日: 2025/12/05

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

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

先生と生徒の会話形式で理解しよう

生徒

「先生、小数点の桁数をそろえる方法ってありますか? 例えば3.141592を3.14みたいにしたいです。」

先生

「とても良い質問ですね。JavaScriptでは、小数点以下の桁数を指定して表示する方法がいくつかあります。」

生徒

「いくつかあるんですか?どれを使えばいいんでしょう?」

先生

「それでは、toFixed()toPrecision()Math.round()など、代表的な方法を順番に見ていきましょう!」

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

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()で全体の桁数を指定する
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()で丸める
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でフォーマットを整える
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. 小数点の桁数を調整する場面の具体例
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. 使い分けのまとめ(概要)
6. 使い分けのまとめ(概要)

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

方法特徴戻り値の型
toFixed()小数点以下の桁数を指定(見た目の調整)文字列
toPrecision()有効数字の桁数を指定文字列
Math.round()数値のまま四捨五入数値
Intl.NumberFormat通貨やカンマ区切りに対応文字列

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

カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう