JavaScript: Метод String.padEnd

Метод padEnd добавляет заданное количество символов в конец строки. Он может нам пригодится например для табличного отображения строк.

// ❌
'Day: Monday' + 'Drink: 🍵'
'Day: Saturday' + 'Drink: 🍹'
// ✅
'Day: Monday'.padEnd(20) + 'Drink: 🍵'
'Day: Saturday'.padEnd(20) + 'Drink: 🍹'

Параметры padEnd

Принимает 2 параметра:

string.padEnd(, )

1-й параметр: длина

Обязательный параметр, обозначает финальную длину строки.

Допустим у нас имеется строка с длиной 3 символа, и мы применяем метод padEnd с обязательным параметром length рамным 5-и. В результати работы функции у нас получится строка длинною 5 символов, первые три останутся неизменными, а оставшиеся два заполнятся пробелами.

В примере ниже символ ·  для демонстрации заменяет пробелы:

'abc'.padEnd(5);
// abc··

2-й параметр: символ заполнитель

Это необязательный параметр. Как видно из вышесказанного, символ заполнитель по умолчанию - это пустой пробел. Тем не менее, вы можете заменить его любым другим символом.

'hi'.padEnd(10, '!');
// 'hi!!!!!!!!'

Табличное форматирование работает только с моноширинным шрифтом

Мы хотим использовать padEnd для создания текстовых таблиц. Стоит отметить что для того чтобы результат работы отображался верно нам потребуется моноширинный шрифт.

Моноширинный шрифт, также называемый шрифтом с фиксированным шагом, фиксированной шириной или непропорциональным шрифтом, представляет собой шрифт, буквы и символы которого занимают одинаковое количество горизонтального пространства.

Подробнее можно почитать в википедии

Например «Roboto» или «Monaco» - это моноширинные шрифты. Значение каждого символа будет иметь одинаковую ширину. Принимая во внимание, что шрифты, такие как «Times New Roman», не являются моноширинными. Они пропорциональны, поэтому каждый символ будет иметь разную ширину. А поскольку каждый символ имеет разную ширину, было бы сложно создать формат таблицы с помощью padEnd.

padEnd против padStart

Цель заполнителя строк - добавлять символы в строку, чтобы результат имел определенную длину.

Принимая во внимание, что padEnd добавляет символы в конце строки, логично предположить что padStart соответственно добавляет символы в начале строки.

'hello '.padEnd(10, '👋');
// 'hello 👋👋'' 

hello'.padStart(10, '👋');
// '👋👋 hello '

Проблемы с Emojis

Добавляя качестве заполнителя utf символ emoji, вы можете столкнуться со следующей проблемой:

'hello '.padEnd(11, '👋');
// 'hello 👋👋�'

Вместо последнего символа ладошки отображается «�», это происходит из-за того что длинна emoji как правило составляет 2 символа:

'👋'.length === 2 // true

Поэтому, если вы используете в качестве заполнителя смайлики, просто помните, что для их корректного отображения необходимо 2 символа а не один.