Пользователи ожидают увидеть числа и даты в знакомом формате.
Например, в американском английском валюта имеет формат 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
- Использование форматированной строки