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

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

Если вам нужен быстрый способ добавления ведущих нулей к числу в JavaScript, можно использовать метод .padStart():

let num = 7;
let paddedNum = num.toString().padStart(4, '0');
console.log(paddedNum);  // Выводит "0007"

Таким образом, мы формируем строку заданной длины, добавляя нули, если это требуется.

Разворачиваем всю прелесть padStart

Вы ищете более изящное решение? Тогда вам поможет подход, который предлагает ES6:

const padNumber = (num, width) => String(num).padStart(width, '0');
console.log(padNumber(5, 3));  // "005"

Функция padNumber является прекрасным примером лаконичности и эффективности ES6, заполняя начало числа нулями, чтобы число достигало нужной ширины.

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

Обратите внимание на выравнивание номеров гоночных автомобилей:

Исходные номера: [3, 27, 5]
Требуемая длина: 3 цифры

Производим дополнение нулями:

'3'.padStart(3, '0');  // "003"
'27'.padStart(3, '0'); // "027"
'5'.padStart(3, '0');  // "005"

И вот финальный результат:

После:  ["003", "027", "005"]

Получается стильно, быстро и ясно!

Создание собственных решений

Полифилл: Сеть безопасности

Метод ES2017 не доступен во всех средах. В таких случаях, в качестве "сети безопасности", можно применить полифилл для padStart:

if (!String.prototype.padStart) {
  String.prototype.padStart = function(targetLength, padString) {
    targetLength = Math.max(targetLength, this.length);
    padString = padString || '0';  
    let toPad = targetLength – this.length;
    return padString.repeat(toPad) + this;    
  };
}

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

Делай сам: Создай своё

Если вам нравится экспериментировать, попробуйте создать свою собственную функцию padDigits:

function padDigits(number, targetLength) {
  let str = String(number);
  while (str.length < targetLength) {
    str = '0' + str;
  }
  return str;
}

Функция padDigits вручную дополняет строковое представление числа нулями до указанной ширины.

Креативные методы дополнения

Массив Надежды

Также дополнение можно осуществить с помощью массивов в JavaScript:

function padWithArray(n, width) {
  return (new Array(width – String(n).length + 1).join('0')) + n;
}

Этот метод использует массивы для формирования необходимого количества нулей и последующего добавления их к числу.

Нарезка и сложение

Те, кто любит работать со строками, могут использовать следующую технику:

function padWithSlice(n, width) {
  let zeros = new Array(width).join('0');
  return (zeros + n).slice(-width);
}

Этот метод отлично подходит для работы с числами переменной длины, сосредотачивая внимание на фиксированной ширине итоговой строки.

Будьте разработчиком, ориентированным на тестирование

Тестирование необходимо для проверки корректности работы вашего решения. Используйте инструменты, такие как транспайлеры и полифиллы, чтобы обеспечить совместимость с устаревшими браузерами или серверными реализациями JavaScript.

Управляйте своим кодом, а не позволяйте коду управлять вами!

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

1. Как добавить ведущие нули к числу в JavaScript – Stack Overflow — Прactical methods of padding numbers with zeros.
2. String.prototype.padStart() – JavaScript | MDN — Документация по методу .padStart().
3. ECMAScript 2017 — Спецификация языка для padStart.
4. Обзор JavaScript — Анализ работы с числами в JavaScript.
5. Преобразование чисел в строки — Преобразование чисел в строки в JavaScript.
6. to-string – npm — Модуль npm для преобразования значений в строковый формат.
7. Вывод чисел с ведущими нулями в JavaScript – Stack Overflow — Дополнительные методы форматирования чисел с нулями.