JS метод String.padStart()

Загальний опис

Метод String.prototype.padStart() забезпечує динамічне доповнення рядка зліва до заданої довжини, використовуючи заданий рядок-доповнювач. Цей метод важливий для створення візуальної консистентності у текстових даних, наприклад, коли необхідно вирівнювати номери чи текст у списках, звітах чи інтерфейсах користувача.

Для використання padStart(), потрібно вказати два параметри: цільову довжину рядка та рядок-доповнювач (необов'язковий). Якщо довжина вихідного рядка менша за цільову, padStart() додає заданий рядок-доповнювач на початок вихідного рядка, доки не буде досягнуто цільової довжини. Якщо рядок-доповнювач не вказано, за замовчуванням використовується пробіл.

Простий приклад використання:

let str = "123";
console.log(str.padStart(5, "0")); // Виведе: "00123"

Тут метод padStart() доповнює рядок str нулями зліва, доки його довжина не стане рівною 5.

Цей метод особливо корисний при форматуванні числових даних, наприклад, для стандартизації вигляду телефонних номерів або номерів документів:

let phoneNumber = "1234567";
console.log(phoneNumber.padStart(10, "0")); // Виведе: "0001234567"

Важлива особливість padStart() полягає в тому, що якщо цільова довжина менша або дорівнює довжині вихідного рядка, метод поверне вихідний рядок без змін:

console.log(str.padStart(2)); // Виведе: "123"

Це робить padStart() безпечним для використання в ситуаціях, де довжина вхідного рядка може коливатися, але завжди потрібно забезпечити мінімальну довжину виводу. Метод padStart() знаходить широке застосування у веб-розробці, програмуванні інтерфейсів та обробці текстових даних.

Порада:	Використовуйте `String.prototype.padStart()` для додавання нулів перед числами, що мають відповідати певній довжині. Це корисно для створення форматованих серійних номерів, дат або інших кодів. Наприклад, якщо вам потрібно перетворити число `42` в рядок з мінімальною довжиною 5 символів, використовуйте: `('' + 42).padStart(5, '0')`, що поверне `'00042'`.
Порада:	Метод `padStart()` може бути використаний для вирівнювання текстових рядків у консольних додатках або логах. Це допоможе зробити вивід інформації більш організованим і читабельним. Наприклад, для вирівнювання назв продуктів в логах: `'Молоко'.padStart(10, ' ')`.
Порада:	Використовуйте `padStart()` для поліпшення візуального представлення даних у користувацьких інтерфейсах, де потрібно, щоб елементи тексту мали однакову довжину. Це особливо корисно у таблицях або списках, де однорідність довжини рядків підвищує зручність читання.
Порада:	У сценаріях з динамічними даними, де вам потрібно забезпечити певну довжину рядка, `padStart()` стане в нагоді. Це може бути корисно при роботі з API, які вимагають строгої довжини полів або при обробці даних, що надходять з зовнішніх джерел.

Синтаксис

padStart(targetLength)
padStart(targetLength, padString)

Параметри

*targetLength: Визначає бажану довжину кінцевого рядка після додавання доповнення. Якщо це значення менше або дорівнює довжині поточного рядка, метод повертає поточний рядок без змін.
padString: Вказує рядок, яким буде доповнюватися поточний рядок. Якщо padString довший, ніж потрібно для досягнення targetLength, він буде обрізаний. За замовчуванням цей аргумент має значення пробілу (" ").

Return

string: Повертає новий рядок (String), в якому поточний рядок доповнюється на початку символами з padString до досягнення заданої довжини targetLength. Якщо довжина поточного рядка вже дорівнює або перевищує targetLength, метод повертає поточний рядок без змін.

Переглядачі

Переглядач
	57	48	10	44	15

Переглядач
	57	57	48	10

Переглядач
	8.0.0	1.0

Приклади

У цьому прикладі користувачі можуть ввести рядок, вибрати символ для доповнення (за замовчуванням буде використовуватись пробіл) та вказати бажану довжину рядка. Після натискання кнопки "Доповнити", функція padString() активується і відображає доповнений рядок, демонструючи, як працює метод padStart() в реальному часі.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/OJdOMQe">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі використовується метод String.prototype.padStart() для додавання нулів до чисел, щоб вони мали однакову довжину. Це корисно в ситуаціях, коли потрібно вивести числа у вигляді рядків однакової довжини, наприклад, при форматуванні номерів замовлень або ID користувачів.

// Вихідне число
let number = 123;

// Перетворюємо число в рядок і додаємо нулі на початку до досягнення довжини 6 символів
let formattedNumber = number.toString().padStart(6, '0');

console.log(formattedNumber); // Виводить: "000123"

У цьому складнішому прикладі метод String.prototype.padStart() використовується для вирівнювання текстових даних у колонках. Це особливо корисно для створення читабельного виводу в консолі, наприклад, при відображенні табличних даних з різними значеннями.

// Масив об'єктів для відображення
let data = [
  { id: 1, name: "Олексій" },
  { id: 20, name: "Ірина" },
  { id: 300, name: "Василь" }
];

// Виводимо заголовки
console.log("ID".padStart(4) + " Ім'я");

// Виводимо дані
data.forEach(item => {
  let idColumn = item.id.toString().padStart(4);
  console.log(idColumn + " " + item.name);
});

JS довідник

JavaScript

Наповнення JS розділу