有効数字を使用して数値をフォーマットする方法

はじめに

表示用に数値をフォーマットする際、小数点以下の桁数ではなく、数値に含まれる意味のある桁数に基づいて精度を制御する必要がある場合があります。このアプローチは有効数字を使用したフォーマットと呼ばれます。

有効数字とは、数値の精度に関する意味のある情報を持つ桁を表します。123.45という数値には5桁の有効数字があります。0.00123という数値には3桁の有効数字があります。先頭のゼロは大きさを示すだけで、精度を示すものではないためです。

このレッスンでは、JavaScriptで有効数字を使用して数値をフォーマットする方法を説明します。このアプローチが小数点以下の桁数を制御するよりも優れている場合と、Intl.NumberFormat APIでminimumSignificantDigitsおよびmaximumSignificantDigitsオプションを使用する方法を学習します。

有効数字とは

有効数字とは、数値の精度を示す桁のことです。どの桁が有効であるかを理解するには、特定のルールに従う必要があります。

ゼロ以外の桁はすべて常に有効です。123という数値では、3桁すべてが有効です。45.67では、4桁すべてが有効です。

先頭のゼロは決して有効ではありません。小数点の位置を示すだけです。0.0045では、4と5のみが有効数字です。この数値には2桁の有効数字があり、6桁ではありません。

小数点以下の末尾のゼロは有効です。測定または計算がそのレベルまで正確であったことを示します。1.200という数値には4桁の有効数字がありますが、1.2には2桁しかありません。

小数点前の末尾のゼロは文脈に依存します。数値1200では、追加情報なしにゼロが有効数字かどうかは不明確です。科学的記数法または明示的な精度指示子がこの曖昧さを解決します。

最大有効桁数で数値をフォーマットする

maximumSignificantDigitsオプションは、フォーマットされた出力に表示される有効桁数を制限します。このオプションは、数値の大きさに関係なく一貫した精度で数値を表示したい場合に便利です。

const formatter = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 3,
});

console.log(formatter.format(1.2345));
// Output: "1.23"

console.log(formatter.format(12.345));
// Output: "12.3"

console.log(formatter.format(123.45));
// Output: "123"

console.log(formatter.format(1234.5));
// Output: "1,230"

数値が最大値よりも多くの有効桁数を含む場合、フォーマッタは数値を丸めます。丸めは標準的な丸め規則に従い、最も近い値に丸めます。数値が2つの値のちょうど中間にある場合、最も近い偶数に丸めます。

maximumSignificantDigitsオプションは1から21までの値を受け入れます。このオプションが指定されていない場合のデフォルト値は21で、これは事実上制限がないことを意味します。

const oneDigit = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 1,
});

console.log(oneDigit.format(54.33));
// Output: "50"

console.log(oneDigit.format(56.33));
// Output: "60"

このオプションは、整数、小数、異なる記数法の数値を含むすべての数値タイプで機能します。

最小有効桁数で数値をフォーマットする

minimumSignificantDigitsオプションは、フォーマットされた出力に少なくとも指定された数の有効桁数が表示されることを保証します。数値が最小値よりも少ない有効桁数を含む場合、フォーマッタは末尾にゼロを追加します。

const formatter = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 5,
});

console.log(formatter.format(1.23));
// Output: "1.2300"

console.log(formatter.format(123));
// Output: "123.00"

console.log(formatter.format(0.0012));
// Output: "0.0012000"

このオプションは、測定または計算が特定の精度で実行されたことを示す、一貫した精度レベルで数値を表示する必要がある場合に便利です。

minimumSignificantDigitsオプションは1から21までの値を受け入れます。デフォルト値は1で、これは数値が追加のゼロなしで自然な精度で表示されることを意味します。

const manyDigits = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 10,
});

console.log(manyDigits.format(5));
// Output: "5.000000000"

フォーマッターは、最小値に達するまで小数点以下にゼロを追加し、必要に応じて小数点の前にゼロを追加します。

最小有効桁数と最大有効桁数の組み合わせ

minimumSignificantDigitsとmaximumSignificantDigitsの両方を指定して、許容される精度の範囲を作成できます。フォーマッターは、この範囲内の数値を表示します。

const formatter = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 5,
});

console.log(formatter.format(1.2));
// Output: "1.20"
// Expanded to meet minimum of 3

console.log(formatter.format(1.234));
// Output: "1.234"
// Within range, displayed as-is

console.log(formatter.format(1.23456789));
// Output: "1.2346"
// Rounded to meet maximum of 5

