【JavaScript】数値の表示形式を自在に操る！toFixedとtoPrecisionの完全ガイド

2026年1月24日

概要

計測データや金融データを扱うWebアプリケーションにおいて、生の数値をそのまま表示すると桁数が多すぎたり、表記が不揃いになったりして可読性を損ないます。

本記事では、JavaScript標準のメソッドを用いて「小数点以下の桁数固定」や「有効数字の指定」を行う方法を解説します。また、これらを活用してリアルタイムに変動するセンサー数値を整形して表示するダッシュボードの実装例を紹介します。

仕様（入出力）

`toFixed` と `toPrecision` の比較

メソッド	意味	戻り値の型	主な用途
`toFixed(n)`	小数点以下を n桁に固定して表示	String	通貨、パーセント表示、一般的な計測値
`toPrecision(n)`	有効数字を n桁にして表示	String	科学技術計算、極端に大きい/小さい数値の概数表示

入力: 対象となる数値（Number型）
出力: フォーマットされた文字列（String型）
- 指定された桁数に満たない場合は0で埋められます。
- 指定された桁数を超える場合は四捨五入されます。

基本の使い方

以下は、それぞれのメソッドの挙動を確認するための基本的なスニペットです。

1. 小数点以下を固定する (`toFixed`)

金額や通常の計測データなどで、小数部の長さを揃えたい場合に使用します。

const pi = 3.14159;
console.log(pi.toFixed(2)); // "3.14"

const preciseVal = 123.4567;
console.log(preciseVal.toFixed(1)); // "123.5" (四捨五入)

const integerVal = 10;
console.log(integerVal.toFixed(2)); // "10.00" (0埋め)

2. 有効数字を指定する (`toPrecision`)

全体の桁数（整数部＋小数部）を基準に、重要な数字の個数を指定します。

const weight = 0.0012345;
console.log(weight.toPrecision(2)); // "0.0012"

const distance = 12345.6789;
console.log(distance.toPrecision(3)); // "1.23e+4" (指数表記になる場合がある)

const score = 4.56;
console.log(score.toPrecision(2)); // "4.6" (四捨五入)
console.log(score.toPrecision(4)); // "4.560" (0埋め)

コード全文（HTML / JavaScript）

ここでは、工場のセンサー監視システムを想定したデモを作成します。

「温度（小数点以下固定）」と「気圧変動（有効数字重視）」という異なる性質のデータを、リアルタイムに生成・整形してDOMに反映させます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sensor Monitor Demo</title>
    <style>
        .monitor-panel {
            font-family: 'Courier New', monospace;
            background: #222;
            color: #0f0;
            padding: 20px;
            border-radius: 8px;
            width: 300px;
        }
        .data-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            border-bottom: 1px solid #444;
            padding-bottom: 5px;
        }
        .label { color: #888; }
        .value { font-weight: bold; font-size: 1.2em; }
    </style>
</head>
<body>

<div class="monitor-panel">
    <h3>System Status</h3>
    <div class="data-row">
        <span class="label">CPU Temp:</span>
        <span id="temp-display" class="value">--.--</span>
    </div>
    <div class="data-row">
        <span class="label">Pressure:</span>
        <span id="pressure-display" class="value">--</span>
    </div>
</div>

<script src="monitor.js"></script>
</body>
</html>

JavaScript

/**
 * センサーデータのシミュレーションと表示更新を行うクラス
 */
class SensorMonitor {
  constructor() {
    this.tempElement = document.getElementById('temp-display');
    this.pressureElement = document.getElementById('pressure-display');
    this.isRunning = false;
  }

  /**
   * モニタリングを開始する
   */
  start() {
    this.isRunning = true;
    this.updateLoop();
  }

  /**
   * 画面更新ループ
   * requestAnimationFrameを使用してスムーズに更新
   */
  updateLoop() {
    if (!this.isRunning) return;

    // 現在の仮想センサー値を取得して表示更新
    this.render();

    // 次のフレームで再実行
    requestAnimationFrame(() => this.updateLoop());
  }

  /**
   * データを生成しDOMを更新する
   */
  render() {
    // 現在時刻から擬似的な変動値を生成（サイン波を利用）
    const now = Date.now();
    
    // シナリオ1: CPU温度 (30〜70度の間で変動)
    // 小数点以下2桁で固定表示したい -> toFixed(2)
    const rawTemp = 50 + Math.sin(now / 2000) * 20;
    this.tempElement.textContent = `${rawTemp.toFixed(2)} °C`;

    // シナリオ2: 微細な気圧変動係数 (0.001〜0.005付近の精密な値)
    // 桁数ではなく有効数字3桁で推移を見たい -> toPrecision(3)
    const rawPressure = 0.003 + Math.cos(now / 500) * 0.002;
    this.pressureElement.textContent = `${rawPressure.toPrecision(3)} hPa`;
  }
}

// インスタンス化して監視開始
const monitor = new SensorMonitor();
monitor.start();

カスタムポイント

更新頻度の調整:requestAnimationFrame はモニタのリフレッシュレート（通常60fps）で動作するため、数値の変動が早すぎて視認しにくい場合があります。実運用では setTimeout や setInterval を併用して、描画更新頻度を「1秒に1回」などに間引く制御を追加すると良いでしょう。
ロケールの適用:日本円やドルなどの通貨を表示する場合は、toFixed ではなく Intl.NumberFormat を使用すると、カンマ区切りや通貨記号の付与まで自動化できます。
指数表記の回避:toPrecision は桁数によって 1.23e+5 のような指数表記を返します。これがユーザーにとって不親切な場合は、条件分岐で toFixed に切り替えるロジックが必要です。

注意点

戻り値は「文字列」であるtoFixed も toPrecision も戻り値は String 型です。この結果を使ってさらに計算を行うと、文字列連結（”10.00″ + 5 = “10.005”）になってしまうバグが頻発します。計算は全て完了させてから、最後に表示用に変換してください。
四捨五入の精度問題JavaScriptの浮動小数点数（IEEE 754）の性質上、厳密な四捨五入が期待通りにならないケースがあります（例: (1.005).toFixed(2) が "1.00" になる等）。金融システムなど厳密な丸め処理が必要な場合は、専用のライブラリ（Decimal.jsなど）の導入を検討してください。

応用

プログレスバーの進捗率表示への応用

ファイルアップロードなどの進捗率を表示する際、整数部のみで良い場合は toFixed(0) が便利です。

// アップロード進捗のシミュレーション
function formatProgress(loaded, total) {
  if (total === 0) return '0%';
  
  const percent = (loaded / total) * 100;
  // 小数点以下を捨てて整数文字列にする
  return `${percent.toFixed(0)}%`;
}

console.log(formatProgress(345, 1000)); // "35%"

まとめ

toFixed は固定小数点表記として金額やUI上の数値を揃えるのに適しており、toPrecision は科学的な測定値や有効数字が重要なデータの表現に適しています。どちらも戻り値が文字列であることを理解し、計算ロジックと表示ロジックを明確に分けて実装することがバグを防ぐポイントです。また、アニメーションフレームごとのDOM更新はパフォーマンスに影響を与える可能性があるため、実際のアプリケーションではデータの変化時のみ更新するなどの最適化を行うとより洗練されたコードになります。

よかったらシェアしてね！