如何以短形式或长形式显示单位
使用 unitDisplay 选项控制单位是以缩写、全拼还是紧凑符号形式显示
介绍
当您在界面中显示测量值时，单位会与数字一起占用空间。例如，距离 5 公里可以显示为 "5 km"、"5 公里" 或 "5km"，具体取决于您可用的空间和需要的清晰度。每种格式在可读性和水平空间之间进行权衡。
不同的上下文需要不同的格式选择。例如，显示多个指标的移动仪表板适合使用紧凑的单位，如 "km" 或 "kg"。教育应用程序在教授学生测量单位时需要清晰的全拼单位，如 "公里" 或 "千克"。数据密集型可视化则使用尽可能紧凑的形式，以便在屏幕上容纳更多信息。
JavaScript 的 Intl.NumberFormat 提供了 unitDisplay 选项来控制这种选择。您可以选择使用标准缩写的短格式、全拼单词的长格式，或最紧凑表示的窄格式。此选项使您能够精确控制单位在用户面前的显示方式。
unitDisplay 选项的控制内容
unitDisplay 选项在您将 Intl.NumberFormat 的 style 设置为 "unit" 时生效。它接受三个值："short"、"long" 和 "narrow"。每个值会为格式化输出中的单位部分生成不同的详细程度。
short 值生成标准缩写单位，例如 "5 km" 或 "10 lb"。long 值拼出完整的单位名称，例如 "5 公里" 或 "10 磅"。narrow 值生成最紧凑的表示形式，例如 "5km" 或 "10lb"，通常会去掉数字和单位之间的空格。
const shortFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
console.log(shortFormatter.format(5));
// 输出: "5 km"
const longFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long"
});
console.log(longFormatter.format(5));
// 输出: "5 公里"
const narrowFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "narrow"
});
console.log(narrowFormatter.format(5));
// 输出: "5km"
如果您省略 unitDisplay 选项，它的默认值为 "short"。这意味着单位格式化会使用标准缩写，除非您明确要求使用其他显示样式。
使用简短显示格式化单位
简短显示使用大多数人都能识别的标准缩写。这种格式在可读性和空间效率之间取得了平衡。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
console.log(formatter.format(5));
// 输出: "5 km"
console.log(formatter.format(42));
// 输出: "42 km"
格式化器在数字和缩写单位之间添加了一个空格。这种分隔提高了可读性，同时保持了输出的紧凑性。
您可以使用简短显示格式化不同的单位类型。
const distanceFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
const weightFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilogram",
unitDisplay: "short"
});
const volumeFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "liter",
unitDisplay: "short"
});
console.log(distanceFormatter.format(10));
// 输出: "10 km"
console.log(weightFormatter.format(25));
// 输出: "25 kg"
console.log(volumeFormatter.format(3.5));
// 输出: "3.5 L"
每种单位类型都使用其标准缩写。距离使用 km，重量使用 kg，体积使用 L。这些缩写被广泛认可，并且在大多数情况下效果良好。
简短显示是默认行为。如果您省略 unitDisplay 选项，格式化器会自动使用简短显示。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer"
});
console.log(formatter.format(5));
// 输出: "5 km"
这种默认设置使得在您希望使用标准缩写单位而无需显式指定显示选项时，简短显示非常方便。
使用完整显示格式化单位
完整显示会拼出完整的单位名称。这种格式提供了最大的清晰度，但需要更多的水平空间。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long"
});
console.log(formatter.format(5));
// 输出: "5 kilometers"
console.log(formatter.format(1));
// 输出: "1 kilometer"
格式化器会自动处理单数和复数形式。一个单位使用单数 "kilometer"，而多个单位使用复数 "kilometers"。您无需手动确定使用哪种形式。
您可以使用完整显示格式化不同的单位，以查看完整的单位名称。
const distanceFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "mile",
unitDisplay: "long"
});
const weightFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "pound",
unitDisplay: "long"
});
const temperatureFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "celsius",
unitDisplay: "long"
});
console.log(distanceFormatter.format(10));
// 输出: "10 miles"
console.log(weightFormatter.format(25));
// 输出: "25 pounds"
console.log(temperatureFormatter.format(22));
// 输出: "22 degrees Celsius"
完整显示使测量单位一目了然，无需用户解释缩写。温度单位尤其受益于完整显示，因为像 C 和 F 这样的缩写可能会引起歧义。
不熟悉测量单位缩写的用户会发现拼写出的单位更易于理解。教育内容、正式报告和注重可访问性的界面都能从这种明确性中受益。
使用窄显示格式化单位
窄显示提供了尽可能紧凑的表示形式。这种格式去掉了空格，并使用最少的符号以节省每一个字符。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "narrow"
});
console.log(formatter.format(5));
// 输出: "5km"
console.log(formatter.format(42));
// 输出: "42km"
格式化器去掉了数字和单位之间的空格，创建了更紧凑的输出。这在空间极其有限的布局中节省了水平空间。
不同的单位根据标准惯例会产生不同的窄表示形式。
const distanceFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "narrow"
});
const speedFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer-per-hour",
unitDisplay: "narrow"
});
const weightFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilogram",
unitDisplay: "narrow"
});
console.log(distanceFormatter.format(10));
// 输出: "10km"
console.log(speedFormatter.format(60));
// 输出: "60km/h"
console.log(weightFormatter.format(25));
// 输出: "25kg"
窄显示在空间极其有限且用户熟悉测量上下文时效果最佳。紧凑的格式假设用户可以在没有明确分隔或解释的情况下理解单位。
比较短显示、长显示和窄显示
当使用每种选项格式化相同的测量值时，三种显示选项之间的差异变得清晰。
const shortFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
const longFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long"
});
const narrowFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "narrow"
});
const distances = [1, 5, 10, 42];
distances.forEach(distance => {
console.log(`${distance}:`);
console.log(` Short: ${shortFormatter.format(distance)}`);
console.log(` Long: ${longFormatter.format(distance)}`);
console.log(` Narrow: ${narrowFormatter.format(distance)}`);
});
// 输出:
// 1:
// Short: 1 km
// Long: 1 kilometer
// Narrow: 1km
// 5:
// Short: 5 km
// Long: 5 kilometers
// Narrow: 5km
// 10:
// Short: 10 km
// Long: 10 kilometers
// Narrow: 10km
// 42:
// Short: 42 km
// Long: 42 kilometers
// Narrow: 42km
短显示的单位部分使用 4-5 个字符。长显示使用 9-10 个字符，包括复数形式。窄显示使用 2 个字符并去掉了空格。这种进展展示了清晰度与空间效率之间的权衡。
您可以比较不同的单位类型，查看每种显示选项如何处理各种测量值。
const units = [
{ unit: "mile", value: 10 },
{ unit: "pound", value: 25 },
{ unit: "gallon", value: 5 },
{ unit: "fahrenheit", value: 72 }
];
units.forEach(({ unit, value }) => {
const short = new Intl.NumberFormat("en-US", {
style: "unit",
unit: unit,
unitDisplay: "short"
}).format(value);
const long = new Intl.NumberFormat("en-US", {
style: "unit",
unit: unit,
unitDisplay: "long"
}).format(value);
const narrow = new Intl.NumberFormat("en-US", {
style: "unit",
unit: unit,
unitDisplay: "narrow"
}).format(value);
console.log(`${unit}:`);
console.log(` Short: ${short}`);
console.log(` Long: ${long}`);
console.log(` Narrow: ${narrow}`);
});
// 输出:
// mile:
// Short: 10 mi
// Long: 10 miles
// Narrow: 10mi
// pound:
// Short: 25 lb
// Long: 25 pounds
// Narrow: 25lb
// gallon:
// Short: 5 gal
// Long: 5 gallons
// Narrow: 5gal
// fahrenheit:
// Short: 72°F
// Long: 72 degrees Fahrenheit
// Narrow: 72°F
温度单位显示了有趣的行为。短显示和窄显示都使用度数符号和缩写单位，而长显示拼写为 "degrees Fahrenheit"。这使得长显示在需要完整上下文的温度场景中特别有价值。
单位显示如何因语言而异
所有三种显示选项都会根据您指定的区域设置进行调整。不同的语言使用不同的缩写、单位名称和间距约定。
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
locales.forEach(locale => {
const shortFormatter = new Intl.NumberFormat(locale, {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
const longFormatter = new Intl.NumberFormat(locale, {
style: "unit",
unit: "kilometer",
unitDisplay: "long"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(5)}`);
console.log(` Long: ${longFormatter.format(5)}`);
});
// 输出:
// en-US:
// Short: 5 km
// Long: 5 kilometers
// de-DE:
// Short: 5 km
// Long: 5 Kilometer
// fr-FR:
// Short: 5 km
// Long: 5 kilomètres
// ja-JP:
// Short: 5 km
// Long: 5キロメートル
短显示在各个区域设置中保持一致，因为“km”是国际公认的缩写。长显示则因每种语言对“公里”的不同表达而异。德语使用“Kilometer”，法语使用“kilomètres”，日语使用“キロメートル”。
格式化器会自动处理语法变化。德语对“Kilometer”的复数形式处理方式与英语对“kilometers”的复数形式不同。法语在单词中添加了重音符号。日语则使用完全不同的书写系统。Intl API 会根据区域设置管理这些差异。
某些区域设置对窄显示的处理方式不同。
const locales = ["en-US", "de-DE", "fr-FR"];
locales.forEach(locale => {
const narrowFormatter = new Intl.NumberFormat(locale, {
style: "unit",
unit: "kilometer-per-hour",
unitDisplay: "narrow"
});
console.log(`${locale}: ${narrowFormatter.format(60)}`);
});
// 输出:
// en-US: 60km/h
// de-DE: 60 km/h
// fr-FR: 60 km/h
英语在窄显示中去掉了空格，生成“60km/h”。德语和法语保留了空格，生成“60 km/h”。这些区域设置特定的约定反映了每种文化在紧凑形式中书写测量单位的方式。
何时使用简写显示
简写显示最适合在空间有限但缩写广为人知的场景中使用。这是通用应用程序中最常见的选择。
移动界面因屏幕宽度有限而受益于简写显示。显示多个指标的仪表板卡片需要紧凑的单位以适应屏幕上的信息。使用“42 km”代替“42 kilometers”每次测量可节省5个字符，在多个值中累积起来效果显著。
在数据表中显示列中的测量值需要一致的宽度。像“km”、“kg”和“L”这样的简写可以保持列宽可控。而像“kilometers”、“kilograms”和“liters”这样的长单位会不必要地加宽列。
科学和技术界面使用简写显示，因为这些场景中的用户熟悉标准缩写。工程师、科学家和技术专业人员期望测量值使用缩写单位。
地图和可视化界面使用简写显示，以避免界面因文本而显得杂乱。在地图标记上显示“5 km”比显示“5 kilometers”在标记周围空间有限时更易读。
简写显示在清晰度和效率之间取得了平衡。大多数用户能够毫无困惑地识别像 km、mi、kg、lb、L 和 gal 这样的标准缩写。
何时使用全称显示
当清晰度和可访问性比空间效率更重要时，全称显示是最佳选择。这种选择使测量值无需解释即可立即理解。
教育内容因全称显示而受益，因为学生可能不熟悉测量单位的缩写。解释距离、重量或体积的教学材料应拼写出单位以避免混淆。
以可访问性为重点的界面因全称显示而受益，因为屏幕阅读器对拼写出的单词的发音更自然。屏幕阅读器宣布“5 kilometers”听起来比“5 km”更自然，后者可能被读作“5 k m”或“5 kay em”。
正式文件和报告使用全称显示以保持专业语气。商业报告、科学论文和官方文件通常拼写出测量单位而不是缩写。
国际受众在测量系统不同的情况下因全称显示而受益。不熟悉公制或英制单位的用户发现像“kilometers”或“miles”这样的拼写名称比缩写更容易理解。
用户正在学习测量或单位的场景需要全称显示。教授烹饪测量的食谱应用、解释距离的健身应用或显示体重的健康应用应使用清晰的拼写单位。
何时使用紧凑显示
紧凑显示最适合在空间极度受限的情况下使用，此时每个字符都很重要，并且用户对测量领域非常熟悉。
信息密集的数据可视化从紧凑显示中受益。图表标签、图形注释和数据覆盖需要最少的文本，以避免遮挡底层的视觉内容。使用“60km/h”代替“60 km/h”可以节省一个字符，同时对理解上下文的用户仍然可读。
显示单一指标的紧凑仪表板磁贴在磁贴尺寸最小时可以使用紧凑显示。例如，一个以大字体显示“60km/h”的速度计小部件比显示“60 kilometers per hour”更适合。
屏幕空间有限的移动小部件使用紧凑显示可以最大化信息密度。例如，一个在主屏幕小部件中显示温度、风速和降水量的天气小部件从紧凑单位中受益。
面向专家用户的技术界面可以使用紧凑显示，因为受众无需明确分隔即可理解测量值。航空显示器、工程工具和科学仪器通常使用专家能够立即识别的紧凑单位标注。
紧凑显示假设用户熟悉测量上下文，并且无需辅助即可解释单位。这种选项以最大化空间效率为代价牺牲了一定的清晰度。
将单位显示与其他格式选项结合使用
unitDisplay 选项可以与所有其他数字格式选项一起使用。您可以在选择单位显示样式的同时控制小数位数、分组和其他格式。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long",
maximumFractionDigits: 2
});
console.log(formatter.format(42.7856));
// 输出："42.79 kilometers"
console.log(formatter.format(5.1));
// 输出："5.1 kilometers"
maximumFractionDigits 选项控制小数精度，而 unitDisplay 控制单位格式。这些选项协同工作以生成您需要的精确格式。
您可以将单位显示与紧凑表示法结合使用，以便以可读的形式显示大数值测量。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "meter",
unitDisplay: "long",
notation: "compact"
});
console.log(formatter.format(1500));
// 输出："1.5K meters"
console.log(formatter.format(2400000));
// 输出："2.4M meters"
这种组合在显示非常大的测量值时效果很好，因为它可以同时清晰地显示数量级和单位。科学数据、地理距离或天文测量从带有长单位显示的紧凑表示法中受益。
您可以将单位显示与符号显示结合使用，以显示测量值的变化或差异。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilogram",
unitDisplay: "long",
signDisplay: "always"
});
console.log(formatter.format(2.5));
// 输出："+2.5 kilograms"
console.log(formatter.format(-1.8));
// 输出："-1.8 kilograms"
这种格式非常适合显示重量变化、海拔差异或任何需要明确变化方向的测量值。显式符号与拼写完整的单位相结合，使变化一目了然。
需要记住的事项
unitDisplay 选项控制使用 Intl.NumberFormat 格式化测量值时单位的显示方式。将其设置为 "short" 可显示标准缩写形式，例如 "5 km"；设置为 "long" 可显示完整拼写形式，例如 "5 kilometers"；设置为 "narrow" 可显示紧凑形式，例如 "5km"。如果未指定，该选项默认为 "short"。
在空间有限且用户能够理解标准缩写的情况下，使用短显示形式。在清晰度和可访问性比空间更重要，或者用户可能不熟悉缩写的情况下，使用长显示形式。仅在空间极度受限且用户对测量领域非常熟悉的情况下，使用紧凑显示形式。
格式化器会自动处理特定于语言环境的变化，包括不同的缩写、单位名称、间距约定和复数形式。将 unitDisplay 与其他格式化选项（如小数位数、紧凑表示法和符号显示）结合使用，以创建满足您应用需求的精确测量格式。