JavaRush /Курси /Frontend SELF UA /Date. Форматування дат і чисел

Date. Форматування дат і чисел

Frontend SELF UA
Рівень 37 , Лекція 1
Відкрита

2.1 Об'єкт Date

Робота з датами і числами — важлива частина розробки веб-додатків. JavaScript надає вбудовані об'єкти та методи для маніпулювання датами і числами. У цій лекції ми розглянемо об'єкт Date, його методи і способи форматування дат і чисел.

Об'єкт Date в JavaScript представляє дату і час. У нього є багато методів для роботи з датами, включаючи отримання поточної дати і часу, встановлення дати і часу, а також форматування.

Створення об'єкта Date

Важливо!
Якщо ви створюєте об'єкт Date() без параметрів, він буде містити поточну дату і час — момент свого створення.

Створити об'єкт Date можна кількома способами.

1. Поточна дата і час:

JavaScript
    
      const now = new Date();

      console.log(now); // Виводить поточну дату і час
    
  

2. Встановлення певної дати і часу:

JavaScript
    
      const specificDate = new Date('2024-07-07T10:00:00');

      console.log(specificDate); // Виводить дату 7 липня 2024 року
    
  

3. Встановлення дати і часу за допомогою числових значень:

JavaScript
    
      const anotherDate = new Date(2024, 6, 7, 10, 0, 0);

      console.log(anotherDate); // Виводить дату 7 липня 2024 року
    
  

2.2 Методи об'єкта Date()

Отримання компонентів дати:

  • getFullYear(): отримати рік (чотири цифри)
  • getMonth(): отримати місяць (від 0 до 11)
  • getDate(): отримати день місяця (від 1 до 31)
  • getHours(): отримати години (від 0 до 23)
  • getMinutes(): отримати хвилини (від 0 до 59)
  • getSeconds(): отримати секунди (від 0 до 59)

Приклад:

JavaScript
    
      const now = new Date();

      console.log(now.getFullYear()); // Поточний рік
      console.log(now.getMonth()); // Поточний місяць (-1)
      console.log(now.getDate()); // Поточний день
      console.log(now.getHours()); // Поточна година
      console.log(now.getMinutes()); // Поточна хвилина
      console.log(now.getSeconds()); // Поточна секунда
    
  

Встановлення компонентів дати:

  • setFullYear(year): встановити рік
  • setMonth(month): встановити місяць
  • setDate(day): встановити день місяця
  • setHours(hours): встановити години
  • setMinutes(minutes): встановити хвилини
  • setSeconds(seconds): встановити секунди

Приклад:

JavaScript
    
      const date = new Date();

      date.setFullYear(2025);
      date.setMonth(0); // Січень
      date.setDate(15);
      date.setHours(12);
      date.setMinutes(30);
      date.setSeconds(45);

      console.log(date.toString());
    
  

2.3 Форматування дат

JavaScript надає методи для форматування дат у рядок. Найпопулярніший метод — toLocaleDateString() для форматування дати залежно від локалі.

Приклад використання toLocaleDateString():

JavaScript
    
      const now = new Date();

      console.log(now.toLocaleDateString('en-US')); // "7/7/2024" (MM/DD/YYYY)
      console.log(now.toLocaleDateString('en-GB')); // "07/07/2024" (DD/MM/YYYY)
      console.log(now.toLocaleDateString('uk-UA')); // "07.07.2024" (DD.MM.YYYY)
    
  

Метод toLocaleTimeString()

Метод toLocaleTimeString() повертає час у вигляді рядка у локалізованому форматі:

JavaScript
    
const now = new Date();

console.log(now.toLocaleTimeString('en-CA')); 
console.log(now.toLocaleTimeString('en-GB')); 
    
  

Метод toLocaleString()

Метод toLocaleString() повертає дату і час у вигляді рядка у локалізованому форматі:

JavaScript
    
      const now = new Date();

      console.log(now.toLocaleString('en-CA')); 
      console.log(now.toLocaleString('en-GB')); 
    
  

Метод toISOString()

Метод toISOString() повертає дату і час у форматі ISO 8601:

JavaScript
    
      const now = new Date();

      console.log(now.toISOString()); // "2023-07-05T10:00:00.000Z"
    
  

2.4 Форматування чисел

Метод toLocaleString()

Метод toLocaleString() дозволяє форматувати числа відповідно до локальних налаштувань:

JavaScript
    
      const number = 1234567.89;

      console.log(number.toLocaleString()); // "1,234,567.89" у форматі США або "1 234 567,89" у локальному форматі
      console.log(number.toLocaleString('de-DE')); // "1.234.567,89" у форматі Німеччини
    
  

Форматування чисел за допомогою Intl.NumberFormat

Конструктор Intl.NumberFormat надає ще більш гнучкі можливості для форматування чисел:

JavaScript
    
      const number = 1234567.89;

      const usFormatter = new Intl.NumberFormat('en-US');
      console.log(usFormatter.format(number)); // "1,234,567.89"

      const deFormatter = new Intl.NumberFormat('de-DE');
      console.log(deFormatter.format(number)); // "1.234.567,89"

      const customFormatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
      });

      console.log(customFormatter.format(number)); // "$1,234,567.89"
    
  
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