如何控制百分比格式中的小数位数
为百分比数值设置精确或最大小数位数，以实现精度和显示的可控性
引言
在不同的场景下，显示百分比时对精度的要求也不同。例如，3.25% 的利率需要精确到两位小数以准确传达利率；仪表盘上的转化率以 85.5%（一位小数）显示更易于阅读；而完成百分比用 100%（无小数位）即可满足需求。
如果无法控制小数位数，百分比的显示就会变得不一致。例如，数值 0.8547 可能在某处显示为 85%，在另一处显示为 85.47%，让人难以判断哪种表示才是准确的。通过明确控制小数位数，可以确保应用中百分比的精度始终一致。
JavaScript 的 Intl.NumberFormat API 提供了 minimumFractionDigits 和 maximumFractionDigits 选项，用于控制百分比格式中小数位数的显示。这些选项支持本地化格式，能够为全球用户正确显示百分比。
百分比的默认显示方式
Intl.NumberFormat API 默认格式化百分比时不显示小数位。它会将输入值乘以 100，四舍五入到最接近的整数，并添加百分号。
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
console.log(formatter.format(0.8547));
// Output: "85%"
console.log(formatter.format(0.8234));
// Output: "82%"
console.log(formatter.format(0.0325));
// Output: "3%"
所有百分比都会以整数形式显示，无论输入值的精度如何。格式化器会将 0.8547 四舍五入为 85%，将 0.8234 四舍五入为 82%，小数部分会被舍弃。
这种默认行为适用于显示完成百分比、投票结果或其他无需小数精度的场景。但在许多情况下，为了传达精确的数值，需要显示小数位。
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
const conversionRate = 0.8547;
console.log(formatter.format(conversionRate));
// Output: "85%"
当实际值为 85.47% 时，将转化率显示为 85% 会隐藏对业务决策和分析有影响的重要精度信息。
按照指定小数位数格式化百分比
要显示特定的小数位数，请将 minimumFractionDigits 和 maximumFractionDigits 都设置为相同的值。这样可以确保每个百分比都精确显示为指定的小数位数。
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Output: "85.47%"
console.log(formatter.format(0.0325));
// Output: "3.25%"
console.log(formatter.format(0.85));
// Output: "85.00%"
格式化器会对所有数值统一显示两位小数。当输入值精度更高时，格式化器会四舍五入到两位小数；当输入值小数位数较少时，会自动补零。
将两个选项都设置为相同的值，可以保证应用中所有百分比的小数位数一致。这种一致性对于财务展示、数据表格以及需要对比多个百分比值的界面非常重要。
按一位小数格式化
将两个选项都设置为 1，即可精确显示一位小数。
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 1,
maximumFractionDigits: 1
});
console.log(formatter.format(0.8547));
// Output: "85.5%"
console.log(formatter.format(0.85));
// Output: "85.0%"
console.log(formatter.format(0.8234));
// Output: "82.3%"
格式化器会将 0.8547 四舍五入为 85.5%，并将 0.85 显示为 85.0%，带有末尾零。此格式适用于仪表盘等场景，一位小数既能保证足够精度，又不会让用户被数字淹没。
按三位或更多小数格式化
科学或金融类应用有时需要超过两位小数的精度。将两个选项都设置为 3 或更高，可以获得更高的精度。
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 3,
maximumFractionDigits: 3
});
console.log(formatter.format(0.854732));
// Output: "85.473%"
console.log(formatter.format(0.85));
// Output: "85.000%"
格式化器会严格显示三位小数，必要时自动补零。这种精度适用于实验室测量、统计分析或需要高精度的金融计算。
按最多 N 位小数格式化百分比
有时，只有在小数位数包含有意义信息时，才需要显示小数。设置 maximumFractionDigits 可以限制精度，同时允许格式化器省略不必要的末尾零。
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Output: "85.47%"
console.log(formatter.format(0.85));
// Output: "85%"
console.log(formatter.format(0.8));
// Output: "80%"
格式化器最多显示两位小数，但会去除末尾的零。数值 0.8547 会显示为 85.47%，保留两位小数；而 0.85 会显示为 85%，不会有多余的零。
这种方式适用于展示统计数据、指标或计算值等场景，其中末尾零没有信息价值。显示 85% 而不是 85.00% 能让界面更简洁、易读。
你可以将 minimumFractionDigits 设置为比 maximumFractionDigits 更小的值，以控制末尾零的显示数量。
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 1,
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Output: "85.47%"
console.log(formatter.format(0.85));
// Output: "85.0%"
console.log(formatter.format(0.8));
// Output: "80.0%"
现在，格式化器始终至少显示一位小数，只有在需要时才显示第二位。这种格式既保证了视觉一致性，又避免了不必要的精度。
百分比小数分隔符的本地化格式
不同的语言环境使用不同的字符作为小数分隔符。Intl.NumberFormat API 会自动为每个语言环境使用正确的分隔符。
const usFormatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const deFormatter = new Intl.NumberFormat("de-DE", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rate = 0.8547;
console.log(usFormatter.format(rate));
// Output: "85.47%"
console.log(deFormatter.format(rate));
// Output: "85,47 %"
美式英语格式化器使用句点作为小数分隔符，并将百分号紧跟在数字后面。德语格式化器使用逗号作为小数分隔符，并在百分号前加一个空格。
这些差异在许多语言环境中都存在。法语和德语一样用逗号。阿拉伯语使用不同的数字形态。Intl.NumberFormat API 在你提供合适的语言环境时，会自动处理所有这些差异。
const frFormatter = new Intl.NumberFormat("fr-FR", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const arFormatter = new Intl.NumberFormat("ar-EG", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rate = 0.8547;
console.log(frFormatter.format(rate));
// Output: "85,47 %"
console.log(arFormatter.format(rate));
// Output: "٨٥٫٤٧٪"
阿拉伯语格式化器会使用阿拉伯-印度数字和阿拉伯语百分号。通过使用支持本地化的格式化方式，无论用户的语言和地区如何，百分比都能正确显示。
何时使用精确小数位与最大小数位
根据百分比显示的上下文和目的，在精确小数位和最大小数位之间进行选择。
对于利率、年利率（APR）或收益率等金融类百分比，应使用精确小数位。这些数值需要保持一致的精度，以满足合规要求和用户预期。例如，利率必须始终显示为 3.25%，而不能显示为 3.3% 或 3%，以避免对实际利率产生误解。
在数据表格和对比展示中，用户需要同时阅读多个百分比时，应使用精确小数位。统一的小数位便于比较，避免因小数位不一致而造成数据精度不同的错觉。
在仪表盘和汇总统计等场景下，若可读性比精度更重要，应使用最大小数位。例如，显示 85% 而不是 85.00%，可以让界面更简洁。仅在小数位有实际意义时才显示。
对于可能自然为整数的计算类百分比（如完成率、成功率、分布百分比等），建议使用最大小数位。这类数据常以 .00 结尾，去除多余的零会更美观。
带小数位的负百分比格式化
小数位选项对负百分比同样适用。格式化器会根据百分比的正负，自动显示相应的小数位。
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(formatter.format(-0.0325));
// Output: "-3.25%"
console.log(formatter.format(-0.1547));
// Output: "-15.47%"
负号位于数字前，小数位根据你的格式化选项显示。适用于展示百分比变化、下降或亏损等场景。
复用格式化器以提升性能
创建新的 Intl.NumberFormat 实例需要初始化。如果你需要用相同选项格式化大量百分比，建议只创建一次格式化器并复用。
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rates = [0.8547, 0.0325, 0.9123, 0.0045];
rates.forEach(rate => {
console.log(formatter.format(rate));
});
// Output:
// "85.47%"
// "3.25%"
// "91.23%"
// "0.45%"
这种模式比为每个百分比创建一个新的格式化器更高效。当需要格式化数百或数千个数值（例如在渲染表格或图表时），性能差异会变得明显。
使用用户的首选区域设置
与其硬编码区域设置，不如使用用户浏览器的语言偏好来按其预期格式化百分比。navigator.language 属性可提供用户的首选区域设置。
const formatter = new Intl.NumberFormat(navigator.language, {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rate = 0.8547;
console.log(formatter.format(rate));
// Output varies by user's locale
// For en-US: "85.47%"
// For de-DE: "85,47 %"
// For fr-FR: "85,47 %"
你也可以传递整个 navigator.languages 数组，让 Intl API 从用户的偏好中选择第一个受支持的区域设置。
const formatter = new Intl.NumberFormat(navigator.languages, {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
如果用户的首选项不被运行环境支持，这种方法会自动回退到下一个可用选项。