Как отображать единицы в короткой или длинной форме

Введение

Когда вы отображаете измерения в интерфейсе, единица измерения занимает место рядом с числом. Расстояние в 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));
// Вывод: "5 км"

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));
// Вывод: "5км"

Опция unitDisplay по умолчанию имеет значение "short", если вы ее не укажете. Это означает, что форматирование единиц измерения использует стандартные сокращения, если вы явно не запросите другой стиль отображения.

Форматирование единиц с коротким отображением

Короткое отображение использует стандартные сокращения, которые большинству людей знакомы. Этот формат сочетает читаемость с экономией пространства.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "short"
});

console.log(formatter.format(5));
// Вывод: "5 км"

console.log(formatter.format(42));
// Вывод: "42 км"

Форматировщик добавляет пробел между числом и сокращенной единицей. Такое разделение улучшает читаемость, сохраняя компактность вывода.

Вы можете форматировать различные типы единиц с коротким отображением.

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 км"

console.log(weightFormatter.format(25));
// Вывод: "25 кг"

console.log(volumeFormatter.format(3.5));
// Вывод: "3.5 л"

Каждый тип единиц использует свое стандартное сокращение. Расстояние обозначается как км, вес — как кг, а объем — как л. Эти сокращения широко известны и подходят для большинства случаев.

Короткое отображение используется по умолчанию. Если вы не укажете опцию unitDisplay, форматировщик автоматически применит короткое отображение.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer"
});

console.log(formatter.format(5));
// Вывод: "5 км"

Этот режим по умолчанию делает короткое отображение удобным, если вы хотите использовать стандартные сокращенные единицы без явного указания опции отображения.

Форматирование единиц с длинным отображением

Длинное отображение полностью прописывает название единицы. Этот формат обеспечивает максимальную ясность за счет увеличения горизонтального пространства.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "long"
});

console.log(formatter.format(5));
// Вывод: "5 километров"

console.log(formatter.format(1));
// Вывод: "1 километр"

Форматировщик автоматически обрабатывает единственное и множественное число. Одна единица отображается как "километр", а несколько единиц — как "километров". Вам не нужно вручную определять, какую форму использовать.

Вы можете форматировать различные единицы с длинным отображением, чтобы увидеть полные названия единиц.

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 миль"

console.log(weightFormatter.format(25));
// Вывод: "25 фунтов"

console.log(temperatureFormatter.format(22));
// Вывод: "22 градуса Цельсия"

Длинное отображение делает измерения максимально понятными, не требуя от пользователей интерпретации сокращений. Единицы температуры особенно выигрывают от длинного отображения, так как сокращения, такие как C и F, могут быть неоднозначными.

Пользователи, которые не знакомы с сокращениями единиц измерения, находят полные названия более доступными. Образовательный контент, официальные отчеты и интерфейсы, ориентированные на доступность, выигрывают от такой явности.

Форматирование единиц с узким отображением

Узкое отображение обеспечивает максимально компактное представление. Этот формат убирает пробелы и использует минимальные символы, чтобы сэкономить каждый символ.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilometer",
  unitDisplay: "narrow"
});

console.log(formatter.format(5));
// Вывод: "5км"

console.log(formatter.format(42));
// Вывод: "42км"

Форматировщик убирает пробел между числом и единицей измерения, создавая более компактный вывод. Это экономит горизонтальное пространство в условиях крайне ограниченных макетов.

Разные единицы измерения создают разные узкие представления в соответствии со стандартными соглашениями.

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));
// Вывод: "10км"

console.log(speedFormatter.format(60));
// Вывод: "60км/ч"

console.log(weightFormatter.format(25));
// Вывод: "25кг"

Узкое отображение лучше всего подходит, когда пространство крайне ограничено, а пользователи знакомы с контекстом измерений. Компактный формат предполагает, что пользователи могут интерпретировать единицы без явного разделения или пояснений.

Сравнение короткого, длинного и узкого отображения

Различия между тремя вариантами отображения становятся очевидными, когда вы форматируете одни и те же измерения с каждым из них.

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 км
//   Long:   1 километр
//   Narrow: 1км
// 5:
//   Short:  5 км
//   Long:   5 километров
//   Narrow: 5км
// 10:
//   Short:  10 км
//   Long:   10 километров
//   Narrow: 10км
// 42:
//   Short:  42 км
//   Long:   42 километра
//   Narrow: 42км

Короткое отображение использует 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 миль
//   Long:   10 миль
//   Narrow: 10миль
// pound:
//   Short:  25 фунтов
//   Long:   25 фунтов
//   Narrow: 25фунтов
// gallon:
//   Short:  5 гал
//   Long:   5 галлонов
//   Narrow: 5гал
// fahrenheit:
//   Short:  72°F
//   Long:   72 градусов по Фаренгейту
//   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)}`);
});

