Все приложения так или иначе используют даты. И одна из распространенных операций с датой — отобразить ее в удобочитаемом формате.
Чтобы сделать его читабельным и понятным, нам нужно локализовать строки даты. А вместе с локализацией и привычные пользователю форматы.
Существует так много библиотек, позволяющих легко работать с локализацией или интернационализацией ( i18n) объектов даты. Некоторые из этих библиотек:
Но вам может не понадобиться ни одна из этих библиотек для базового форматирования и локализации объектов даты.
Вы можете использовать Date.prototype.toLocaleString
и его настраиваемый API, чтобы легко получить локализованный вывод. Как и в следующем примере, мы будем использовать Locale String, чтобы легко получить читаемую дату, желаемую пользователем:
const date = new Date() // Date from current timestamp console.log(+date, date); /* 👆 1581422692394 Tue Feb 11 2020 13:04:52 GMT+0100 (Central European Standard Time) */ // For above date, let's see different locales console.log( 'For USA Users: ', date.toLocaleString('en-US')) // 👆 For USA based Users: 2/11/2020, 1:04:52 PM console.log( 'For UK Users: ', date.toLocaleString('en-GB')) // 👆 For UK based Users: 11/02/2020, 13:04:52 console.log( 'For DE Users: ', date.toLocaleString('de-DE')) // 👆 For DE based Users: 11.2.2020, 13:04:52
Но это не так; вы видели только основные операции.
Эта функция также принимает второй параметр как объект JavaScript. Вы можете настроить результат `toLocaleString`, добавив некоторые определенные ключи и связанные значения в этот объект JS. Например, вы можете удалить будний день; изменить отображение месяца и т. д.
Давайте посмотрим на некоторые примеры дополнительной настройки вывода со вторым параметром.
const date = new Date() // Date from current timestamp console.log(+date, date); /* 👆 1581422692394 Tue Feb 11 2020 13:04:52 GMT+0100 (Central European Standard Time) */ const readableDate = date.toLocaleString('de-DE', { day: "2-digit", month: "long", year: "2-digit" }); // 👆 "11. Februar 20" /* year: "numeric" → "11. Februar 2020" month: "numeric" → "11.2.20" month: "2-digit" → "11.02.20" month: "short" → "11. Feb. 20" month: "narrow" → "11. F 20" */
Сигнатура объекта для настройки вывода функции toLocaleString может иметь следующие ключи. Хотя ключей намного больше, я перечисляю здесь только самые распространенные.
- Стиль даты:
[ 'full', 'long', 'medium', 'short' ]
- Стиль времени:
[ 'full', 'long', 'medium', 'short' ]
- timeZone: Time Some из Базы данных IANA TimeZone
- месяц:
[ 'numeric', '2-digit', 'long', 'short', 'narrow' ]
- год:
[ 'numeric', '2-digit' ]
- день недели:
[ 'long', 'short', 'narrow' ]
- день, час, минута и секунда:
[ 'numeric', '2-digit' ]
- timeZooneName:
[ 'long', 'short' ]
На что следует обратить внимание
Здесь есть на что обратить внимание:
- Любое числовое значение имеет эти два значения:
numeric
и2-digit
- И строковые значения из
full
,long
,medium
,short
иnarrow
- Все с возможным односимвольным сокращением может иметь значение
narrow
.
Еще одна важная вещь, на которую следует обратить внимание, это:
вам не нужно придерживаться определенного часового пояса, если вам нужен желаемый результат.
Для.
в качестве разделителя используйтеde-DE
; для/
в качестве разделителя используйтеen-GB
и т. д.
Подробнее об этой функции можно прочитать в Документации MDN toLocaleString.
Специальные функции
Подобно приведенной выше функции toLocaleString
; есть точно такие же функции только для даты или времени. Следовательно, вам не нужно выполнять какую-либо строковую операцию для разделения даты и времени.
Только для выходных данных Date вы можете использовать date.toLocaleDateString
const readableDate = date.toLocaleDateString('de-DE', { day: "2-digit", month: "long", year: "2-digit" }); console.log(readableDate); // 👆 11. Februar 20
Подробнее об этой функции можно прочитать в Документации MDN toLocaleDateString.
Время
Если вам нужны только строки времени, вы можете использовать date.toLocaleTimeString
const readableTime = date.toLocaleTimeString('de-DE', { hour: "2-digit", minute: "2-digit", second: "2-digit" }); console.log(readableTime); // 👆 13:04:52
Подробнее об этой функции можно прочитать в Документации MDN toLocaleString.
Вывод
Даты — очень важная информация для отображения в любом приложении. Приложения, которые так же просты, как ToDo или этот блог. Даты также являются сложными объектами.
Но вам не нужны тяжелые библиотеки все время. Этот пост дает краткое представление о том, как добиться желаемого форматирования объектов даты.
Что вы используете для манипулирования объектом Date?
Дайте мне знать в комментариях 💬 или в Твиттере на @patelpankaj и @time2hack
Если вы нашли эту статью полезной, пожалуйста, поделитесь ею с другими 🗣
Подпишитесь на блог, чтобы получать новые статьи прямо на почту.
Кредиты
Фото автора Charles Deluvio на Unsplash
Первоначально опубликовано на https://time2hack.com 18 февраля 2020 г.