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

автор: Bond

Порада

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

автор: Bond
Порада

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

автор: Bond
Порада

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

автор: Bond
Порада

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

автор: Bond

Синтаксис

padEnd(targetLength)
padEnd(targetLength, padString)

Параметри

targetLength

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

автор: Bond

padString

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

автор: Bond

Повернення

string

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

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
57 48 10 44 15
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
57 57 48 10
Підтримка: серверні переглядачі
Переглядач Node.js Deno
8.0.0 1.0

Приклади

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

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

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

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

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

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

автор: Bond

У цьому складнішому прикладі ми використовуємо 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);
});
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід