Как реализовать интернационализацию (i18n) в JavaScript

Далее я использую Globalize, чтобы переписать два фрагмента, перечисленных в предыдущем разделе.

Форматирование даты

Первый пример может быть реализован, как показано ниже:

 npm install globalize cldr-data --save

Несмотря на свою простоту, приведенный выше код позволяет мне охватить несколько тем. Первое, что показалось мне немного странным, когда я впервые играл в Globalize, это то, что некоторые языковые коды, используемые данными CLDR, используют только две буквы. Для обеспечения согласованности я ожидал, что во всех регионах потребуется полная версия стандарта ISO 3166 (например, «it-IT» и «en-US») вместо короткой версии (например, «it» и «en»). Хотя итальянский язык по умолчанию считается законным (итальянский язык все-таки возник в Италии), для английского это было непонятно. Фактически, «en» представляет американский английский, а не британский английский. Если вы хотите быть уверенным, что не совершите ту же ошибку, что и я, я предлагаю вам взглянуть на эту таблицу .

Другая концепция, которую стоит обрисовать в общих чертах, — метод // Include the Globalize library
var Globalize = require('globalize');

// "30/06/2016"
console.log(Globalize('en-GB').formatDate(date));
Это загружает все файлы, которые содержат дополнительную информацию для страны или ее региональных данных. Например, телефонный код страны (39 для Италии), население, некоторые известные сокращения, как пишется валюта других стран и многое другое.

Последний момент, который я хочу охватить, — это четвертое утверждение, в котором я entireSupplementalentireMainFor Это позволяет загружать данные локали для нужных стран (в приведенном выше примере Италия, США и Великобритания).

Форматирование числа

Для форматирования числа Globalize предоставляет метод formatNumber Подпись метода

 formatNumber(value[, options])

где valueoptions Некоторые примеры опций, которые вы можете указать:

• round Его значение может быть любым из следующих: ceilfloorroundtruncate
• useGrouping
• minimumIntegerDigits

Полный список доступных опций можно найти в документации .

Теперь, когда мы узнали больше о методе formatNumber

 // Include the Globalize library
var Globalize = require('globalize');

// Include the CLDR data
var cldrData = require('cldr-data');

// Loads the supplemental data
Globalize.load(cldrData.entireSupplemental());

// Loads the data of the specified locales
Globalize.load(cldrData.entireMainFor('it', 'en', 'en-GB'));

var number = 1302.93;

// "1.302,93"
console.log(Globalize('it').formatNumber(number));

// "1,302.93"
console.log(Globalize('en').formatNumber(number));

// "1,302.93"
console.log(Globalize('en-GB').formatNumber(number));

Форматирование валютных значений

Библиотека предоставляет метод currencyFormatter Этот метод поддерживает множество опций, которые позволяют вам определить, хотите ли вы округлить число, хотите ли вы использовать символ валюты (например, «$») или ее код (например, «USD»), и многое другое.

Пример использования currencyFormatter()

 // Include the Globalize library
var Globalize = require('globalize');

// Include the CLDR data
var cldrData = require('cldr-data');

// Loads the supplemental data
Globalize.load(cldrData.entireSupplemental());

// Loads the data of the specified locales
Globalize.load(cldrData.entireMainFor('en'));

var enGlobalize = Globalize('en');

var value = 229.431;

var usdFormatter = enGlobalize.currencyFormatter('USD');
// "$229.43"
console.log(usdFormatter(value));

var eurFormatter = enGlobalize.currencyFormatter('EUR', {
  style: 'code',
  round: 'ceil'
});
// "229.44 EUR"
console.log(eurFormatter(value));

Разбор чисел

Парсинг чисел также может быть задачей, которую вы должны выполнить, возможно, при работе с пользовательским вводом. Следующие примеры демонстрируют, как это сделать:

 // Include the Globalize library
var Globalize = require('globalize');

// Include the CLDR data
var cldrData = require('cldr-data');

// Loads the supplemental data
Globalize.load(cldrData.entireSupplemental());

// Loads the data of the specified locales
Globalize.load(cldrData.entireMainFor('en'));

// Set default locale
var enGlobalize = Globalize('en');

var numberParser = enGlobalize.numberParser();
// "229.431"
console.log(numberParser('229,431.00'));

var percentParser = enGlobalize.numberParser({style: 'percent'});
// "0.5341"
console.log(percentParser('53.41%'));

Форматирование относительных дат

Еще одна очень распространенная функция в современных веб-приложениях — отображать время и даты в относительном выражении. Например, вместо того, чтобы показывать полную дату дня, вы обычно найдете ярлыки, такие как «вчера» и «последняя неделя». Достичь этой задачи с помощью Globalize легко благодаря методу relativeTimeFormatter Пример использования показан ниже:

 // Include the Globalize library
var Globalize = require('globalize');

// Include the CLDR data
var cldrData = require('cldr-data');

// Loads the supplemental data
Globalize.load(cldrData.entireSupplemental());

// Loads the data of the specified locales
Globalize.load(cldrData.entireMainFor('en'));

// Set default locale
var enGlobalize = Globalize('en');

var dayFormatter = enGlobalize.relativeTimeFormatter('day');
// "yesterday"
console.log(dayFormatter(-1));

var yearFormatter = enGlobalize.relativeTimeFormatter('year');
// "next year"
console.log(yearFormatter(1));

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

Вывод

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

Во второй части статьи я познакомил вас с Globalize, библиотекой JavaScript для интернационализации и локализации, разработанной командой jQuery. Библиотека очень мощная и поставляется со всеми методами, которые могут вам понадобиться для интернационализации вашего проекта, например: методы для анализа чисел, форматирования дат и форматирования валютных значений. Если вы считаете, что библиотека сэкономила ваше время, не стесняйтесь возвращать что-то, внося свой вклад в проект.

Еще раз хочу напомнить, что все фрагменты, демонстрируемые в этой статье, можно найти в нашем репозитории GitHub .