Как отображать единицы измерения в краткой или полной форме
Используйте опцию unitDisplay, чтобы управлять тем, как единицы отображаются: в виде сокращений, полных слов или компактных символов
Введение
Когда вы показываете измерения в интерфейсе, единица занимает место рядом с числом. Расстояние 5 километров можно отобразить как «5 км», «5 километров» или «5км» — в зависимости от доступного пространства и необходимой ясности. Каждый формат балансирует между читаемостью и экономией горизонтального пространства.
В разных ситуациях нужны разные форматы. Мобильная панель с множеством метрик выигрывает от компактных единиц вроде «км» или «кг». Образовательное приложение, обучающее измерениям, требует понятных, полностью написанных единиц, например «километры» или «килограммы». В насыщенной данными визуализации используют максимально компактную форму, чтобы вместить больше информации на экран.
В JavaScript Intl.NumberFormat есть опция unitDisplay, которая позволяет управлять этим выбором. Можно выбрать короткое отображение со стандартными сокращениями, длинное — с полностью написанными словами, или узкое — с самой компактной записью. Эта опция даёт вам точный контроль над тем, как единицы будут видны пользователям.
Что регулирует опция unitDisplay
Опция unitDisplay работает, когда вы устанавливаете style в значение "unit" в Intl.NumberFormat. Она принимает три значения: "short", "long" и "narrow". Каждое значение определяет степень подробности для единицы в отформатированном выводе.
Значение short даёт стандартные сокращённые единицы, например «5 км» или «10 фунтов». Значение long полностью прописывает название единицы, например «5 километров» или «10 фунтов». Значение narrow даёт максимально компактную запись, например «5км» или «10фунтов», часто убирая пробел между числом и единицей.
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"
Каждый тип единицы использует своё стандартное сокращение. Для расстояния — км, для веса — кг, для объёма — л. Эти сокращения широко известны и подходят для большинства случаев.
Краткий формат — это поведение по умолчанию. Если вы не укажете параметр 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"
Форматтер автоматически различает единственное и множественное число. Для одной единицы используется "километр", для нескольких — "километры". Вам не нужно определять форму вручную.
Вы можете форматировать разные единицы в полном виде, чтобы видеть их полные названия.
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», особенно если вокруг маркера мало места.
Краткое отображение обеспечивает баланс между понятностью и эффективностью. Большинство пользователей без труда распознают стандартные сокращения, такие как км, ми, кг, фунт, л и гал, не испытывая путаницы.
Когда использовать полное написание
Полное написание лучше всего подходит, когда важнее понятность и доступность, чем экономия места. Такой вариант делает измерения сразу понятными, не требуя дополнительного толкования.
Образовательный контент выигрывает от полного написания, потому что учащиеся могут не знать сокращения единиц измерения. В учебных материалах, где объясняются расстояния, вес или объём, стоит писать единицы полностью, чтобы избежать недопонимания.
Интерфейсы, ориентированные на доступность, выигрывают от полного написания, потому что экранные дикторы естественнее произносят полностью написанные слова. Например, экранный диктор скажет «5 километров» гораздо естественнее, чем «5 км», что может прозвучать как «5 к м» или «5 кей эм».
В официальных документах и отчётах используется полное написание для поддержания профессионального стиля. В бизнес-отчётах, научных статьях и официальных документах обычно единицы измерения пишутся полностью, а не сокращаются.
Международная аудитория выигрывает от полного написания, когда системы измерения различаются. Пользователям, незнакомым с метрическими или имперскими единицами, проще понять написания вроде «километры» или «мили», чем их сокращения.
В ситуациях, когда пользователи только знакомятся с измерениями или единицами, нужно использовать полное написание. Приложения с рецептами, обучающие кулинарным мерам, фитнес-приложения, объясняющие дистанции, или приложения для здоровья, показывающие вес, должны использовать понятные, полностью написанные единицы.
Когда использовать узкое написание
Узкое написание лучше всего подходит для крайне ограниченных по пространству случаев, когда важен каждый символ, а пользователи хорошо знакомы с областью измерений.
Визуализации данных с высокой плотностью информации выигрывают от узкого написания. Подписи к графикам, аннотации и наложения данных требуют минимального текста, чтобы не закрывать важную визуальную информацию. Например, использование «60км/ч» вместо «60 км/ч» экономит один символ и остаётся понятным для тех, кто знаком с контекстом.
Компактные плитки на дашборде, показывающие отдельные метрики, могут использовать узкий формат отображения, если размер плитки минимален. Виджет-спидометр с крупной надписью «60 км/ч» выглядит лучше, чем «60 километров в час».
Мобильные виджеты с ограниченным экранным пространством используют узкий формат, чтобы уместить больше информации. Например, погодный виджет, показывающий температуру, скорость ветра и осадки на маленьком экране, выигрывает от компактных единиц измерения.
Технические интерфейсы для опытных пользователей могут использовать узкий формат, потому что аудитория понимает измерения без явного разделения. Авиационные дисплеи, инженерные инструменты и научные приборы часто используют компактное обозначение единиц, которое эксперты мгновенно распознают.
Узкий формат предполагает, что пользователи знакомы с контекстом измерений и могут интерпретировать единицы без подсказок. Такой вариант жертвует ясностью ради максимальной экономии места.
Комбинируйте отображение единиц с другими вариантами форматирования
Опция 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 км», в "long" для полного написания единиц, например, «5 километров», или в "narrow" для компактных форм, например, «5км». По умолчанию используется "short", если опция не указана.
Используйте короткий формат для универсальных приложений, где важна экономия места и пользователи понимают стандартные сокращения. Длинный формат используйте, когда важнее ясность и доступность, либо если пользователи могут не знать сокращения. Узкий формат применяйте только в условиях крайней нехватки места и если пользователи хорошо знакомы с областью измерений.
Форматтер автоматически учитывает локальные особенности, включая разные сокращения, названия единиц, правила пробелов и формы множественного числа. Комбинируйте unitDisplay с другими опциями форматирования, такими как количество знаков после запятой, компактная запись и отображение знака, чтобы получить нужный формат измерения для вашего приложения.