JavaScriptの文字列を繰り返す方法(repeatメソッド)
生徒
「先生、JavaScriptで同じ文字を何回も繰り返して表示したいときって、どうすればいいんですか?」
先生
「とても良い質問ですね。JavaScriptには、文字列を繰り返すためのrepeatメソッドという便利な機能がありますよ。」
生徒
「repeatメソッド?どんなことができるんですか?」
先生
「文字列を指定した回数だけ繰り返してくれるメソッドです。例えば、「*」を10個並べたいときなどに使います。それでは、実際の使い方を見ていきましょう!」
1. repeatメソッドとは?
JavaScriptのrepeatメソッドは、ある文字列を指定した回数だけ繰り返して新しい文字列を作るためのメソッドです。
たとえば、「*」を10回繰り返したい場合や、「Hello!」を3回表示したい場合にとても便利です。
これは、ループ(繰り返し処理)を使わずに、たった1行で実現できるのが特徴です。
まずは基本的な構文を確認してみましょう。
文字列.repeat(回数)
ここで「文字列」には繰り返したいテキストを、「回数」には繰り返したい回数を指定します。
2. repeatメソッドの基本的な使い方
それでは、実際にrepeatメソッドを使ってみましょう。
const stars = "*".repeat(5);
console.log(stars);
*****
このように、アスタリスク(*)が5回連続して表示されます。
もし10回繰り返したい場合は、"*".repeat(10)と書くだけです。
3. 実用的な例:区切り線やタイトル装飾に使う
repeatメソッドは、実際のプログラムでも便利に使えます。
例えば、コンソール上に区切り線を表示したり、タイトルの上下に装飾を付けるときなどです。
const title = "JavaScript入門";
const line = "=".repeat(20);
console.log(line);
console.log(title);
console.log(line);
====================
JavaScript入門
====================
このように、repeatメソッドを使うことで、視覚的に見やすい出力を簡単に作れます。
4. 文字列の組み合わせで応用してみよう
repeatメソッドは、他の文字列操作と組み合わせることでさらに便利になります。
例えば、「#」を使ってピラミッドのような形を作ることもできます。
for (let i = 1; i <= 5; i++) {
console.log("#".repeat(i));
}
#
##
###
####
#####
このように、ループとrepeatを組み合わせると、パターンを生成することもできます。
例えば、進行状況バーやゲームのUIなどでも応用可能です。
5. 注意点:負の数や小数は使えない
repeatメソッドでは、繰り返す回数に「0以上の整数」を指定する必要があります。
負の数や小数、または大きすぎる数を指定するとエラーになります。
// エラーになる例
console.log("A".repeat(-2)); // ❌ 負の数
console.log("B".repeat(2.5)); // ❌ 小数
つまり、repeatは「整数で、0以上の数値」でしか使えません。
ちなみに、0を指定した場合は空文字列が返ります。
console.log("A".repeat(0)); // 空文字列
このように、エラーを防ぐためにも、繰り返し回数をきちんとチェックすることが大切です。
6. repeatメソッドを使ったちょっと便利なテクニック
たとえば、数字を2桁でそろえたいとき(01, 02, 03…)などにもrepeatを活用できます。
文字数が足りないときに0を補う処理なども簡単に書けます。
function padNumber(num) {
return "0".repeat(2 - String(num).length) + num;
}
console.log(padNumber(5)); // 05
console.log(padNumber(12)); // 12
05
12
これは、repeatを使って「足りない分だけ0を埋める」処理をしている例です。
実務でも役立つちょっとしたテクニックですね。
7. repeatメソッドの特徴まとめ
repeatは、文字列を指定回数だけ繰り返すメソッド。- 書き方は
文字列.repeat(回数)。 - 負の数や小数を指定するとエラーになる。
- 0を指定すると空文字列を返す。
- 文字のパターンや整形出力など、幅広い場面で使える。