JS метод String.padEnd()

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

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

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

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

let str = "Привіт";
console.log(str.padEnd(10)); // Виведе: "Привіт    "

У цьому прикладі рядок str доповнюється пробілами, доки його довжина не досягне 10 символів.

Можна також використовувати інші символи для доповнення:

console.log(str.padEnd(10, '.')); // Виведе: "Привіт...."

Тут рядок str доповнюється крапками.

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

console.log(str.padEnd(5)); // Виведе: "Привіт"

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

Порада:	Використовуйте метод `String.prototype.padEnd()` для додавання пробілів або інших символів до кінця рядка, щоб забезпечити рівний візуальний вигляд тексту в таблицях або логах. Це особливо корисно, коли вам потрібно вирівняти дані у колонках для зручного читання. Наприклад, `let name = 'Іван'; console.log(name.padEnd(10, ' '));` додасть пробіли до кінця рядка `Іван`, зробивши його довжину рівною 10 символам.
Порада:	Якщо ви працюєте з форматами даних, де потрібна певна довжина рядка, використовуйте `padEnd()` для додавання специфічних символів до необхідної довжини. Це корисно при формуванні рядків для відправки в системи, що вимагають суворого дотримання формату. Наприклад, для додавання нулів у кінець рядка: `let serialNumber = '12345'; serialNumber = serialNumber.padEnd(10, '0');`.
Порада:	Під час розробки інтерфейсів або друку даних, ви можете використовувати `padEnd()` для створення візуально привабливих виводів, де текст рівномірно розподілений. Це допоможе уникнути візуального хаосу і зробить інформацію легшою для сприйняття.
Порада:	Коли ви працюєте з динамічними даними, де довжина рядків може варіюватися, `padEnd()` може бути корисним для забезпечення єдиної довжини всіх рядків. Це особливо актуально в сценаріях, де ви отримуєте дані з зовнішніх джерел і хочете вирівняти їх для однорідного відображення.

Синтаксис

padEnd(targetLength)
padEnd(targetLength, padString)

Параметри

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

Return

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

Переглядачі

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

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

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/MWLOKEj">
  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.padEnd() для вирівнювання тексту. Це корисно, коли потрібно забезпечити, щоб рядки мали однакову довжину, наприклад, при формуванні таблиць або виведенні вирівняного тексту у консоль. Метод padEnd() дозволяє додати символи до кінця рядка, поки його довжина не досягне вказаної довжини.

// Вихідний рядок
let originalString = "Привіт";

// Вирівнюємо рядок до 10 символів, додаючи пробіли
let paddedString = originalString.padEnd(10);

console.log(paddedString); // Виводить: "Привіт    "

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

// Масив об'єктів для відображення у таблиці
let products = [
  { name: "Яблуко", price: 10 },
  { name: "Банан", price: 12 },
  { name: "Апельсин", price: 15 }
];

// Визначаємо ширину колонок
const nameWidth = 10;
const priceWidth = 5;

// Виводимо заголовки колонок
console.log("Назва".padEnd(nameWidth) + "Ціна".padEnd(priceWidth));

// Виводимо кожен продукт
products.forEach(product => {
  let nameColumn = product.name.padEnd(nameWidth);
  let priceColumn = product.price.toString().padEnd(priceWidth);
  console.log(nameColumn + priceColumn);
});

JS довідник

JavaScript

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