Пользователи ожидают увидеть числа и даты в знакомом формате.

Например, в американском английском валюта имеет формат 100.00. На немецком и многих других языках он имеет формат 100,00.

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

К сожалению, интернационализация имеет тенденцию подталкиваться к другим приоритетам. Я сам допустил эту ошибку, когда переписывал биржевой тикер для нашего сайта Markets Insider, и узнал об этом только тогда, когда наши коллеги в Германии указали на мою ошибку.

Этот обмен был примерно таким:

Я: «Мы рассмотрели эту проблему с выравниванием и не можем ее воспроизвести».
Они: «Я могу воспроизвести ее в рабочей среде прямо сейчас. ”
Я: “Смотрю на производство, не вижу в этом ничего плохого”.
Они: “Вы смотрите по-немецки?»
Я: «Ну, нет. Я не умею читать по-немецки».

Ошибки случаются, но пока мы учимся и помогаем другим, мы можем расти на них.

Интернационализация должна быть по умолчанию

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

Благодаря достижениям в современных веб-браузерах мы можем быстро сделать это.

Давайте посмотрим, как мы можем отформатировать число, например валюту, с помощью встроенного API браузера.

Получите язык пользователя с помощью Navigator API

Navigator API имеет гораздо больше возможностей, чем просто получение предпочтительного языка; вот ссылка, чтобы узнать больше об этом на MDN.

const language = navigator.language; // us-eng

Используйте предпочитаемый язык для форматирования строки

const language = navigator.language; // us-eng
const relativeValue = 100000;
const relativeString = relativeValue.toLocaleString(language);
console.log(relativeString) // 100,000

Дополнительные параметры конфигурации

С toLocaleString у нас также есть некоторые дополнительные конфигурации.

При форматировании валюты или чего-либо с десятичными знаками мы можем передать maximumFractionDigits, чтобы указать, сколько цифр отображать, или minimumFractionDigits, чтобы принудительно использовать десятичную дробь даже при работе с целым числом.

const language = navigator.language; // us-eng
const relativeValue = 100000.98332;
const relativeString = relativeValue.toLocaleString( language, { maximumFractionDigits: 2 });
console.log(relativeString) // 100,000.98

Собираем все вместе

Подводя итог, мы узнали, как форматировать строки в зависимости от языка пользователя:

  • Получение языка пользователя
  • Передача своего языка toLocaleString
  • Использование форматированной строки