サンプルコードでJavaScriptの文字列繰り返しをマスター

2024-04-28

JavaScriptで文字列を指定回数繰り返すには、主に以下の3つの方法があります。

String.prototype.repeat() メソッドを使う

説明:

String.prototype.repeat() メソッドは、JavaScript ES6で導入された新しいメソッドで、文字列を指定回数繰り返して新しい文字列を生成します。

例:

const str = "Hello";
const repeatedStr = str.repeat(3);
console.log(repeatedStr); // 出力: HelloHelloHello

利点:

コードが簡潔で分かりやすい
処理速度が速い

ES6以前のブラウザでは利用不可

for ループを使う

for ループを使って、文字列を繰り返し連結することで、指定回数繰り返すことができます。

const str = "Hello";
let repeatedStr = "";
for (let i = 0; i < 3; i++) {
  repeatedStr += str;
}
console.log(repeatedStr); // 出力: HelloHelloHello

すべてのブラウザで利用可能
コードを柔軟にカスタマイズできる

まず、文字列を要素とした配列を作成し、Array.prototype.join() メソッドを使って配列の要素を指定回数連結することで、文字列を繰り返すことができます。

const str = "Hello";
const repeatedStr = Array(3).fill(str).join("");
console.log(repeatedStr); // 出力: HelloHelloHello

コードがやや冗長

上記のように、JavaScriptで文字列を指定回数繰り返す方法はいくつかあります。状況に合わせて最適な方法を選択してください。

以下に、説明した3つの方法のサンプルコードをもう少し詳しく説明します。

String.prototype.repeat() メソッドを使う

const str = "Hello";
const repeatedStr = str.repeat(5);
console.log(repeatedStr); // 出力: HelloHelloHelloHelloHello

str 変数に、繰り返したい文字列 "Hello" を代入します。
repeat() メソッドを使って、str 変数の値を5回繰り返します。
5回繰り返した結果を repeatedStr 変数に代入します。
console.log() で repeatedStr 変数の値を出力します。

for ループを使う

const str = "World";
let repeatedStr = "";
const repeatCount = 3; // 繰り返す回数

for (let i = 0; i < repeatCount; i++) {
  repeatedStr += str;
}
console.log(repeatedStr); // 出力: WorldWorldWorld

repeatedStr 変数に、空文字列を代入します。
repeatCount 変数に、繰り返す回数3を代入します。
for ループを使って、repeatCount 変数の値までループします。
ループ内で、repeatedStr 変数に str 変数の値を繰り返し連結します。
ループ終了後、repeatedStr 変数の値を console.log() で出力します。

Array.prototype.join() メソッドを使う

const str = "!";
const repeatedStr = Array(10).fill(str).join("");
console.log(repeatedStr); // 出力: !!!!!!!!!!

Array(10) で、要素数10の配列を作成します。
fill() メソッドを使って、配列のすべての要素に str 変数の値を代入します。
join("") メソッドを使って、配列の要素を空文字区切りで連結します。

これらのサンプルコードを参考に、状況に合わせて最適な方法で文字列を繰り返してください。

JavaScriptで文字列を指定回数繰り返すその他の方法

サブストリングと連結を使う

以下のコードは、substr() メソッドと+ 演算子を使って、文字列を指定回数繰り返します。

const str = "ABC";
const repeatCount = 5;
let repeatedStr = "";

for (let i = 0; i < repeatCount; i++) {
  repeatedStr += str.substr(0, 3);
}

console.log(repeatedStr); // 出力: ABCABCABCABCABC

コードが比較的シンプル

長い文字列を繰り返すと非効率になる

正規表現を使う

const str = "DEF";
const repeatCount = 4;
const regex = new RegExp(`${str}{1}`, "g");
const repeatedStr = str.repeat(repeatCount).replace(regex, "$&$&$&$&");

console.log(repeatedStr); // 出力: DEFDEFDEFDEF