Паддинг строки в JavaScript: добавление символов по длине

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

В JavaScript для дополнения строк до определенной длины вы можете применить методы .padStart() и .padEnd(). Допустим, у вас есть следующий код:

let str = "5";
str.padStart(3, "0"); // "005"
str.padEnd(3, "0");   // "500"

Метод padStart() добавляет заданные символы в начало строки, в то время как padEnd() — в конец. Если в вашей среде отсутствует поддержка этих методов, создайте полифилл или используйте методы типа String.prototype.paddingLeft.

Интересные альтернативы padStart() и padEnd()

Создание полифилла

Если вы работаете со старыми браузерами, не поддерживающими padStart() или padEnd(), на помощь может придти полифилл. Это код, который эмулирует недостающие возможности. Вот пример полифилла для padStart():

if (!String.prototype.padStart) {
  String.prototype.padStart = function(targetLength, padString) {
    targetLength = targetLength >> 0;
    padString = String(padString || ' ');
    if (this.length > targetLength) {
      return String(this);
    }
    targetLength = targetLength – this.length;
    while (padString.length < targetLength) {
      padString += padString;
    }
    return padString.slice(0, targetLength) + String(this);
  };
}

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

Дополнение при помощи конкатенации строк

Эффективным и удобным способом дополнения является конкатенация строк:

function padLeft(str, targetLength, padChar = ' ') {
  let padding = new Array(targetLength).join(padChar);
  return padding.substr(0, targetLength – str.length) + str;
}

Готовые строки и метод slice

Если время как вода, можно применить готовую строку с методом slice для мгновенного получения результата:

let padChar = '0';
let maxLength = 5;
let prePaddedString = new Array(maxLength + 1).join(padChar);
function leftPad(str) {
  return (prePaddedString + str).slice(-maxLength);
}

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

Визуализируйте процесс дополнения строк как поездку на поезде:

Ваш поезд (🚂) состоит из вагонов-символов строки:

Исходная строка: [H][e][l][l][o]
Желаемая длина: 10 вагонов

Мы дополняем наш поезд до требуемой длины (станции), добавляя новые вагоны:

Дополнение "_": [H][e][l][l][o][_][_][_][_][_]

Символы _ представляют собой дополнительные вагоны, которые увеличивают величину нашего поезда до 10 вагонов.

Усовершенствуем навыки в дополнении строк

Рекурсия наших дней

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

function recursivePad(str, targetLength, padChar = ' ') {
  if (str.length >= targetLength) return str;
  return recursivePad(padChar + str, targetLength, padChar);
}

Адаптивное дополнение в зависимости от ситуации

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

function dynamicPad(str, targetLength, padChar = ' ', condition) {
  let padding = condition ? padChar.repeat(targetLength) : '';
  return padding + str;
}

Предустановленные строки для частых сценариев

Для быстроты и эффективности используйте предопределенные строки:

const ZERO_PADDED = '00000';
const SPACE_PADDED = '     ';

function padWithPredefined(str, type) {
  switch (type) {
    case 'zeros': return (ZERO_PADDED + str).slice(-5);
    case 'spaces': return (SPACE_PADDED + str).slice(-5);
    default: return str;
  }
}

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

1. String.prototype.padStart() – JavaScript | MDN — детальное описание метода padStart.
2. String.prototype.padEnd() – JavaScript | MDN — информация о методе padEnd.
3. formatting – Pad a number with leading zeros in JavaScript – Stack Overflow — советы и решения от сообщества Stack Overflow.
4. Strings – JavaScript.info — руководство о методах дополнения строк от Javascript.info.
5. Modules: ECMAScript modules | Node.js v21.6.1 Documentation — как применять padStart в Node.js.
6. Modules: ECMAScript modules | Node.js v21.6.1 Documentation — пример использования padEnd в Node.js.
7. Medium — статья о появлении дополнения строк в JavaScript (ES8) на Medium.