Как извлечь название месяца из объекта Date в JavaScript

Быстрый ответ

Чтобы извлечь из объекта Date название месяца в JavaScript, примените метод toLocaleString. Передайте ему параметры { month: 'long' } для получения полного названия месяца или { month: 'short' } для вывода сокращенного варианта:

const monthName = new Date().toLocaleString('ru-RU', { month: 'long' });
console.log(monthName); // "апрель"

Замените параметр 'long' на 'short', если нужно отобразить сокращенное название месяца.

Локализация: Профессионалы умеют работать с глобальными настройками

Метод toLocaleString позволяет выводить названия месяцев на различных языках, делая его мощным инструментом локализации в JavaScript:

const date = new Date();
console.log(date.toLocaleString('fr-FR', { month: 'long' })); // 'Avril', как если бы мы были во Франции

Предпочитаете краткость? { month: 'narrow' } обеспечит вам однобуквенное обозначение:

console.log(date.toLocaleString('ru-RU', { month: 'narrow' })); // 'А', что означает "Апрель"

Всегда указывайте локаль, даже если хотите использовать стандартную:

console.log(date.toLocaleString('default', { month: 'long' })); // Используется локаль по умолчанию.

Последовательность — ключ к успеху: знакомимся с Intl.DateTimeFormat

Для последовательного и оптимизированного форматирования дат рекомендуется использовать Intl.DateTimeFormat:

const formatter = new Intl.DateTimeFormat('ru-RU', { month: 'long' });
console.log(formatter.format(date)); // "апрель"
console.log(formatter.format(new Date(2021, 11))); // "декабрь"

Подготовка к неожиданностям: как контролировать крайние случаи

Никто не застрахован от крайних случаев. Вот несколько решений:

• Чтобы использовать функцию getMonth(), возвращающую индекс месяца из массива (индексация начинается с нуля), вам понадобится массив с названиями месяцев:

  JS

  Скопировать код

  const monthIndex = new Date().getMonth();
  const monthNames = ["январь", "февраль", "март", "апрель", ...];
  console.log(monthNames[monthIndex]); // Подходит, если вы склоняетесь к массивам

  Запустить код

• Возможно, вы захотите добавить метод getMonthName в прототип Date для удобства получения названия месяца:

  JS

  Скопировать код

  Date.prototype.getMonthName = function() {
    const formatter = new Intl.DateTimeFormat('ru-RU', { month: 'long' });
    return formatter.format(this);
  };
  console.log(new Date().getMonthName()); // "апрель"

  Запустить код

Визуализация

Многим проще воспринимать информацию визуально. Давайте воспользуемся аналогией с календарем, чтобы лучше понять, как это работает:

let date = new Date();
let monthName = date.toLocaleString('default', { month: 'long' });

Воспринимайте месяцы как страницы, перелистывающиеся в календаре:

📅 [Янв, Фев, Мар, Апр, Май, Июн, Июл, Авг, Сен, Окт, Ноя, Дек]
      👆
      getMonth() указывает на индекс (3 для апреля, но отсчет идет с нуля)

📖 [Январь, Февраль, Март, **Апрель**, Май, ..., Декабрь]
                   🠕
     'Апрель' – это месяц, который мы получаем с помощью toLocaleString

Хитрые приёмы: moment.js и date-fns

Для работы со сложными форматами дат и поддержки разных языков имеются библиотеки moment.js и date-fns:

• moment.js поддерживает разнообразные форматы, включая локализованные:

  JS

  Скопировать код

  console.log(moment().format("MMM")); // "Апр"
  console.log(moment().format("MMMM")); // "Апрель"

  Запустить код

• date-fns предоставляет модульные утилиты для работы с датами:

  JS

  Скопировать код

  import { format } from 'date-fns';
  console.log(format(new Date(), 'MMMM')); // "Апрель"

  Запустить код

  При выборе библиотеки учитывайте её размер и возможность оптимизации.

Ценность культур: настройка локализации дат и форматов

Дата — это больше, чем просто набор цифр. Учитывая культурные особенности, сконфигурируйте форматирование дат таким образом, чтобы оно соответствовало локальным традициям.

• Выведите месяц и год в соответствии с культурой:

  JS

  Скопировать код

  console.log(date.toLocaleString('de-DE', { month: 'short', year: 'numeric' })); // "Apr 2023"

  Запустить код

• Адаптируйтесь к разным культурным особенностям:

  JS

  Скопировать код

  console.log(new Intl.DateTimeFormat('ja-JP', { month: 'long' }).format(date)); // "4月"

  Запустить код

Полезные материалы

1. Date.prototype.toLocaleString() – JavaScript | MDN
2. javascript – Получение названия месяца из Date – Stack Overflow
3. Date.prototype.getMonth() – JavaScript | MDN
4. Методы даты в JavaScript
5. date-fns – современная библиотека утилит даты для JavaScript
6. Moment.js | Документация
7. GitHub – moment/luxon: ⏱ Библиотека для работы с датами и временем в JS