dr.Brain

doctor Brain

мир глазами веб-разработчика

Повторение строки с помощью JavaScript

Учимся правильно дублировать строки на JS

dr.Brain

время чтения 2 мин.

Photo by JOSHUA COLEMAN on Unsplash

Метод JavaScript .repeat() повторит строку ровно столько раз, сколько Вам нужно.

Вам когда-нибудь приходилось дублировать строку 500 и более раз с помощью JS?

Для решения такой задачи многие будут использовать цикл for, но JavaScript действительно имеет встроенный метод, который отлично справится с подобным испытанием.

Итак, разрешите представить: функция String.prototype.repeat(), она возвращает строку определенное количество раз, по умолчанию это значение равно 0.

Как это работает?

Метод .repeat() имеет всего один параметр, определяющий сколько раз нужно обратиться к строке и повторить ее. Так как .repeat() является методом String.prototype, он будет доступен для любой строки. Например:

"Hello world!".repeat() // ""
"Hello world!".repeat(1) // "Hello world!"
"Hello world!".repeat(2) // "Hello world!Hello world!"

.repeat() возвращает новую строку, которая является оригинальной строкой, продублированной установленное количество раз.

Чем это может быть полезно?

Обычно .repeat() не более чем веселая приколюха. Но, этот метод может пригодится при форматировании текста. Например:

console.log(`pizza${". ".repeat(10)}$1.99`)
console.log(`salad${". ".repeat(10)}$1.99`)
console.log(`beer${"$1.99".padStart(26,". ")}`)

// Output:
// pizza. . . . . . . . . . $1.99
// salad. . . . . . . . . . $1.99
// beer. . . . . . . . . . .$1.99

Так же имеет смысл сравнить .repeat() и .padStart(). Ниже я объясню почему.

В чем различия .repeat() и .padStart()?

Данные методы сходны, но параметром .padStart() является дополнительное количество символов (по умолчанию этим символом является пробел) для возвращаемой строки, а не количество повторений. Это означает, что .padStart() и его родственный метод .padEnd() будут более эффективны при выравниваниях, основанных на количестве символов, для моноширных шрифтов.

Заключение

  1. Если вдруг возникнет необходимость повторить строку определенное количество раз, .repeat() придет Вам на помощь и справится с поставленной задачей.
  2. Этот метод поддерживает эмоджи, а это целое поле для создания веселых и раздражающих посланий
  3. Если необходима поддержка старых версий браузеров, .repeat() не будет верным выбором, так как появился только в ES2015. Для этих целей будут полезны полифилы или, возможно, цикл for, например:

    function repeat(string,times) { var output = ""
    for(var i = 0; i < times; i++) { output += string }
    return output }
    repeat("Hello world!",2) // "Hello world!Hello world!"
    

Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.