Правильная смена языка в moment.js: с английского на немецкий

Быстрый ответ

Для смены локали в библиотеке Moment.js используйте метод locale(), в который необходимо передать код языка.

Произведите смену локали для всех экземпляров:

moment.locale('fr'); // В принципе, теперь все на французском!

Если же нужно задать локаль для конкретного экземпляра даты:

let localDate = moment().locale('ja'); // Повстречаемся с датой на японском!

А так можно отобразить дату в выбранной локали:

console.log(moment().format('LLLL')); // Здравствуй, дата-сан!

Учтите: начиная с версии 2.8., метод locale() заменил устаревший lang(). Перед его использованием убедитесь, что файл локали (например, 'moment/locale/fr') был импортирован.

Основные аспекты интернационализации

Использование встроенных локалей

В Moment.js доступно более 130 локалей "из коробки". Для доступа ко всем из них, подключите moment-with-locales.min.js. Это в своем роде добавление в ваш проект всей ООН.

<script src="путь/moment-with-locales.min.js"></script>

Подробнее об этом расскажет наш спикер на видео

Установка языка для всех будущих моментов

Вы можете установить язык глобально для всех экземпляров:

moment.locale('it'); // Теперь каждый новый экземпляр Moment.js будет разговаривать на итальянском

Установка локали через locale() в контексте экземпляра влияет только на него. Если локаль не задана явно, настройки по умолчанию изменяются глобально.

Получение локализованной даты/времени

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

console.log(localDate.format('LLLL')); // Вуаля, локализованная дата приветствует вас на своем родном языке

Отображение относительного времени на разных языках

Если нужно отобразить относительное время, Moment.js с удовольствием поможет с это, отображая в соответствии с выбранной локалью:

console.log(localDate.fromNow()); // Сколько прошло времени? Ответ зависит от местных традиций

Установка локалей в React

В таких компонентных фреймворках, как React, локали обычно устанавливаются в хуках useEffect() или методе componentDidMount():

// Moment.js говорит и на немецком!
useEffect(() => { moment.locale('de'); }, []);

Применение локализации на практике

Минимизация размера пакета

Импортируйте только те локали, которые реально нужны, чтобы сократить объем вашего приложения.

Обращение с устаревшими методами

В Moment.js метод lang() был заменен на locale() — его мы и используем в настоящее время.

Использование Bower для оптимизации

Если в вашем проекте по прежнему используется Bower:

bower install moment --save

Проверка поддержки локалей в плагинах

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

Визуализация

Представьте себе полиглота-кулинара, который может перевести любой рецепт (или объект времени) на любой запрашиваемый гость язык:

С Moment.js в качестве вашего персонального переводчика, вы способны подавать блюдо на любом мировом языке:

moment.locale('es'); // Вуаля! Паэлья подана, на испанском.

Теперь вы мастер многоязычной подачи времени и даты, зная более 130 языков!

Полезные материалы

1. Moment.js | Документация — официальная документация по интернационализации в библиотеке Moment.js.
2. Moment.js | Руководства — подробное руководство по работе с методом locale.
3. npm – moment — npm-пакет, включающий Moment.js, необходимый для использования локализации.
4. Шпаргалка по Moment.js — удобный гид по методам локализации в Moment.js.
5. moment.js в cdnjs — ресурс для подключения moment-with-locales.js, упрощая работу с форматами дат.
6. GitHub – moment/moment — официальный репозиторий библиотеки Moment.js на GitHub, где можно найти файлы локалей.