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

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

Для добавления ведущих нулей к числу можно использовать метод padStart:

let num = 5;
let padded = num.toString().padStart(3, '0');  // Получаем '005'. Успех!

Значение 3 потребуется заменить на необходимое количество символов, а '0' — на символ, который вы хотите видеть на месте нулей в своём коде или идентификаторе.

Старый проверенный способ — трюк с методом «slice»

До появления padStart, можно было действовать следующим образом:

let num = 42;
let padded = ('0000' + num).slice(-4);  // В итоге получаем '0042' — ведущие нули на своём месте

Для изменения длины строки, достаточно заменить '0000' на нужное количество символов.

Визуализация — "Грузовик с числами"

Представьте, что требуется дополнить число ведущими нулями в JavaScript:

Место в грузовике (🚚): [   ,   ,   , 📦]
Ваше число:              : 7

Заполняем пустые места нулями:

const paddedNumber = String(7).padStart(4, '0'); // Получаем '0007'

Весь грузовик занят:

Грузовик после погрузки (🚚): [0️⃣, 0️⃣, 0️⃣, 📦]
Число после дополнения      : '0007'

Задача решена!

Различные подходы к дополнению и ключевые моменты

Локализация форматов — международные стандарты

Используйте toLocaleString для форматирования числа в соответствии с различными стандартами:

let num = 5;
let options = { minimumIntegerDigits: 3 };
let padded = num.toLocaleString('en-US', options);  // Результатом является '005'. Элегантно и просто.

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

Собственная функция дополнения — кастомизация под ваши правила

Добейтесь большей гибкости с помощью собственной функции:

function zeroPad(num, places) {
  let zero = places – num.toString().length + 1;
  return Array(+(zero > 0 && zero)).join("0") + num;  // Мы определяем правила.
}

Работа с нулями и пустотой — когда ноль встречает ноль

Временами может потребоваться добавить нули даже к нулю:

let num = 0;
let padded = num.toString().padStart(2, '0');  // Получаем '00'. Два нуля рядом.

Не забывайте, что maxLength при использовании padStart указывает на общую длину строки, а не количество добавляемых символов.

Производительность на первом месте — решение для быстродействия

Если вас волнует скорость выполнения:

function zeroPad(num, places) {
  let zerosNeeded = places – Math.ceil(Math.log10(num + 1));
  return String(Math.pow(10, Math.max(zerosNeeded, 0)) + num).slice(1);  // Скорость — наше всё.
}

Запасные варианты — обеспечение совместимости и наличие альтернатив

Расширение прототипа — удобный доступ

Можно пробовать расширить Number.prototype функцией zeroPad для удобства использования, однако будьте осторожны при применении этого подхода в общих проектах.

Проверка доступности padStart — безопасность превыше всего

Старые версии браузеров не должны стать препятствием:

if (!String.prototype.padStart) {
  // Пришло время для использования polyfill или альтернативного решения.
}

Наличие поддержки браузерами — доступность для всех

Метод padStart не поддерживается в браузере IE, поэтому рассмотрите возможность использования альтернатив для старых версий этого браузера.

Приступаем к практике

Переиспользуемые функции и тесты производительности станут вашей опорой, особенно когда работы много, а ведущих нулей — ещё больше.

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

1. Как добавить ведущие нули к числу в JavaScript – Stack Overflow.
2. String.prototype.padStart() – JavaScript | MDN.
3. String.prototype.padEnd() – JavaScript | MDN.
4. Учебник по работе со строками в JavaScript | DigitalOcean.
5. ECMAScript 2017.
6. Документация по Lodash.
7. Полифилл для padStart и padEnd – GitHub.