【JavaScript】文字列を指定した数だけ繰り返した文字列を取得できるrepeatメソッドについて解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptで文字列を指定した数だけ繰り返した文字列を取得できるrepeatメソッドについて

repeatメソッドとは
repeatメソッドを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件：実行環境について
repeatメソッドとは
repeatメソッドを解説するプログラムの概要
1. HTMLサンプルプログラム
2. JavaScriptサンプルプログラム
実行結果
まとめ：repeatメソッドを使ってみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows10

repeatメソッドとは

repeatメソッドとは、呼び出している文字列を引数で指定している数だけ繰り返した文字列を返すメソッドです。
使い方サンプルは以下です。

var sample = 'ab'
var result = sample.repeat(2)

1 2	var sample = 'ab' var result = sample.repeat(2)

変数resultには

abab

abab

という文字列が返されます。

注意点としまして、repeatメソッドに指定する引数は0以上である必要があります。
たとえば

var sample = 'ab'
var result = sample.repeat(-1)

1 2	var sample = 'ab' var result = sample.repeat(-1)

と負の整数を指定した場合
JavaScriptのrepeatメソッドを解説

Uncaught RangeError: Invalid count value: -1
    at String.repeat (<anonymous>)
    at sample_javascript.js:2:21

Uncaught RangeError: Invalid count value: -1

at String.repeat (<anonymous>)

at sample_javascript.js:2:21

というエラーになります。

では、次の章で実際に使ってみます。

repeatメソッドを解説するプログラムの概要

repeatメソッドを解説するプログラムでは、

HTML
JavaScript

の2ファイルを使います。

repeatメソッドの引数に

0を指定した場合
10を指定した場合

でどんな文字列が返されるかをHTMLに表示させます。

フォルダ構成は以下のようになっています。
repeatメソッドを解説するフォルダ構成

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>repeatメソッドサンプル</title>
    </head>
    <body>
        <h2>repeatメソッドサンプル</h2>
        <strong>繰り返す文字</strong>
        <div id="appleDisplay"></div>
        <br>
        <strong>0回繰り返す</strong>
        <div id="apple0Display"></div>
        <br>
        <strong>10回繰り返す</strong>
        <div id="apple10Display"></div>
        <script src="js\sample_javascript.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>repeatメソッドサンプル</title>

</head>

<body>

<h2>repeatメソッドサンプル</h2>

<strong>繰り返す文字</strong>

<br>

<strong>0回繰り返す</strong>

<br>

<strong>10回繰り返す</strong>

</body>

</html>

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

HTMLで外部のJavaScriptを読み込むやり方を解説します

JavaScriptサンプルプログラム

var apple = 'リンゴ'
var apple0 = apple.repeat(0)
var apple10 = apple.repeat(10)

// 繰り返す文字を表示
var appleDisplay = document.getElementById('appleDisplay');
appleDisplay.innerHTML = apple;

// 0回繰り返した文字を表示
var apple0Display = document.getElementById('apple0Display');
apple0Display.innerHTML = apple0;

// 10回繰り返した文字を表示
var apple10Display = document.getElementById('apple10Display');
apple10Display.innerHTML = apple10;

var apple = 'リンゴ'

var apple0 = apple.repeat(0)

var apple10 = apple.repeat(10)

// 繰り返す文字を表示

var appleDisplay = document.getElementById('appleDisplay');

appleDisplay.innerHTML = apple;

// 0回繰り返した文字を表示

var apple0Display = document.getElementById('apple0Display');

apple0Display.innerHTML = apple0;

// 10回繰り返した文字を表示

var apple10Display = document.getElementById('apple10Display');

apple10Display.innerHTML = apple10;

getElementByIdメソッド
innerHTMLプロパティ

については、こちらの記事をご参考ください。

getElementByIdメソッド
【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します

innerHTMLプロパティ
【JavaScript】HTML要素の取得や書き換えができるinnerHTMLプロパティを解説します

実行結果

作成したHTMLをブラウザで開きます。
JavaScriptのrepeatメソッドを解説

repeatメソッドに指定した引数の数だけ文字列が繰り返されていることが確認できました。

まとめ：repeatメソッドを使ってみよう

以上がJavaScriptのrepeatメソッドについての解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