Правильная смена языка в 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.js в качестве вашего персонального переводчика, вы способны подавать блюдо на любом мировом языке:
moment.locale('es'); // Вуаля! Паэлья подана, на испанском.
Теперь вы мастер многоязычной подачи времени и даты, зная более 130 языков!
Полезные материалы
- Moment.js | Документация — официальная документация по интернационализации в библиотеке Moment.js.
- Moment.js | Руководства — подробное руководство по работе с методом
locale
. - npm – moment — npm-пакет, включающий Moment.js, необходимый для использования локализации.
- Шпаргалка по Moment.js — удобный гид по методам локализации в Moment.js.
- moment.js в cdnjs — ресурс для подключения moment-with-locales.js, упрощая работу с форматами дат.
- GitHub – moment/moment — официальный репозиторий библиотеки Moment.js на GitHub, где можно найти файлы локалей.