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

Встроенный метод String.repeat()

Встроенный способ повторения строки в JavaScript – это метод String.prototype.repeat(), который возвращает новую строку, содержащую указанное число копий исходной строки, склеенных вместе. Его можно использовать так: "a".repeat(10) → "aaaaaaaaaa", что эквивалентно синтаксису Perl "a" x 10. Метод доступен в современных браузерах с 2015 года и обеспечивает чистый, эффективный способ повторения строк без ручных циклов.

Содержание

• Встроенный метод String.repeat()
• Синтаксис и примеры использования
• Возвращаемое значение и крайние случаи
• Совместимость с браузерами и полифиллы
• Альтернативные подходы
• Проблемы производительности

Встроенный метод String.repeat()

Метод String.prototype.repeat() – современный встроенный способ повторения строк в JavaScript. Согласно Mozilla Developer Network, он создает и возвращает новую строку, содержащую указанное число копий строки, на которой он был вызван, склеенных вместе.

Метод был добавлен в спецификацию ECMAScript 2015 (ES6) и доступен во всех браузерах с сентября 2015 года. Он является частью прототипа строки, что означает, что его можно вызывать напрямую на любом строковом значении:

"hello".repeat(3); // "hellohellohello"
"*".repeat(5);     // "*****"

Метод также является универсальным, то есть он может работать с объектами, у которых есть метод toString:

const obj = { toString: () => "abc" };
obj.repeat(2); // "abcabc"

Синтаксис и примеры использования

Метод repeat() принимает один параметр:

str.repeat(count)

Где:

• str – строка, которую нужно повторить
• count – количество раз, которое строка должна быть повторена (должно быть между 0 и Number.MAX_SAFE_INTEGER)

Ниже приведены практические примеры из Programiz:

// Базовое использование
const holiday = "Happy New Year! ";
const result = holiday.repeat(2);
console.log(result); // "Happy New Year! Happy New Year! "

// Создание паттернов
const separator = "-".repeat(20);
console.log(separator); // "--------------------"

// Создание паддинга
const name = "John";
const paddedName = name.padEnd(10, " ");
console.log(paddedName); // "John      "

// С разными типами данных
console.log("abc".repeat(3.5)); // "abcabcabc" (count преобразуется к целому)
console.log("abc".repeat(1));   // "abc"
console.log("abc".repeat(0));   // ""

Метод прост в использовании и предоставляет чистый синтаксис, похожий на оператор повторения в Perl.

Возвращаемое значение и крайние случаи

Метод repeat() возвращает новую строку с указанным количеством копий исходной строки. Понимание того, как он обрабатывает крайние случаи, важно для надёжного кода:

// Ноль повторений возвращает пустую строку
console.log("abc".repeat(0)); // ""

// Дробные значения счётчика преобразуются к целому
console.log("abc".repeat(3.5)); // "abcabcabc"

// Отрицательные значения вызывают RangeError
try {
  console.log("abc".repeat(-1));
} catch (e) {
  console.log(e); // RangeError: Invalid count value
}

// Infinity вызывает RangeError
try {
  console.log("abc".repeat(1 / 0));
} catch (e) {
  console.log(e); // RangeError: Invalid count value
}

Согласно GeeksforGeeks, метод предназначен для корректной обработки этих крайних случаев, выбрасывая ошибки при недопустимых значениях счётчика и предоставляя разумное поведение для допустимых входов.

Совместимость с браузерами и полифиллы

Хотя String.prototype.repeat() широко поддерживается, совместимость с браузерами остаётся важным фактором. Как отмечает Stack Overflow, метод поддерживается всеми основными браузерами, за исключением Internet Explorer.

Обзор совместимости:

• Современные браузеры (Chrome, Firefox, Safari, Edge): полная поддержка с 2015 года
• Internet Explorer: отсутствие нативной поддержки
• Старые браузеры: возможно потребуется полифилл

Для проектов, которым нужна поддержка старых браузеров, можно добавить полифилл. MDN предоставляет официальную реализацию полифилла:

