Как дополнить строку в JavaScript

ES2017 добавил методы `padStart()` и `padEnd()`, которые добавляют пробелы или другие символы к строке, пока она не достигнет определенной длины.

Что такое заполнение строки?

Заполнение строки в JavaScript означает заполнение строки повторяющимся символом или строкой символов, обычно пробелами.

Строка дополняется до определенной длины, которая передается в методы String.prototype .padStart() и .padEnd().

Вызов .padStart(length) или .padEnd(length) возвращает новую строку заданной длины с началом или концом строки, дополненной пробелами.

Эти функции заполнения не изменяют строку, для которой они вызываются.

Оба .padStart() и .padEnd() принимают два параметра: длину в символах для дополнения строки и строку, которая будет повторяться при заполнении:

Зачем нужно набивать строку

Заполнение строки было бы полезно для очистки ввода данных, например, если для определенного ввода требуется строка из определенного количества символов.

При печати моноширинным шрифтом для выравнивания текста по правому краю можно использовать отступы, вызывая метод .padStart() с шириной экрана.

Для «экрана» из 20 символов .padStart(20) будет выровнен по правому краю:

Представляем `.padStart()` и `.padEnd()`

ECMAScript2017 представил два вспомогательных метода, которые значительно упрощают задачу заполнения строки, чем раньше.

Раньше для заполнения строк требовались математические вычисления, динамически выделяемая строка и вызов конкатенации строк.

Теперь с string.prototype.padStart() и string.prototype.padEnd() заполнение - это просто вызов встроенной строковой функции JavaScript.

Эти два метода похожи на новые методы обрезки строк .trimStart() и .trimEnd().

Пример использования: меню пиццерии

Отображение меню моноширинным шрифтом - это задача, которую можно решить, используя немного математики и функцию .padStart().

В следующем примере предполагается «экран» из 40 символов:

Тест производительности

Вопрос с любой новой функцией, добавленной в JavaScript, заключается в том, работает ли он медленнее. Потеря производительности может не стоить удобства.

Я подумал, будет ли метод .padStart() медленнее, чем старый.

Чтобы выяснить это, я запустил несколько тестов с помощью jsPerf, бесплатного инструмента для проверки производительности JavaScript, чтобы сравнить заполнение строк с конкатенацией строк.

Я сравнил .padStart() с динамическим заполнением, создав массив и затем объединив его в строку с помощью символа пробела.

Вот результаты, показывающие четкое 1-е, 2-е и 3-е место:

В десять раз быстрее

Мало того, что .padStart() было не медленнее, чем заполнение с динамической конкатенацией массива, .padStart() было фактически в 10 раз быстрее.

Конечно, если есть случай, когда можно использовать статическую конкатенацию строк без необходимости динамического создания строки, это приведет к еще одному увеличению скорости в 100 раз по сравнению с padStart().

Я не тестировал padEnd(), хотя он должен работать так же, как padStart().

А как насчет полифилла MDN?

Я признаю, что метод Array казался чем-то вроде взлома. Несомненно, был бы лучший способ дополнить строки в более старой версии JavaScript, и этот способ наверняка был бы намного быстрее. Поэтому я решил найти более быстрый алгоритм.

Лучшим вариантом оказался полифилл, рекомендованный в документации MDN, поэтому я добавил эту реализацию как еще один тестовый пример jsPerf.

Оказалось, что производительность полифилла примерно на 20% лучше, чем у метода Array, но все же почти в 9 раз медленнее, чем padStart():

Заключение

Заполнение - это полезный тип манипуляции строками, а методы padStart() и padEnd() ES2017 упрощают его в JavaScript.

Тестирование с использованием jsPerf показало, что эти методы намного быстрее, чем старый метод ручного заполнения строки с помощью динамической конкатенации.

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