Многие онлайн-ресурсы научат форматировать даты. Но трудно найти то, что объясняет, как форматировать даты с помощью суффикса порядкового числа (например, 1ул) в JavaScript – без использования библиотеки.

В этой краткой статье вы узнаете, как форматировать даты JavaScript с порядковыми номерами. Все порядковые числительные используют суффикс. Суффиксы «-st» (как для 1-го), «-nd» (как для 2-го), «-rd» (как для 3-го) или «-th» (как для 4-го). Их используют для свиданий и когда нужно что-то заказать. Вместо 15 у вас будет 15, например.

Для дат это также удобный способ представления даты на веб-странице, и вас могут попросить отформатировать дату с помощью порядковых номеров, например 15 мая 2022 вместо 15 мая 2022 года.

Как форматировать даты в JavaScript

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

const dateObj = new Date();
const day = dateObj.getDate();
const month = dateObj.toLocaleString("default", { month: "long" });
const year = dateObj.getFullYear();

const date = `${month} ${day}, ${year}`;
console.log(date); // "December 23, 2022"

Примечание: Вы можете узнать больше о том, как форматировать даты в этой статье и об этом однострочном методе.

Как форматировать даты с суффиксами порядковых номеров (-st, -nd, -rd и -th) в JavaScript

Теперь у вас есть дата, но вы хотите, чтобы день был отформатирован как порядковый номер, то есть 23 должно быть, например, 23-м.

Вы можете создать функцию, которая проверяет каждое число и возвращает соответствующий суффикс.

const nthNumber = (number) => {
  if (number > 3 && number < 21) return "th";
  switch (number % 10) {
    case 1:
      return "st";
    case 2:
      return "nd";
    case 3:
      return "rd";
    default:
      return "th";
  }
};

Этот метод проверяет каждую группу чисел и возвращает соответствующий суффикс. К примеру, от 4 до 20 он будет иметь порядковый суффикс «th». Тогда операторы switch case проверяют надлежащим образом другие группы чисел и возвращают соответствующий суффикс порядкового числа.

Теперь вы можете обновить настройки даты, чтобы добавить nthNumber() функцию и передайте номер дня:

const date = `${month} ${day}${nthNumber(day)}, ${year}`;
console.log(date); // "December 23rd, 2022"

Вот так выглядит весь код:

const dateObj = new Date();
const day = dateObj.getDate();
const month = dateObj.toLocaleString("default", { month: "long" });
const year = dateObj.getFullYear();

const nthNumber = (number) => {
  if (number > 3 && number < 21) return "th";
  switch (number % 10) {
    case 1:
      return "st";
    case 2:
      return "nd";
    case 3:
      return "rd";
    default:
      return "th";
  }
};

const date = `${month} ${day}${nthNumber(day)}, ${year}`;
console.log(date); // "December 23rd, 2022"

Подведению

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

const nthNumber = (number) => {
  return number > 0
    ? ["th", "st", "nd", "rd"][
        (number > 3 && number < 21) || number % 10 > 3 ? 0 : number % 10
      ]
    : "";
};

Не стесняйтесь настроить функцию, чтобы получить желаемый результат, и получайте удовольствие от кодировки!