Манипуляция датами с использованием объекта Date в JavaScript

Введение

В этом лабе участники изучат мощный объект JavaScript Date и освоят важные методы манипуляции датами и временем. С помощью комплексного практического подхода студенты узнают, как создавать объекты Date с использованием различных методов инициализации, получать конкретные компоненты даты, форматировать и отображать информацию о дате, модифицировать даты с использованием методов установки и выполнять сложные вычисления с датами.

Лаб предоставляет практическое пошаговое руководство по работе с датами в JavaScript, охватывая такие базовые навыки, как создание объектов Date из текущего времени, конкретных временных меток, строк дат и миллисекунд с момента Unix Epoch. В конце этого лабу участники получат твердый понимание методов манипуляции датами, что позволит им эффективно обрабатывать задачи, связанные с датами, в своих приложениях на JavaScript.

Создайте новый объект Date

В этом шаге вы узнаете, как создавать новые объекты Date в JavaScript, что является фундаментом для работы с датами и временем. Объект JavaScript Date позволяет легко работать с датами и временем.

Сначала откройте WebIDE и создайте новый файл JavaScript под названием dates.js в каталоге ~/project.

Создайте новый объект Date с разными методами инициализации:

// Создайте объект Date, представляющий текущую дату и время
let currentDate = new Date();
console.log("Текущая дата:", currentDate);

// Создайте объект Date с конкретной датой и временем
let specificDate = new Date(2023, 5, 15, 10, 30, 0);
console.log("Конкретная дата:", specificDate);

// Создайте объект Date из строки даты
let stringDate = new Date("2023-06-15");
console.log("Дата из строки:", stringDate);

// Создайте объект Date, используя миллисекунды с момента Unix Epoch
let millisecondDate = new Date(1686816000000);
console.log("Дата из миллисекунд:", millisecondDate);

Пример вывода:

Текущая дата: Чт, 15 июн 2023 12:00:00 GMT+0000 (Всемирное координированное время)
Конкретная дата: Чт, 15 июн 2023 10:30:00 GMT+0000 (Всемирное координированное время)
Дата из строки: Чт, 15 июн 2023 00:00:00 GMT+0000 (Всемирное координированное время)
Дата из миллисекунд: Чт, 15 июн 2023 00:00:00 GMT+0000 (Всемирное координированное время)

Основные моменты, которые нужно запомнить:

• new Date() создает объект Date с текущей датой и временем
• new Date(year, month, day, hours, minutes, seconds) позволяет создать конкретную дату
• Месяцы нумеруются с нуля (0-11), поэтому июнь представляется числом 5
• Вы можете создавать даты из строк или миллисекунд с момента Unix Epoch (1 января 1970)

Извлеките компоненты текущей даты

В этом шаге вы узнаете, как извлекать конкретные компоненты из объекта Date. Продолжая с предыдущего шага, мы будем использовать файл dates.js для демонстрации различных методов извлечения компонентов даты и времени.

Откройте файл ~/project/dates.js и добавьте следующий код:

// Создайте объект текущей даты
let currentDate = new Date();

// Извлеките отдельные компоненты даты
let year = currentDate.getFullYear();
let month = currentDate.getMonth(); // 0-11 (0 = январь)
let day = currentDate.getDate(); // День месяца
let hours = currentDate.getHours();
let minutes = currentDate.getMinutes();
let seconds = currentDate.getSeconds();
let milliseconds = currentDate.getMilliseconds();

// Отобразите отдельные компоненты
console.log("Год:", year);
console.log("Месяц:", month + 1); // Добавьте 1, чтобы показать фактический номер месяца
console.log("День месяца:", day);
console.log("Часы:", hours);
console.log("Минуты:", minutes);
console.log("Секунды:", seconds);
console.log("Миллисекунды:", milliseconds);

// Получите день недели
let dayOfWeek = currentDate.getDay(); // 0-6 (0 = воскресенье)
console.log("День недели:", dayOfWeek);

