Форматирование даты с помощью класса Date в JavaScript
Класс Date
в JavaScript используется для работы с датами и временем. Он предоставляет множество методов для удобной работы с датами и временем, а также с возможностью получения и установки компонентов даты, таких как год, месяц, день, часы, минуты и секунды. В этой статье мы рассмотрим основные методы и свойства класса Date
в JavaScript.
Создание экземпляра Date в JavaScript
Чтобы создать экземпляр класса Date, можно использовать один из следующих способов:
const now = new Date(); // текущая дата и время
const date = new Date('2023-03-12'); // дата из строки
const time = new Date(2023, 2, 12, 14, 30, 0); // год, месяц, день, часы, минуты, секунды
Методы и свойства Date в JavaScript
Свойства класса Date позволяют получать компоненты даты:
getFullYear()
- год (4 цифры)getMonth()
- месяц (0-11)getDate()
- день месяца (1-31)getDay()
- день недели (0-6)getHours()
- часы (0-23)getMinutes()
- минуты (0-59)getSeconds()
- секунды (0-59)getMilliseconds()
- миллисекунды (0-999)getTime()
- количество миллисекунд с 1 января 1970 года UTC
Примеры:
const date = new Date();
const day = date.getDate(); // возвращает текущий день месяца
const year = date.getFullYear(); // возвращает текущий год
const hour = date.getHours(); // возвращает текущий час
const time = date.getTime(); // возвращает количество миллисекунд
Класс Date предоставляет также множество методов для работы с датами и временем:
toString()
- возвращает строковое представление даты и времениtoDateString()
- возвращает строковое представление датыtoTimeString()
- возвращает строковое представление времениtoLocaleString()
- возвращает локализованную строку с датой и временемtoLocaleDateString()
- возвращает локализованную строку с датойtoLocaleTimeString()
- возвращает локализованную строку со временемtoISOString()
- возвращает строку в формате ISO 8601valueOf()
- возвращает количество миллисекунд с 1 января 1970 года UTCgetTimezoneOffset()
- возвращает разницу в минутах между местным и стандартным временем- setDate(day) - устанавливает день месяца (1-31)
setFullYear(year, month, day)
- устанавливает год (например, 2022), месяц (0-11) и день (1-31)setHours(hour, min, sec, ms)
- устанавливает час (0-23), минуту (0-59), секунду (0-59) и миллисекунду (0-999)setMilliseconds(ms)
- устанавливает миллисекунды (0-999)setMinutes(min, sec, ms)
- устанавливает минуты (0-59), секунды (0-59) и миллисекунды (0-999)setMonth(month, day)
- устанавливает месяц (0-11) и день (1-31)setSeconds(sec, ms)
- устанавливает секунды (0-59) и миллисекунды (0-999)
Примеры:
const date = new Date();
date.setFullYear(2022, 3, 15); // устанавливает год 2022, месяц апрель (3), день 15
date.setHours(10, 30, 0, 0); // устанавливает время 10:30:00
date.setMilliseconds(500); // устанавливает 500 миллисекунд
date.setMonth(5, 10); // устанавливает месяц и день (июнь 10)
date.setSeconds(15, 250); // устанавливает секунды 15 и 250 миллисекунд
Получение текущей метки времени в JavaScript
Метод now()
в классе Date в JavaScript возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC. Это время также называется "Эпохой Unix" и используется для определения точного момента времени во всем мире.
Метод now()
не принимает никаких аргументов и возвращает текущее время на момент вызова в виде числа. Обычно результат метода now()
используется для создания нового объекта Date:
const now = Date.now(); // текущее время в миллисекундах
console.log(now); // 1679122786889
const currentDate = new Date(now); // // создание нового объекта Date
console.log(currentDate); // Mar 18 2023 09:59:38 GMT+0300 (Москва, стандартное время)
Метод now()
также может использоваться для измерения производительности кода в JavaScript, путем сохранения времени до и после выполнения блока кода и нахождения разницы между ними:
const startTime = Date.now();
// Блок кода, который нужно измерить
const endTime = Date.now();
const timeDiff = endTime - startTime;
console.log(`Время выполнения блока кода: ${timeDiff} миллисекунд`);
Форматирование Date в JavaScript
Рассмотрим пример форматирования текущей даты на двух языках:
const currentDate = new Date();
const options = {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
timeZoneName: 'long'
}
console.log(currentDate.toLocaleDateString('ru-RU', options));
// 18.03.2023, 9:53:39 Москва, стандартное время
console.log(currentDate.toLocaleDateString('en-US', options));
// 3/18/2023, 9:53:39 AM Moscow Standard Time
Мы можем передать и уже прошедшие даты:
const currentDate = new Date('December 23, 2022 10:00:00');
const options = {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
timeZoneName: 'long'
}
console.log(currentDate.toLocaleDateString('ru-RU', options));
// 23.12.2022, 10:00:00 Москва, стандартное время
console.log(currentDate.toLocaleDateString('en-US', options));
// 12/23/2022, 10:00:00 AM Moscow Standard Time
Форматирование даты на React.js / Next.js с помощью Date
Класс Date
в JavaScript может быть полезен при работе с метками времени на фронтенде. Давайте рассмотрим пример использования класса Date
как хук в React с useEffect
для обработки метки времени с бекенда на фронтенде.
Предположим, у нас есть REST API, которое возвращает метку времени в формате ISO 8601 (например, "2023-03-14T10:15:30Z
"), и мы хотим отобразить эту дату на странице в удобном формате для пользователя.
Мы можем использовать класс Date в React-хуке useEffect
для обработки этой метки времени и установки отформатированного значения в состояние компонента. Вот пример:
import React, { useState, useEffect } from 'react';
function App() {
const [date, setDate] = useState('');
useEffect(() => {
const fetchDate = async () => {
const response = await fetch('/api/date');
const data = await response.json();
const isoDate = data.date; // метка времени в формате ISO 8601
const formattedDate = new Date(isoDate).toLocaleString('ru-RU', {
day: 'numeric',
month: 'long',
year: 'numeric',
hour: 'numeric',
minute: 'numeric',
second: 'numeric'
});
setDate(formattedDate);
};
fetchDate();
}, []);
return (
<div>
<h1>Текущая дата и время:</h1>
<p>{date}</p>
</div>
);
}
export default App;
Здесь мы используем хук useEffect
, чтобы получить данные из нашего **REST API **и обработать метку времени, используя класс Date
. Мы форматируем дату и время, используя метод toLocaleString()
, который возвращает дату и время в удобном для пользователя формате.
Мы затем устанавливаем отформатированное значение в состояние компонента с помощью функции setDate()
. Когда компонент рендерится, мы отображаем значение состояния компонента в разметке страницы.
Таким образом, использование класса Date в React-хуке useEffect
позволяет нам легко обрабатывать метки времени на фронтенде и отображать их в удобном формате для пользователя.