JavaScriptで数値の各桁を切り取って配列を作成する方法

問題

今回は、数値を受け取り、その数値を先頭から各桁の位置で切り取った文字列を要素として持つ配列を返すJavaScript関数を作成します。

例えば、入力が 246 の場合、出力は ['2', '24', '246'] のようになります。つまり、最初の1桁目だけ、次に2桁目まで、最後に数値全体というように、桁を増やしながら文字列を配列に格納していくイメージです。

実装コード例

以下は実際のコードです。

const num = 246;

const cutOffEach = (num = 1) => {
    const str = String(num);
    const res = [];
    let temp = '';
    for(let i = 0; i < str.length; i++){
        const el = str[i];
        temp += el;
        res.push(temp);
    };
    return res;
};

console.log(cutOffEach(num));

出力結果

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

[ '2', '24', '246' ]

コードの解説

このコードの処理の流れは以下の通りです。

まず String(num) を使って数値を文字列に変換し、各桁にインデックスでアクセスできるようにします。続いて for ループで文字列を先頭から1文字ずつ取り出し、一時変数 temp に連結していきます。ループの各回で、その時点の temp を結果配列 res に追加することで、「1桁目」「2桁目まで」「3桁目まで」という文字列が順に蓄積されていきます。最後に res を返せば完成です。

より簡潔な代替案

split、map、slice を組み合わせると、同じ処理をより短く書くこともできます。

const cutOffEach = (num = 1) => {
    const str = String(num);
    return str.split('').map((_, i) => str.slice(0, i + 1));
};

console.log(cutOffEach(246)); // [ '2', '24', '246' ]

こちらの方法では、文字列を1文字ずつの配列に分解した後、map を使ってインデックス i ごとに「先頭から i + 1 文字分」を slice で切り出しています。状態を保持する一時変数が不要になるため、意図が明確で読みやすいコードになります。