// Получите временную метку (миллисекунды с момента Unix Epoch)
let timestamp = currentDate.getTime();
console.log("Временная метка:", timestamp);

Пример вывода:

Год: 2023
Месяц: 6
День месяца: 15
Часы: 12
Минуты: 30
Секунды: 45
Миллисекунды: 123
День недели: 4
Временная метка: 1686816045123

Основные моменты, которые нужно запомнить:

• getFullYear() возвращает четырехзначный год
• getMonth() возвращает 0-11, поэтому добавьте 1, чтобы получить фактический номер месяца
• getDate() возвращает день месяца (1-31)
• getDay() возвращает день недели (0-6)
• getTime() возвращает миллисекунды с 1 января 1970

Форматирование и отображение информации о дате

В этом шаге вы узнаете различные методы форматирования и отображения информации о дате в JavaScript. Откройте файл ~/project/dates.js и добавьте следующий код, чтобы изучить разные методы форматирования:

// Создайте объект текущей даты
let currentDate = new Date();

// Метод 1: Использование toLocaleDateString()
let localeDateString = currentDate.toLocaleDateString();
console.log("Местная строка даты:", localeDateString);

// Метод 2: Использование toDateString()
let dateString = currentDate.toDateString();
console.log("Строка даты:", dateString);

// Метод 3: Использование toLocaleString()
let localeString = currentDate.toLocaleString();
console.log("Местная строка:", localeString);

// Метод 4: Настраиваемое форматирование
let customFormat =
  `${currentDate.getFullYear()}-` +
  `${(currentDate.getMonth() + 1).toString().padStart(2, "0")}-` +
  `${currentDate.getDate().toString().padStart(2, "0")}`;
console.log("Настраиваемый формат:", customFormat);

// Метод 5: API по интернационализации
let options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
};
let intlFormat = currentDate.toLocaleDateString("en-US", options);
console.log("Интернационализированный формат:", intlFormat);

Пример вывода:

Местная строка даты: 6/15/2023
Строка даты: Чт, 15 июн 2023
Местная строка: 6/15/2023, 12:30:45 PM
Настраиваемый формат: 2023-06-15
Интернационализированный формат: Thursday, June 15, 2023

Основные моменты, которые нужно запомнить:

• toLocaleDateString() предоставляет локализованное представление даты
• toDateString() дает человекочитаемую строку даты
• toLocaleString() включает как дату, так и время
• Настраиваемое форматирование позволяет точно контролировать отображение даты
• API по интернационализации предлагает расширенные варианты локализации

Изменение даты с использованием методов установки

В этом шаге вы узнаете, как изменять компоненты даты с использованием методов установки даты в JavaScript. Откройте файл ~/project/dates.js и добавьте следующий код, чтобы изучить разные способы изменения значений дат:

// Создайте новый объект Date
let modifiableDate = new Date();
console.log("Оригинальная дата:", modifiableDate);

// Установите конкретный год
modifiableDate.setFullYear(2024);
console.log("После установки года:", modifiableDate);

// Установите месяц (0-11, поэтому 5 представляет июнь)
modifiableDate.setMonth(5);
console.log("После установки месяца:", modifiableDate);

// Установите день месяца
modifiableDate.setDate(15);
console.log("После установки дня:", modifiableDate);

// Установите часы (0-23)
modifiableDate.setHours(14);
console.log("После установки часов:", modifiableDate);

// Установите минуты (0-59)
modifiableDate.setMinutes(30);
console.log("После установки минут:", modifiableDate);

// Установите секунды (0-59)
modifiableDate.setSeconds(45);
console.log("После установки секунд:", modifiableDate);

// Цепочка вызовов методов установки
let customDate = new Date();
customDate.setFullYear(2025).setMonth(11).setDate(31);
console.log("Настраиваемая дата:", customDate);

Пример вывода:

