有効桁数で数値をフォーマットする方法
精度を指定することでフォーマットされた数値の表示桁数と丸め方を制御する
はじめに
数値を表示用にフォーマットする際、小数点以下の桁数ではなく、数値が含む有効桁数に基づいて精度を制御する必要がある場合があります。このアプローチは有効桁数によるフォーマットと呼ばれています。
有効桁数とは、数値の精度に関する意味のある情報を持つ桁のことです。数値123.45は5つの有効桁数を持ちます。数値0.00123は3つの有効桁数を持ちます。これは先頭のゼロが精度ではなく大きさのみを示すためです。
このレッスンでは、JavaScriptで有効桁数を使用して数値をフォーマットする方法を紹介します。小数点以下の桁数を制御するよりもこのアプローチが優れている場合や、Intl.NumberFormat APIでminimumSignificantDigitsおよびmaximumSignificantDigitsオプションを使用する方法について学びます。
有効桁数とは
有効桁数とは、数値の精度を示す桁のことです。どの桁が有効かを理解するには、特定のルールに従う必要があります。
ゼロ以外の数字は常に有効桁数です。数値123では、3つの桁すべてが有効桁数です。45.67では、4つの桁すべてが有効桁数です。
先頭のゼロは決して有効桁数ではありません。これらは小数点の位置を示すだけです。0.0045では、4と5だけが有効桁数です。この数値は6桁ではなく2桁の有効桁数を持ちます。
小数点以下の末尾のゼロは有効桁数です。これらは測定や計算がその精度レベルまで正確であることを示します。数値1.200は4つの有効桁数を持ちますが、1.2は2つだけです。
小数点の前の末尾のゼロは文脈によって異なります。数値1200では、追加情報がなければゼロが有効かどうかは不明確です。科学的表記法や明示的な精度指標がこの曖昧さを解決します。
最大有効桁数による数値のフォーマット
maximumSignificantDigitsオプションは、フォーマットされた出力に表示される有効桁数を制限します。このオプションは、数値の大きさに関係なく一貫した精度で表示したい場合に便利です。
const formatter = new Intl.NumberFormat("en-US", {
maximumSignificantDigits: 3,
});
console.log(formatter.format(1.2345));
// 出力: "1.23"
console.log(formatter.format(12.345));
// 出力: "12.3"
console.log(formatter.format(123.45));
// 出力: "123"
console.log(formatter.format(1234.5));
// 出力: "1,230"
数値が最大有効桁数より多くの有効桁を持つ場合、フォーマッターは数値を丸めます。丸めは標準的な丸めルールに従い、最も近い値に丸められます。数値が2つの値のちょうど中間にある場合、最も近い偶数に丸められます。
maximumSignificantDigitsオプションは1から21までの値を受け付けます。このオプションが指定されていない場合のデフォルト値は21で、事実上制限がないことを意味します。
const oneDigit = new Intl.NumberFormat("en-US", {
maximumSignificantDigits: 1,
});
console.log(oneDigit.format(54.33));
// 出力: "50"
console.log(oneDigit.format(56.33));
// 出力: "60"
このオプションは整数、小数、異なる表記法の数値など、すべての数値タイプで機能します。
最小有効桁数による数値のフォーマット
minimumSignificantDigitsオプションは、フォーマットされた出力に少なくとも指定された数の有効桁が表示されることを保証します。数値が最小値より少ない有効桁を持つ場合、フォーマッターは末尾にゼロを追加します。
const formatter = new Intl.NumberFormat("en-US", {
minimumSignificantDigits: 5,
});
console.log(formatter.format(1.23));
// 出力: "1.2300"
console.log(formatter.format(123));
// 出力: "123.00"
console.log(formatter.format(0.0012));
// 出力: "0.0012000"
このオプションは、測定や計算が特定の精度で行われたことを示すために、一貫したレベルの精度で数値を表示する必要がある場合に便利です。
minimumSignificantDigitsオプションは1から21までの値を受け付けます。デフォルト値は1で、これは数値が追加のゼロなしで自然な精度で表示されることを意味します。
const manyDigits = new Intl.NumberFormat("en-US", {
minimumSignificantDigits: 10,
});
console.log(manyDigits.format(5));
// 出力: "5.000000000"
フォーマッターは最小値に達するために小数点の後にゼロを追加するか、必要に応じて小数点の前にゼロを追加します。
最小有効桁数と最大有効桁数を組み合わせる
minimumSignificantDigitsとmaximumSignificantDigitsの両方を指定することで、許容される精度の範囲を作成できます。フォーマッターはこの範囲内の数値を表示します。
const formatter = new Intl.NumberFormat("en-US", {
minimumSignificantDigits: 3,
maximumSignificantDigits: 5,
});
console.log(formatter.format(1.2));
// 出力: "1.20"
// 最小3桁を満たすために拡張
console.log(formatter.format(1.234));
// 出力: "1.234"
// 範囲内なのでそのまま表示
console.log(formatter.format(1.23456789));
// 出力: "1.2346"
// 最大5桁を満たすために四捨五入
これらのオプションを組み合わせる場合、最小値は最大値以下である必要があります。最小値が最大値より大きい値を指定すると、フォーマッターはRangeErrorをスローします。
try {
const invalid = new Intl.NumberFormat("en-US", {
minimumSignificantDigits: 5,
maximumSignificantDigits: 3,
});
} catch (error) {
console.log(error.name);
// 出力: "RangeError"
}
この組み合わせは、最小限の精度を強制しつつ、過剰な桁数が表示を乱すことを防ぎたい科学的または金融アプリケーションで特に有用です。
有効桁数と小数点以下の桁数の違い
有効桁数と小数点以下の桁数は、数値の精度を制御する2つの異なるアプローチを表しています。それぞれのアプローチをいつ使用するかを理解することで、数値を適切にフォーマットできます。
小数点以下の桁数は、数値の大きさに関係なく、小数点以下に表示される桁数を制御します。minimumFractionDigitsとmaximumFractionDigitsのオプションがこのアプローチを実装しています。
const decimalPlaces = new Intl.NumberFormat("en-US", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
console.log(decimalPlaces.format(1.2));
// 出力: "1.20"
console.log(decimalPlaces.format(12.3));
// 出力: "12.30"
console.log(decimalPlaces.format(123.4));
// 出力: "123.40"
有効桁数は、数値の大きさに適応して、数値全体に表示される意味のある桁数を制御します。異なる大きさの数値は、一貫した精度を維持するために異なる小数点以下の桁数を表示します。
const significantDigits = new Intl.NumberFormat("en-US", {
minimumSignificantDigits: 3,
maximumSignificantDigits: 3,
});
console.log(significantDigits.format(1.2));
// 出力: "1.20"
console.log(significantDigits.format(12.3));
// 出力: "12.3"
console.log(significantDigits.format(123.4));
// 出力: "123"
有効桁数アプローチでは、数値の大きさが増すにつれて小数点以下の桁数が減少するのに対し、小数点以下の桁数アプローチでは、大きさに関係なく同じ小数点以下の桁数を表示することに注目してください。
小数桁数オプションとの相互作用
有効桁数オプションを指定すると、デフォルトでは小数桁数オプションよりも優先されます。フォーマッターは有効桁数オプションのいずれかが存在する場合、minimumFractionDigitsとmaximumFractionDigitsを無視します。
const formatter = new Intl.NumberFormat("en-US", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
maximumSignificantDigits: 3,
});
console.log(formatter.format(1234.56));
// 出力: "1,230"
// 有効桁数オプションが優先される
// 小数桁数オプションは無視される
この動作はroundingPriorityオプションによって制御され、フォーマッターが異なる精度設定間の競合をどのように解決するかを決定します。デフォルト値は「auto」で、有効桁数を優先します。
この動作を変更するには、roundingPriorityを「morePrecision」または「lessPrecision」に設定できますが、これらは特殊なユースケース向けの高度なオプションです。ほとんどのアプリケーションでは、デフォルトの優先順位の動作が適切です。
小数点以下の桁数ではなく有効桁数を使用するタイミング
異なる大きさの数値間で一貫した精度が必要な場合は、有効桁数を選択してください。このアプローチは科学、工学、データ可視化のコンテキストで一般的です。
科学的測定や計算には有効桁数を使用してください。実験結果、センサー読み取り値、物理的測定値は、測定機器の精度を反映する必要があることがよくあります。一貫して3桁の有効数字を表示することで、測定値が0.0123、1.23、または123のいずれであっても、精度が伝わります。
const measurement = new Intl.NumberFormat("en-US", {
maximumSignificantDigits: 4,
});
console.log(measurement.format(0.012345));
// 出力: "0.01235"
console.log(measurement.format(1.2345));
// 出力: "1.235"
console.log(measurement.format(1234.5));
// 出力: "1,235"
様々な大きさの数値を表示するダッシュボードメトリクスには有効桁数を使用してください。ページビュー、収益、ユーザー数などの統計を表示する場合、有効桁数を使用すると、小さな数値が過度の精度で表示されるのを防ぎながら、大きな数値を読みやすく保つことができます。
const metric = new Intl.NumberFormat("en-US", {
maximumSignificantDigits: 3,
});
console.log(metric.format(1.234));
// 出力: "1.23"
console.log(metric.format(123.4));
// 出力: "123"
console.log(metric.format(12345));
// 出力: "12,300"
小数部分がセントやその他の固定通貨単位を表す通貨や金融金額には、小数点以下の桁数を使用してください。これらの金額は、大きさに関係なく一貫した小数点以下の桁数が必要です。
const currency = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
console.log(currency.format(1.5));
// 出力: "$1.50"
console.log(currency.format(123.5));
// 出力: "$123.50"
これらのアプローチの選択は、精度が桁数の合計に関連するか、固定小数部分に関連するかによって異なります。