【JavaScript】数値を文字列変換せずに個々の桁へ分割する方法

本記事では、数値を唯一の引数として受け取り、その各桁に分割した結果を配列として返すJavaScript関数の実装方法を解説します。

やりたいこと

たとえば、次のような数値が入力された場合を考えてみましょう。

const num = 55678;

このとき、期待される出力は以下の通りです。

const output = [5, 5, 6, 7, 8];

ここで重要な条件がひとつあります。Number型をString型に変換してはならず、ES6の便利な関数も使用できないという制約です。つまり、toString() や split()、スプレッド構文などを使った簡単な手法は使えません。

解決アプローチ:剰余演算とMath.floor()を活用する

この問題は、数学的な演算だけでエレガントに解決できます。考え方のポイントは以下の3つです。

• 10で割った余り(% 10) を求めると、常に一番下の桁(1の位)が取り出せる
• Math.floor(num / 10) で数値を10で割って小数点以下を切り捨てると、取り出した桁を「削除」できる
• これらを数値が0になるまで繰り返すことで、すべての桁を抽出できる

取り出した桁は unshift() を使って配列の先頭に挿入することで、元の数値と同じ並び順になります。

サンプルコード

実際のコードは以下のようになります。

const num = 55678;

const numberToArray = (num) => {
    const res = [];
    while(num){
        // 10で割った余り = 一番下の桁を取得
        const last = num % 10;
        // 配列の先頭に挿入して順序を保つ
        res.unshift(last);
        // 最後の桁を取り除く
        num = Math.floor(num / 10);
    };
    return res;
};

console.log(numberToArray(num));

実行結果

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

[ 5, 5, 6, 7, 8 ]

処理の流れを追ってみる

num = 55678 の場合、whileループ内では以下のように処理が進みます。

1. 1周目:55678 % 10 → 8 を取得 → 配列は [8] → num は 5567 に更新
2. 2周目:5567 % 10 → 7 を取得 → 配列は [7, 8] → num は 556 に更新
3. 3周目:556 % 10 → 6 を取得 → 配列は [6, 7, 8] → num は 55 に更新
4. 4周目:55 % 10 → 5 を取得 → 配列は [5, 6, 7, 8] → num は 5 に更新
5. 5周目:5 % 10 → 5 を取得 → 配列は [5, 5, 6, 7, 8] → num は 0 になりループ終了

まとめ

文字列への変換やES6の関数に頼らなくても、剰余演算子(%)と Math.floor() を組み合わせることで、数値を個々の桁に分割して配列化できます。このテクニックは、桁ごとの合計を求める処理やパリティチェックなど、さまざまな場面で応用できるので覚えておくと便利です。