Как добавить ведущие нули к числам в JavaScript

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

Можно расширять числа ведущими нулями, применяя метод padStart():

const num = 42;
const result = num.toString().padStart(4, '0'); // Возвращает "0042", как будто это код агента 😉

Вместо 4 задайте требуемую длину строки.

При использовании отрицательных чисел не забудьте принять во внимание знак минуса при добавлении нулей:

const negNum = -42;
const negResult = (`${negNum}`).replace(
  /^-/,
  '-' + Math.abs(negNum).toString().padStart(4, '0')
); // Возвращает "-0042" – и отрицательные числа тоже могут быть с нулями! 😄

Добавление нулей к числам: чуть больше деталей

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

Отрицательные числа

Для отрицательных чисел отделите знак от числа:

const negWithZeros = (number, width) => {
  const absNumber = Math.abs(number).toString().padStart(width, '0');
  return number < 0 ? '-' + absNumber : absNumber;
  // Возвращает число с добавленными нулями, сохраняя его изначальный знак.
};

Подробнее об этом расскажет наш спикер на видео

Десятичные числа

При работе с десятичными числами добавляйте нули к целой части, не затрагивая дробную часть:

const decimal = 3.14;
const decimalWithZeros = decimal.toString().split('.');
decimalWithZeros[0] = decimalWithZeros[0].padStart(4, '0');
const fullDecimal = decimalWithZeros.join('.'); // "0003.14", отлично, это уже не просто число!

Большие числа

С большими числами также можно «играть с нулями»:

const largeNumber = 12345678901234567890n;
const paddedLargeNumber = largeNumber.toString().padStart(25, '0'); // "00012345678901234567890", теперь число легко заметить

Добавление нулей с помощью циклов и срезов

Если функция padStart недоступна, создайте свою функцию для добавления нулей:

Функция zeroPad

function zeroPad(number, width) {
  number = number.toString();
  while (number.length < width) {
    number = '0' + number; // "0" – это как кофе для программиста, не останавливайтесь, пока не достигнете нужного результата 😄
  }
  return number;
}

Используйте срезы для получения нужной длины

Сформируйте строку из нулей и извлеките из неё срез требуемой длины:

function zeroPadSlice(number, width) {
  return (new Array(width).join('0') + number).slice(-width); // Всегда подходящий размер, как и ваша любимая пицца!
}

Имейте альтернативные варианты! Альтернативы padStart

Для обеспечения стабильности и совместимости вашего кода со старыми версиями браузеров рассмотрите и альтернативные подходы.

Расширение объекта Number

Вы можете расширить прототип Number:

Number.prototype.pad = function(width) {
  return this.toString().padStart(width, '0');
};

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

Встречайте zfill – новый инструмент

В Python уже есть функция zfill, а в JavaScript она могла бы выглядеть так:

function zfill(number, width) {
  return (Array(width).join('0') + number).slice(-width);
}

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

Добавление ведущих нулей следует рассматривать как выравнивание длины числовых значений:

1, 2, 10, 20 -> Как будто скорость интернет-соединения: всё взлетает и падает. 😅

Выровненные значения с нулями:

01, 02, 10, 20 -> Здесь всё в идеальной гармонии.😉

const withZeros = number => String(number).padStart(2, '0'); // Каждое число заслуживает особого внимания! 🎩

Настройте функцию withZeros для эффективной работы с отрицательными и десятичными числами.

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

1. Обсуждение на Stack Overflow — Подробное исследование методов добавления ведущих нулей.
2. Документация MDN о padStart — Ваш основной ресурс по использованию padStart.
3. Руководство MDN к toString — Объяснение преобразования чисел в строку с возможностью добавления нулей.
4. Спецификации языка ECMAScript 2017 — Все детали методов padStart и padEnd.
5. Урок по добавлению нулей к числам на DigitalOcean — Как добавлять нули к числам в JavaScript разными способами.