これらのオプションを組み合わせる場合、最小値は最大値以下である必要があります。最大値より大きい最小値を指定すると、フォーマッターはRangeErrorをスローします。

try {
  const invalid = new Intl.NumberFormat("en-US", {
    minimumSignificantDigits: 5,
    maximumSignificantDigits: 3,
  });
} catch (error) {
  console.log(error.name);
  // Output: "RangeError"
}

この組み合わせは、最小限の精度レベルを強制し、過剰な桁数が表示を乱雑にするのを防ぎたい科学的または金融的なアプリケーションで特に有用です。

有効桁数と小数点以下の桁数の違い

有効桁数と小数点以下の桁数は、数値の精度を制御する2つの異なるアプローチを表します。それぞれのアプローチをいつ使用するかを理解することで、数値を適切にフォーマットできます。

小数点以下の桁数は、数値の大きさに関係なく、小数点の後に表示される桁数を制御します。minimumFractionDigitsとmaximumFractionDigitsのオプションがこのアプローチを実装します。

const decimalPlaces = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

console.log(decimalPlaces.format(1.2));
// Output: "1.20"

console.log(decimalPlaces.format(12.3));
// Output: "12.30"

console.log(decimalPlaces.format(123.4));
// Output: "123.40"

有効桁数は、数値全体に表示される意味のある桁数を制御し、数値の大きさに適応します。異なる大きさの数値は、一貫した精度を維持するために異なる小数点以下の桁数を表示します。

const significantDigits = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 3,
});

console.log(significantDigits.format(1.2));
// Output: "1.20"

console.log(significantDigits.format(12.3));
// Output: "12.3"

console.log(significantDigits.format(123.4));
// Output: "123"

有効桁数のアプローチでは、数値の大きさが増加するにつれて小数点以下の桁数が少なくなりますが、小数点以下の桁数のアプローチでは、大きさに関係なく同じ小数点以下の桁数が表示されることに注意してください。

小数桁オプションとの相互作用

有効桁数オプションを指定すると、デフォルトで小数桁数オプションよりも優先されます。フォーマッターは、いずれかの有効桁数オプションが存在する場合、minimumFractionDigitsとmaximumFractionDigitsを無視します。

const formatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
  maximumSignificantDigits: 3,
});

console.log(formatter.format(1234.56));
// Output: "1,230"
// Significant digits option takes precedence
// Fraction digit options are ignored

この動作はroundingPriorityオプションによって制御され、異なる精度設定間の競合をフォーマッターがどのように解決するかを決定します。デフォルト値は「auto」で、有効桁数が優先されます。

roundingPriorityを「morePrecision」または「lessPrecision」に設定することでこの動作を変更できますが、これらは特殊なユースケース向けの高度なオプションです。ほとんどのアプリケーションでは、デフォルトの優先動作が適切です。

小数桁数の代わりに有効桁数を使用する場合

異なる桁数の数値間で一貫した精度が必要な場合は、有効桁数を選択してください。このアプローチは、科学、工学、データ可視化の文脈で一般的です。

科学的測定と計算には有効桁数を使用してください。実験結果、センサー読み取り値、物理測定では、測定機器の精度を反映する必要があることがよくあります。測定値が0.0123、1.23、123のいずれであっても、3桁の有効桁数を一貫して表示することで精度を伝えます。

const measurement = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 4,
});

console.log(measurement.format(0.012345));
// Output: "0.01235"

console.log(measurement.format(1.2345));
// Output: "1.235"

console.log(measurement.format(1234.5));
// Output: "1,235"

さまざまな桁数の数値を表示するダッシュボード指標には有効桁数を使用してください。ページビュー、収益、ユーザー数などの統計を表示する場合、有効桁数により、小さな数値が過度の精度で表示されることを防ぎながら、大きな数値を読みやすく保ちます。

const metric = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 3,
});

console.log(metric.format(1.234));
// Output: "1.23"

console.log(metric.format(123.4));
// Output: "123"

console.log(metric.format(12345));
// Output: "12,300"

小数部分がセントまたはその他の固定通貨単位を表す通貨および金融金額には、小数桁数を使用してください。これらの金額は、桁数に関係なく一貫した小数桁数が必要です。

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

console.log(currency.format(1.5));
// Output: "$1.50"

console.log(currency.format(123.5));
// Output: "$123.50"

これらのアプローチの選択は、精度が総桁数に関連するか、固定小数部分に関連するかによって異なります。