如何以简写或全称形式显示单位
使用 unitDisplay 选项控制单位显示为缩写、全称或紧凑符号
简介
在界面中显示度量值时，单位会与数字一起占用空间。例如，距离 5 公里可以显示为 "5 km"、"5 公里" 或 "5km"，具体取决于可用空间和所需的清晰度。每种格式都在可读性和横向空间之间做出权衡。
不同的场景需要不同的格式选择。例如，移动端仪表盘展示多个指标时，适合使用如 "km" 或 "kg" 这样的紧凑单位；而教育类应用为学生讲解度量单位时，则需要清晰、完整拼写的单位，如 "公里" 或 "千克"；数据密集型可视化则会采用最紧凑的形式，以便在屏幕上展示更多信息。
JavaScript 的 Intl.NumberFormat 提供了 unitDisplay 选项来控制单位的显示方式。你可以选择标准缩写的短格式、全拼的长格式，或最紧凑的窄格式。该选项让你可以精确控制单位在用户界面中的呈现方式。
unitDisplay 选项的作用
当你在 Intl.NumberFormat 中将 style 设置为 "unit" 时，unitDisplay 选项才会生效。它接受三个值："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));
// Output: "5 km"
const longFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long"
});
console.log(longFormatter.format(5));
// Output: "5 kilometers"
const narrowFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "narrow"
});
console.log(narrowFormatter.format(5));
// Output: "5km"
如果省略 unitDisplay 选项，则默认为 "short"。这意味着单位格式化会使用标准缩写，除非你明确指定其他显示样式。
使用短格式显示单位
短格式显示采用大多数人都能识别的标准缩写。这种格式在可读性和空间效率之间取得了平衡。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
console.log(formatter.format(5));
// Output: "5 km"
console.log(formatter.format(42));
// Output: "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));
// Output: "10 km"
console.log(weightFormatter.format(25));
// Output: "25 kg"
console.log(volumeFormatter.format(3.5));
// Output: "3.5 L"
每种单位类型都采用其标准缩写。距离用 km，重量用 kg，体积用 L。这些缩写被广泛认可，适用于大多数场景。
短格式显示是默认行为。如果省略 unitDisplay 选项，格式化器会自动使用短格式显示。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer"
});
console.log(formatter.format(5));
// Output: "5 km"
这种默认设置让你在无需明确指定显示选项时，方便地使用标准缩写单位。
使用长格式显示单位
长格式显示会完整拼写单位名称。这种格式最大程度地提升了清晰度，但会占用更多横向空间。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long"
});
console.log(formatter.format(5));
// Output: "5 kilometers"
console.log(formatter.format(1));
// Output: "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));
// Output: "10 miles"
console.log(weightFormatter.format(25));
// Output: "25 pounds"
console.log(temperatureFormatter.format(22));
// Output: "22 degrees Celsius"
长格式显示让测量单位一目了然，无需用户去理解缩写。温度单位尤其适合用长格式显示，因为像 C 和 F 这样的缩写可能会引起歧义。
对于不熟悉计量单位缩写的用户，完整拼写的单位更易于理解。教育内容、正式报告以及注重无障碍的界面都能从这种明确性中受益。
使用窄格式显示单位
窄格式显示提供最紧凑的表示方式。该格式会去除空格，并使用最少的符号，以最大限度地节省字符数。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "narrow"
});
console.log(formatter.format(5));
// Output: "5km"
console.log(formatter.format(42));
// Output: "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));
// Output: "10km"
console.log(speedFormatter.format(60));
// Output: "60km/h"
console.log(weightFormatter.format(25));
// Output: "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)}`);
});
// Output:
// 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}`);
});
// Output:
// 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
温度单位的表现尤为有趣。短格式和窄格式都使用度数符号和缩写单位，而长格式则完整拼写“华氏度”。因此，在需要完整上下文的温度场景下，长格式尤为有价值。
单位显示在不同语言中的差异
三种显示选项都会根据你指定的本地化语言进行适配。不同语言采用不同的缩写、单位名称和空格规范。
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)}`);
});
// Output:
// 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)}`);
});
// Output:
// 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 凯姆”。
正式文件和报告通常使用全称显示，以保持专业风格。商业报告、科学论文和官方文件通常会将测量单位完整拼写，而不是使用缩写。
面对国际用户时，因各地测量体系不同，使用全称显示更有利。对不熟悉公制或英制单位的用户来说，像“kilometers”或“miles”这样的全称比缩写更易理解。
在用户正在学习测量或单位的场景下，应使用全称显示。例如，教授烹饪计量的食谱应用、解释距离的健身应用或显示体重的健康应用，都应使用清晰、完整的单位名称。
何时使用紧凑显示
紧凑显示适用于空间极为有限且用户对测量领域非常熟悉的场景，每个字符都很重要。
信息密集型数据可视化适合使用紧凑显示。图表标签、图形注释和数据叠加需要尽量简短的文本，以免遮挡底层可视内容。例如，用“60km/h”代替“60 km/h”可以节省一个字符，同时对于了解上下文的用户来说依然易于阅读。
当仪表盘磁贴仅显示单一指标且尺寸最小时，可以采用窄格式显示。例如，速度表小部件用大号字体显示“60 km/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));
// Output: "42.79 kilometers"
console.log(formatter.format(5.1));
// Output: "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));
// Output: "1.5K meters"
console.log(formatter.format(2400000));
// Output: "2.4M meters"
这种组合适用于需要同时清晰展示数值大小和单位的场景，如科学数据、地理距离或天文测量，使用紧凑记数法配合长单位显示效果更佳。
您可以将单位显示与符号显示结合，用于展示测量值的变化或差异。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilogram",
unitDisplay: "long",
signDisplay: "always"
});
console.log(formatter.format(2.5));
// Output: "+2.5 kilograms"
console.log(formatter.format(-1.8));
// Output: "-1.8 kilograms"
这种格式非常适合用于显示体重变化、高度差异或任何需要区分变化方向的度量。显式的正负号加上全拼单位，使变化一目了然。
需要记住的要点
unitDisplay 选项用于控制使用 Intl.NumberFormat 格式化度量时单位的显示方式。设置为 "short" 时，采用标准缩写（如 "5 km"）；设置为 "long" 时，采用全拼单位（如 "5 kilometers"）；设置为 "narrow" 时，采用紧凑形式（如 "5km"）。如果未设置该选项，默认使用 "short"。
在空间有限且用户熟悉标准缩写的通用应用中，建议使用短格式显示。当清晰度和可访问性比空间更重要，或用户可能不熟悉缩写时，建议使用长格式显示。仅在极度受限的空间且用户对度量领域非常熟悉的情况下，才建议使用窄格式显示。
格式化器会自动处理本地化差异，包括不同的缩写、单位名称、间距规范和复数形式。可以将 unitDisplay 与小数位数、紧凑记数法和符号显示等其他格式选项结合，灵活生成应用所需的度量格式。