JavaScriptで自然順にソート！数値と文字列の混在配列を正しく並べ替える方法

JavaScriptでは、数値と文字列がひとつの配列に混在することは珍しくありません。たとえば次のような配列に対して、「数値はすべて先頭に集めて昇順に並べ、文字列はその後ろにアルファベット順で並べる」というルールでソートしたい場面があります。

元データと期待される出力

今回対象となる配列はこちらです。

const arr = [1, 'fdf', 'afv', 6, 47, 7, 'svd', 'bdf', 9];

この配列をソートした際に期待される結果は、以下のとおりです。

[1, 6, 7, 9, 47, 'afv', 'bdf', 'fdf', 'svd']

注目すべきは、「47」が「9」よりも後ろに配置されている点です。これは文字列としてではなく数値として比較しているためです。単純にデフォルトの sort() を使うと要素が文字列化されてしまうため、このような結果にはなりません。

カスタム比較関数による実装

Array.prototype.sort() メソッドには、比較結果を返すコールバック関数（コンパレータ）を渡すことができます。ここでは、各要素の型を判定しながら並び順を決定する関数を作成します。

const arr = [1, 'fdf', 'afv', 6, 47, 7, 'svd', 'bdf', 9];

const sorter = (a, b) => {
    if (typeof a === 'number' && typeof b === 'number') {
        // 両方とも数値：数値として昇順にソート
        return a - b;
    } else if (typeof a === 'number' && typeof b !== 'number') {
        // aだけ数値：aを手前に置く
        return -1;
    } else if (typeof a !== 'number' && typeof b === 'number') {
        // bだけ数値：aを後ろに置く
        return 1;
    } else {
        // 両方とも文字列：アルファベット順で比較
        return a > b ? 1 : -1;
    }
};

arr.sort(sorter);
console.log(arr);

コードの仕組みを解説

この比較関数 sorter のロジックは、以下のように整理できます。

• 両方とも数値の場合： a − b を返すことで昇順に並べます。戻り値が負なら a が前、正なら b が前に配置されます。
• a が数値で b が文字列の場合： -1 を返し、数値を常に手側へ移動させます。
• a が文字列で b が数値の場合： 1 を返し、文字列を常に後ろへ回します。
• 両方とも文字列の場合： 辞書式（アルファベット順）比較で並べ替えます。

sort() はこの比較関数を繰り返し呼び出して隣接要素同士の順序を決定していくため、結果的に「数値グループ → 文字列グループ」という自然な順序が完成します。

実行結果

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

[
    1, 6, 7,
    9, 47, 'afv',
    'bdf', 'fdf', 'svd'
]

意図どおり、数値が昇順で先頭に集められ、その後ろに文字列がアルファベット順で並んでいることが確認できます。

補足：localeCompare() でより堅牢な文字列比較に

大文字・小文字やアクセント記号を含む文字列を正確に扱いたい場合は、最後の分岐を a.localeCompare(b) に置き換えるのがおすすめです。ロケールを考慮した自然な順序でソートできるため、実務でもよく使われる手法です。