Оригинальная дата: Чт, 15 июн 2023 12:30:45 GMT+0000
После установки года: Чт, 15 июн 2024 12:30:45 GMT+0000
После установки месяца: Чт, 15 июн 2024 12:30:45 GMT+0000
После установки дня: Сб, 15 июн 2024 12:30:45 GMT+0000
После установки часов: Сб, 15 июн 2024 14:30:45 GMT+0000
После установки минут: Сб, 15 июн 2024 14:30:45 GMT+0000
После установки секунд: Сб, 15 июн 2024 14:30:45 GMT+0000
Настраиваемая дата: Ср, 31 дек 2025 00:00:00 GMT+0000

Основные моменты, которые нужно запомнить:

• Методы установки позволяют точно изменять компоненты даты
• Месяцы нумеруются с нуля (0-11)
• Часы используют 24-часовой формат (0-23)
• Методы установки изменяют исходный объект Date
• Вы можете использовать цепочку вызовов некоторых методов установки для удобства

Выполнение вычислений с датами

В этом шаге вы узнаете, как выполнять различные вычисления с датами с использованием методов объекта Date в JavaScript. Откройте файл ~/project/dates.js и добавьте следующий код, чтобы изучить разные методы манипуляции с датами:

// Создайте объекты дат для вычислений
let currentDate = new Date();
let futureDate = new Date(currentDate.getTime());

// Добавьте дни к дате
futureDate.setDate(currentDate.getDate() + 30);
console.log("Текущая дата:", currentDate);
console.log("30 дней отныне:", futureDate);

// Вычислите разницу между датами
let differenceInMilliseconds = futureDate.getTime() - currentDate.getTime();
let differenceInDays = Math.floor(
  differenceInMilliseconds / (1000 * 60 * 60 * 24)
);
console.log("Дни между датами:", differenceInDays);

// Вычислите возраст или прошедшее время
let birthDate = new Date("1990-01-01");
let ageInMilliseconds = currentDate.getTime() - birthDate.getTime();
let ageInYears = Math.floor(ageInMilliseconds / (1000 * 60 * 60 * 24 * 365.25));
console.log("Вычисленный возраст:", ageInYears);

// Найдите последний день текущего месяца
let lastDayOfMonth = new Date(
  currentDate.getFullYear(),
  currentDate.getMonth() + 1,
  0
);
console.log("Последний день текущего месяца:", lastDayOfMonth);

// Проверьте, является ли год високосным
function isLeapYear(year) {
  return new Date(year, 1, 29).getMonth() === 1;
}
console.log("2024 год високосный?", isLeapYear(2024));

Пример вывода:

Текущая дата: Чт, 15 июн 2023 12:30:45 GMT+0000
30 дней отныне: Сб, 15 июл 2023 12:30:45 GMT+0000
Дни между датами: 30
Вычисленный возраст: 33
Последний день текущего месяца: Ср, 30 июн 2023 00:00:00 GMT+0000
2024 год високосный? true

Основные моменты, которые нужно запомнить:

• Используйте getTime(), чтобы получить миллисекунды для вычислений
• Преобразуйте миллисекунды в дни, поделив соответствующим образом
• Вы можете добавить или вычесть дни с использованием setDate()
• Вычислите возраст или разницу во времени между датами
• Проверьте високосные года, проверив 29 февраля

Резюме

В этом лабораторном задании участники узнали, как манипулировать датами с использованием объекта Date в JavaScript, проведя комплексное исследование методов создания, извлечения и манипуляции с датами. В лабораторном задании были рассмотрены различные способы инициализации объектов Date, включая создание дат, представляющих текущий момент времени, указание точных дат с параметрами, разбор дат из строк и генерацию дат из временных меток в миллисекундах.

Практические упражнения продемонстрировали ключевые навыки обработки дат в JavaScript, такие как извлечение конкретных компонентов даты, форматирование информации о дате, применение методов установки для изменения дат и выполнение вычислений с датами. Участники приобрели практический опыт работы с нумерованными с нуля представлениями месяцев, поняли различные стратегии инициализации объектов Date и научились эффективно использовать встроенные методы JavaScript для работы с временными данными в различных сценариях программирования.