if (!String.prototype.repeat) {
  String.prototype.repeat = function(count) {
    'use strict';
    if (this == null) {
      throw new TypeError('String.prototype.repeat called on null or undefined');
    }
    var str = String(this);
    var num = Number(count);
    if (isNaN(num) || num < 0) {
      throw new RangeError('Invalid count value');
    }
    if (num == Infinity) {
      throw new RangeError('Invalid count value');
    }
    num = Math.floor(num);
    if (str.length == 0 || num == 0) {
      return '';
    }
    if (str.length * num >= 1 << 28) {
      throw new RangeError('Invalid count value');
    }
    var maxCount = str.length * num;
    num = Math.floor(Math.log(maxCount) / Math.log(2));
    var result = '';
    while (num) {
      result += result;
      if (num & 1) {
        result += str;
      }
      num >>= 1;
    }
    return result;
  }
}

Альтернативно можно использовать более надёжный полифилл из GitHub, оптимизированный для сред, совместимых с ES3.

Альтернативные подходы

До появления repeat() разработчики использовали различные техники для повторения строк. Понимание этих альтернатив может быть полезно в разных контекстах:

Реализация с циклом for

function repeatString(str, count) {
  let result = '';
  for (let i = 0; i < count; i++) {
    result += str;
  }
  return result;
}

console.log(repeatString("a", 10)); // "aaaaaaaaaa"

Метод Array.join

function repeatStringArray(str, count) {
  return new Array(count + 1).join(str);
}

console.log(repeatStringArray("a", 10)); // "aaaaaaaaaa"

Использование метода fill() (только современные браузеры)

function repeatStringFill(str, count) {
  return new Array(count + 1).fill(str).join('');
}

console.log(repeatStringFill("a", 10)); // "aaaaaaaaaa"

Согласно Stack Abuse, хотя эти альтернативы работают, метод repeat() обычно более читаемый и зачастую более производительный для конкретного случая.

Проблемы производительности

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

Простой тест на производительность:

// Тестирование производительности repeat()
console.time('repeat');
const result1 = "a".repeat(100000);
console.timeEnd('repeat'); // Значительно быстрее

// Тестирование производительности цикла for
console.time('for-loop');
let result2 = '';
for (let i = 0; i < 100000; i++) {
  result2 += "a";
}
console.timeEnd('for-loop'); // Медленнее из‑за конкатенации строк

Метод repeat() обычно более эффективен, потому что:

• Он реализован нативно в движках JavaScript
• Эффективно управляет выделением памяти
• Часто использует оптимизированные алгоритмы для больших повторений

Вывод

JavaScript предоставляет чистое, встроенное решение для повторения строк с помощью метода String.prototype.repeat(), которое аналогично оператору повторения в Perl. Ключевые выводы:

• Используйте "строка".repeat(количество) для простого и читаемого повторения строк
• Метод корректно обрабатывает крайние случаи, такие как нулевое повторение (возвращает пустую строку) и выбрасывает ошибки при недопустимых входах
• Для современных браузеров (IE11+, все основные браузеры) нативная поддержка доступна без полифиллов
• При поддержке старых браузеров добавьте полифилл MDN или используйте альтернативные методы
• Метод repeat() обычно более производителен, чем ручные циклы

Для большинства случаев предпочтительным является метод repeat() благодаря своей простоте, читаемости и преимуществам по производительности. Однако в средах, где не поддерживается ES6 или требуется избежать полифиллов, альтернативные методы с циклами или массивами обеспечивают надёжную резервную поддержку.

Источники

1. String.prototype.repeat() – JavaScript | MDN
2. JavaScript String repeat() Method – W3Schools
3. Repeat String – JavaScript – Stack Overflow
4. JavaScript String repeat() (With Examples) – Programiz
5. JavaScript String repeat() Method – GeeksforGeeks
6. Repeating Strings in JavaScript – Stack Abuse
7. Repeating a string with vanilla JavaScript – Go Make Things
8. How to repeat a string in JavaScript – GeeksforGeeks
9. JavaScript String repeat() – Vultr Docs
10. A robust & optimized ES3‑compatible polyfill for String.prototype.repeat – GitHub