小数点以下の末尾のゼロを削除する方法
小数桁オプションを使用して、数値を末尾のゼロありまたはなしで表示するタイミングを制御します。
はじめに
数値をフォーマットする際、一部の値は小数点以下に末尾のゼロが自然に付きます。1.5は1.50と表示されたり、3は3.00と表示されたりすることがあります。これらの末尾のゼロは、セントを一貫して表示したい価格には意味がありますが、統計や測定値を表示する際には不要に見えます。
JavaScriptのIntl.NumberFormatを使用すると、末尾のゼロを表示するかどうかを制御できます。フォーマッタを設定して、ゼロを削除したり、保持したり、ニーズに応じて異なるルールを適用したりできます。
末尾のゼロとは
末尾のゼロとは、小数点以下の数値の末尾に表示されるゼロのことです。これらは数値の数学的な値を変更しませんが、表示される際の数値の見た目に影響します。
// These numbers have the same value but different trailing zeros
1.5 // No trailing zeros
1.50 // One trailing zero
1.500 // Two trailing zeros
末尾のゼロは、表示する小数点以下の桁数を指定した際に表示されることがあります。数値が指定した小数点以下の桁数よりも少ない有効桁数を持つ場合、フォーマッタは残りの位置を埋めるためにゼロを追加します。
Intl.NumberFormatがデフォルトで小数桁を表示する方法
デフォルトでは、Intl.NumberFormatは最大3桁の小数点以下の桁数を表示し、末尾のゼロを削除します。つまり、ほとんどの数値は不要なゼロなしで表示されます。
const formatter = new Intl.NumberFormat("en-US");
console.log(formatter.format(1.5));
// Output: "1.5"
console.log(formatter.format(1.50));
// Output: "1.5"
console.log(formatter.format(1.123456));
// Output: "1.123"
フォーマッタは1.5と1.50を同じ値として扱い、同じように表示します。3桁を超える小数点以下の桁数を持つ数値は、3桁に四捨五入されます。
最小および最大小数桁数を設定する
minimumFractionDigitsオプションとmaximumFractionDigitsオプションは、小数点以下に表示される桁数を制御します。これら2つのオプションは連携して、末尾のゼロを表示するかどうかを決定します。
const formatter = new Intl.NumberFormat("en-US", {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(formatter.format(1.5));
// Output: "1.50"
console.log(formatter.format(1));
// Output: "1.00"
console.log(formatter.format(1.234));
// Output: "1.23"
minimumFractionDigitsとmaximumFractionDigitsが同じ値に設定されている場合、すべての数値は正確にその桁数の小数点以下で表示されます。桁数が少ない数値には末尾のゼロが追加され、桁数が多い数値は四捨五入されます。
末尾のゼロを削除する
末尾のゼロを削除するには、minimumFractionDigitsを0に設定し、maximumFractionDigitsを許可する小数点以下の最大桁数に設定します。この設定により、フォーマッタは0からN桁の小数点以下を表示し、必要な桁数のみを使用するようになります。
const formatter = new Intl.NumberFormat("en-US", {
minimumFractionDigits: 0,
maximumFractionDigits: 2
});
console.log(formatter.format(1));
// Output: "1"
console.log(formatter.format(1.5));
// Output: "1.5"
console.log(formatter.format(1.50));
// Output: "1.5"
console.log(formatter.format(1.23));
// Output: "1.23"
フォーマッタは、整数を小数点なしで表示し、小数点以下1桁の数値はそのまま表示し、表示されるはずだった末尾のゼロを削除します。最大桁数を超える場合、数値は引き続き最大小数点以下桁数に四捨五入されます。
最小値をゼロより大きく設定する
minimumFractionDigitsをゼロより大きい値に設定しながら、末尾のゼロを削除することもできます。これにより、少なくともいくつかの小数点以下の桁が常に表示されるようになり、その最小値を超えるゼロは削除されます。
const formatter = new Intl.NumberFormat("en-US", {
minimumFractionDigits: 1,
maximumFractionDigits: 3
});
console.log(formatter.format(1));
// Output: "1.0"
console.log(formatter.format(1.5));
// Output: "1.5"
console.log(formatter.format(1.50));
// Output: "1.5"
console.log(formatter.format(1.234));
// Output: "1.234"
console.log(formatter.format(1.2345));
// Output: "1.235"
数値1は、最小値が小数点以下1桁であるため、1.0として表示されます。数値1.5はそのまま表示されます。数値1.50は末尾のゼロが削除されます。小数点以下3桁を超える数値は3桁に四捨五入されます。
末尾のゼロを保持するタイミング
すべての数値で一貫した精度を示す必要がある場合は、末尾のゼロを保持します。これは、価格、金額、測定値など、小数点以下の桁数が意味を伝える場合に一般的です。
// Prices should show consistent decimal places
const priceFormatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(priceFormatter.format(5));
// Output: "$5.00"
console.log(priceFormatter.format(5.5));
// Output: "$5.50"
通貨フォーマッタは、デフォルトでこのアプローチを使用します。両方の金額は正確に小数点以下2桁で表示され、比較しやすく、これらが金銭的価値であることを強調します。
末尾のゼロを削除する場合
統計、パーセンテージ、測定値、または末尾のゼロが情報を追加しない値を表示する場合は、末尾のゼロを削除します。これにより、より明確で読みやすい出力が作成されます。
// Statistics look cleaner without trailing zeros
const statsFormatter = new Intl.NumberFormat("en-US", {
minimumFractionDigits: 0,
maximumFractionDigits: 2
});
console.log(`Average: ${statsFormatter.format(3.5)} items`);
// Output: "Average: 3.5 items"
console.log(`Total: ${statsFormatter.format(100)} items`);
// Output: "Total: 100 items"
// Percentages often work better without trailing zeros
const percentFormatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 0,
maximumFractionDigits: 1
});
console.log(percentFormatter.format(0.75));
// Output: "75%"
console.log(percentFormatter.format(0.755));
// Output: "75.5%"
統計とパーセンテージは、必要な小数点以下の桁数のみを表示します。整数は小数点なしで表示され、意味のある小数桁を持つ数値は、不要な末尾のゼロなしで表示されます。
ロケールが小数表示に与える影響
小数点の位置と桁区切り文字はロケールによって異なりますが、末尾のゼロに関するルールはすべてのロケールで同じように機能します。minimumFractionDigitsオプションとmaximumFractionDigitsオプションは、使用するロケールに関係なく同じ効果があります。
const formatterEN = new Intl.NumberFormat("en-US", {
minimumFractionDigits: 0,
maximumFractionDigits: 2
});
const formatterDE = new Intl.NumberFormat("de-DE", {
minimumFractionDigits: 0,
maximumFractionDigits: 2
});
console.log(formatterEN.format(1234.5));
// Output: "1,234.5"
console.log(formatterDE.format(1234.5));
// Output: "1.234,5"
両方のフォーマッタは末尾のゼロを削除し、小数点以下1桁で数値を表示します。違いは、米国英語形式では小数点にピリオドを使用し、千の位の区切り文字にカンマを使用するのに対し、ドイツ語形式では逆の規則を使用することです。