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(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()
в реальному часі.
У цьому прикладі використовується метод 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);
});