JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで文字列を繰り返す2つの方法｜repeat()とfill()の使い方を解説

JavaScriptで文字列を繰り返し生成する方法は、主に2つあります。1つ目はstring.repeat()メソッドを使う方法、2つ目はArray.fill()メソッドを組み合わせる方法です。ここでは、それぞれの構文や使い方をサンプルコード付きで詳しく解説します。

方法1：string.repeat()メソッド

構文

string.repeat(number);

repeat()メソッドは、引数として数値を1つ受け取ります。指定した回数分だけ元の文字列が繰り返された、新しい文字列を返します。なお、0を指定した場合は空文字列が返され、負の値を指定するとエラー（RangeError）になる点に注意してください。

使用例

次の例では、repeat()メソッドに「3」を引数として渡しています。そのため、文字列が3回繰り返されて出力されます。

<html>
<body>
   <script>
      const str = 'Tutorix, ';
      var res = str.repeat(3);
      document.write(res);
   </script>
</body>
</html>

出力結果

Tutorix, Tutorix, Tutorix,

方法2：Array.fill()メソッド＋join()メソッド

構文

Array(number).fill(string).join('');

この方法では、まずArray(number)で指定した要素数の配列を生成し、fill()メソッドですべてのスロットに同じ文字列を挿入します。その後、join()メソッドで配列内の要素を連結することで、繰り返しの文字列を作成します。

使用例

次の例では、最初に要素数3の配列を作成し、すべてのスロットに指定した文字列を格納しています。その後、join()メソッドによって配列内の要素が連結され、結果が出力されます。

<html>
<body>
   <script>
      const str = 'Tutorialspoint ';
      var d = Array(3).fill(str).join('');
      document.write(d);
   </script>
</body>
</html>

出力結果

Tutorialspoint Tutorialspoint Tutorialspoint

まとめ

JavaScriptで文字列を繰り返す場合、シンプルで可読性が高いのはrepeat()メソッドです。一方、fill()＋join()の組み合わせは、配列操作と組み合わせたい場面などで柔軟に活用できます。用途に応じて使い分けるとよいでしょう。

  1. JavaScriptで文字列を検索する方法【search()メソッドの使い方を解説】

    JavaScriptで文字列を検索する方法 JavaScriptで文字列の中から特定の文字列を探すには、search()メソッドを使用します。このメソッドは、引数に渡した文字列（または正規表現）が対象の文字列内で最初に一致した位置（インデックス）を返し、見つからなかった場合は -1 を返します。 以下は、JavaScriptで文字列を検索するサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" />

  2. 文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

    JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析（パース）し、対応するJavaScriptオブジェクトを返します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum