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

Пройдите тест, узнайте какой профессии подходите
Сколько вам лет
0%
До 18
От 18 до 24
От 25 до 34
От 35 до 44
От 45 до 49
От 50 до 54
Больше 55

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

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

JS
Скопировать код
let num = 7;
let paddedNum = num.toString().padStart(4, '0');
console.log(paddedNum);  // Выводит "0007"

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

Пошаговый план для смены профессии

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

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

JS
Скопировать код
const padNumber = (num, width) => String(num).padStart(width, '0');
console.log(padNumber(5, 3));  // "005"

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

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

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

Markdown
Скопировать код
Исходные номера: [3, 27, 5]
Требуемая длина: 3 цифры

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

JS
Скопировать код
'3'.padStart(3, '0');  // "003"
'27'.padStart(3, '0'); // "027"
'5'.padStart(3, '0');  // "005"

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

Markdown
Скопировать код
После:  ["003", "027", "005"]

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

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

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

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

JS
Скопировать код
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:

JS
Скопировать код
function padDigits(number, targetLength) {
  let str = String(number);
  while (str.length < targetLength) {
    str = '0' + str;
  }
  return str;
}

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

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

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

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

JS
Скопировать код
function padWithArray(n, width) {
  return (new Array(width – String(n).length + 1).join('0')) + n;
}

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

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

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

JS
Скопировать код
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 — Дополнительные методы форматирования чисел с нулями.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой метод в JavaScript используется для добавления ведущих нулей к числу?
1 / 5

Загрузка...