「repeat」だけじゃない！JavaScriptで文字列を効率的に繰り返す5つの方法とは？

String.prototype.repeat() メソッドは、JavaScript で文字列を指定回数繰り返すために使用されます。このメソッドは、元の文字列を count 回コピーして結合した新しい文字列を返します。

構文

string.repeat(count);

引数

count: 文字列を繰り返す回数。0 以上の実数値である必要があります。

戻り値

元の文字列を count 回繰り返した新しい文字列。

例

const str = 'ハロー';
const repeatedStr = str.repeat(3);
console.log(repeatedStr); // 出力: ハローハローハロー

String.prototype.repeat() メソッドは、ES6 で導入されました。
count が非数値の場合、TypeError がスローされます。
count が 0 以下の場合、空文字列が返されます。

文字列の装飾
空白文字の挿入
文字列パターンの生成

JavaScript の学習については、様々なリソースが用意されています。書籍、Webサイト、オンラインコースなど、自分に合った方法で学習を進めてください。

const pattern = '*#';
const repeatedPattern = pattern.repeat(5);
console.log(repeatedPattern); // 出力: *****#*****#*****#*****#*****#

例 2: 空白文字の挿入

const numbers = [1, 2, 3, 4, 5];
const formattedNumbers = numbers.join(', ');
console.log(formattedNumbers); // 出力: 1, 2, 3, 4, 5

const formattedNumbersWithSpaces = numbers.join(' , ');
console.log(formattedNumbersWithSpaces); // 出力: 1 , 2 , 3 , 4 , 5

例 3: 文字列の装飾

const title = 'JavaScript';
const decoratedTitle = title.padStart(20, '=');
console.log(decoratedTitle); // 出力: ==============JavaScript

例 4: アニメーションの作成

const loadingDots = '.';
let dots = '';

const intervalId = setInterval(() => {
  dots += loadingDots;
  console.log(dots);

  if (dots.length === 4) {
    dots = '';
  }
}, 500);

setTimeout(() => clearInterval(intervalId), 2000);

const symbols = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+{}|;:<>?=-~';
const passwordLength = 16;

function generatePassword() {
  let password = '';

  for (let i = 0; i < passwordLength; i++) {
    password += symbols[Math.floor(Math.random() * symbols.length)];
  }

  return password;
}

const password = generatePassword();
console.log(password);

for ループ

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

const str = 'ハロー';
const repeatedStr = repeatString(str, 3);
console.log(repeatedStr); // 出力: ハローハローハロー

利点

シンプルで分かりやすい

欠点

String.prototype.repeat() メソッドよりも非効率的な場合がある

再帰関数

function repeatString(str, count) {
  if (count === 0) {
    return '';
  } else {
    return str + repeatString(str, count - 1);
  }
}

const str = 'ハロー';
const repeatedStr = repeatString(str, 3);
console.log(repeatedStr); // 出力: ハローハローハロー

利点

for ループよりもエレガントなコードになる場合がある

欠点

深い再帰呼び出しになると、スタックオーバーフローが発生する可能性がある

Array.prototype.fill()メソッドと Array.prototype.join() メソッド

function repeatString(str, count) {
  const repeatedArray = Array(count).fill(str);
  return repeatedArray.join('');
}

const str = 'ハロー';
const repeatedStr = repeatString(str, 3);
console.log(repeatedStr); // 出力: ハローハローハロー

利点

比較的新しい方法で、関数型プログラミングのスタイルに合致している

欠点

String.prototype.repeat() メソッドよりも冗長なコードになる場合がある

テンプレートリテラル

const str = 'ハロー';
const count = 3;
const repeatedStr = `${str.repeat(count)}`;
console.log(repeatedStr); // 出力: ハローハローハロー

利点

簡潔で読みやすいコードになる

欠点

テンプレートリテラルがサポートされていない古いブラウザでは動作しない

サードパーティ製のライブラリ

利点

多くのユーティリティ関数がすぐに利用できる

プロジェクトにライブラリを追加する必要がある