JavaScriptで文字列の文字を繰り返して配列を作成する方法

本記事では、文字列の各文字を順番に取り出しながら、指定した上限（リミット）に達するまで配列を構築する関数をJavaScriptで実装する方法を解説します。

要件の確認

例えば、文字列「aba」と上限値5が与えられた場合、結果として得られる配列は次のようになります。

string = "aba"、limit = 5 の場合 → ["a", "b", "a", "a", "b"]

実装例

それでは、実際のコードを見ていきましょう。ポイントは剰余演算子（%）を使うことです。これにより、インデックスが文字列の長さを超えたときに自動的に先頭へ戻り、文字列を繰り返すことができます。

const string = 'Hello';
const limit = 15;
const createStringArray = (string, limit) => {
    const arr = [];
    for(let i = 0; i < limit; i++){
        const index = i % string.length;
        arr.push(string[index]);
    };
    return arr;
};
console.log(createStringArray(string, limit));
console.log(createStringArray('California', 5));
console.log(createStringArray('California', 25));

コードの解説

• まず空の配列 arr を用意します。
• for ループで0から limit - 1 まで繰り返します。
• i % string.length で現在のインデックスを計算します。i が文字列の長さを超えると、インデックスが自動的に先頭に戻るため、文字列が循環して繰り返されます。
• 計算したインデックスの文字を push() で配列に追加していきます。
• 最後に完成した配列を返します。

出力結果

コンソールには以下のように出力されます。

[
    'H', 'e', 'l', 'l',
    'o', 'H', 'e', 'l',
    'l', 'o', 'H', 'e',
    'l', 'l', 'o'
]
[ 'C', 'a', 'l', 'i', 'f' ]
[
    'C', 'a', 'l', 'i', 'f', 'o',
    'r', 'n', 'i', 'a', 'C', 'a',
    'l', 'i', 'f', 'o', 'r', 'n',
    'i', 'a', 'C', 'a', 'l', 'i',
    'f'
]

まとめ

このように、剰余演算子を活用すれば、文字列の長さを意識せずに任意の長さの配列をシンプルに生成できます。同様の手法は、パターンの繰り返し処理やデータの循環参照など、さまざまな場面で応用できるので、ぜひ覚えておきましょう。