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() знаходить широке застосування у веб-розробці, програмуванні інтерфейсів та обробці текстових даних.

правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

padStart(targetLength)
padStart(targetLength, padString)

Параметри

targetLength

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

автор: Bond

правити

padString

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

автор: Bond

правити

Повернення

string

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

// Масив об'єктів для відображення
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);
});

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

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

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