// Результат:
// 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". Во французском добавляется акцент. В японском используется совершенно другая система письма. API Intl управляет этими различиями на основе локали.

Некоторые локали по-разному обрабатывают узкое отображение.

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 км" вместо "42 километра" экономит 5 символов на каждое измерение, что суммируется при отображении нескольких значений.

Таблицы данных, отображающие измерения в столбцах, требуют одинаковой ширины. Краткие сокращения, такие как "км", "кг" и "л", помогают поддерживать управляемую ширину столбцов. Длинные единицы, такие как "километры", "килограммы" и "литры", излишне расширяют столбцы.

Научные и технические интерфейсы используют краткое отображение, так как пользователи в этих контекстах знакомы со стандартными сокращениями. Инженеры, ученые и технические специалисты ожидают, что измерения будут использовать сокращенные единицы.

Карты и визуализации используют краткое отображение, чтобы избежать загромождения интерфейса текстом. Отображение "5 км" на маркере карты более читаемо, чем "5 километров", когда пространство вокруг маркера ограничено.

Краткое отображение достигает баланса между ясностью и эффективностью. Большинство пользователей без труда распознают стандартные сокращения, такие как км, ми, кг, фунт, л и галлон.

Когда использовать полное отображение

Полное отображение лучше всего подходит, когда ясность и доступность важнее, чем экономия пространства. Этот выбор делает измерения сразу понятными без необходимости интерпретации.

Образовательный контент выигрывает от полного отображения, так как студенты могут быть не знакомы с сокращениями единиц измерения. Учебные материалы, объясняющие расстояние, вес или объем, должны писать единицы полностью, чтобы избежать путаницы.

Интерфейсы, ориентированные на доступность, выигрывают от полного отображения, так как экранные чтецы произносят полностью написанные слова более естественно. Экранный чтец, произносящий "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));
// Вывод: "42.79 километра"

console.log(formatter.format(5.1));
// Вывод: "5.1 километра"

Опция maximumFractionDigits управляет точностью десятичных знаков, а unitDisplay — форматом единиц. Эти параметры работают вместе, чтобы создать нужный формат.

Вы можете комбинировать отображение единиц с компактной нотацией для отображения больших измерений в удобочитаемом виде.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "meter",
  unitDisplay: "long",
  notation: "compact"
});

console.log(formatter.format(1500));
// Вывод: "1.5 тыс. метров"

console.log(formatter.format(2400000));
// Вывод: "2.4 млн метров"

Эта комбинация хорошо работает при отображении очень больших измерений, где важны как величина, так и единица. Научные данные, географические расстояния или астрономические измерения выигрывают от компактной нотации с полным отображением единиц.

Вы можете комбинировать отображение единиц с отображением знаков, чтобы показывать изменения или разницы в измерениях.

const formatter = new Intl.NumberFormat("en-US", {
  style: "unit",
  unit: "kilogram",
  unitDisplay: "long",
  signDisplay: "always"
});

console.log(formatter.format(2.5));
// Вывод: "+2.5 килограмма"

console.log(formatter.format(-1.8));
// Вывод: "-1.8 килограмма"

Этот формат хорошо подходит для отображения изменений веса, разницы в высоте или любых измерений, где важна направленность изменения. Явный знак в сочетании с полным отображением единиц делает изменение сразу понятным.

Что нужно помнить

Опция unitDisplay управляет тем, как единицы измерения отображаются при форматировании с помощью Intl.NumberFormat. Установите её в значение "short" для стандартных сокращений, таких как "5 км", в значение "long" для полностью написанных единиц, таких как "5 километров", или в значение "narrow" для компактных форм, таких как "5км". Если опция не указана, по умолчанию используется значение "short".

Используйте короткий формат для приложений общего назначения, где важна экономия пространства, а пользователи понимают стандартные сокращения. Используйте длинный формат, когда ясность и доступность важнее экономии пространства или когда пользователи могут быть незнакомы с сокращениями. Используйте узкий формат только в условиях крайней нехватки пространства, где пользователи хорошо знакомы с областью измерений.

Форматировщик автоматически обрабатывает вариации, зависящие от локали, включая разные сокращения, названия единиц, правила расстановки пробелов и формы множественного числа. Комбинируйте unitDisplay с другими опциями форматирования, такими как количество десятичных знаков, компактная нотация и отображение знаков, чтобы создать точный формат измерений, необходимый вашему приложению.