JavaScriptで配列から数値と文字列を分離してソートする方法

はじめに

JavaScriptでは、数値リテラルと文字列リテラルが混在した配列を扱うことがあります。本記事では、Array.prototype.sort()メソッドにカスタム比較関数を渡すことで、配列内の要素を「数値」と「文字列」の2つのグループに分離し、それぞれのグループ内でも正しくソートする方法を解説します。

実装のポイント

鍵となるのは、sort()メソッドに渡す比較関数です。typeof演算子で各要素の型を判定し、以下のルールで並び順を決定します。

• 両方とも数値の場合：a - bを返して数値の昇順にソートする
• aが数値・bが文字列の場合：-1を返してaを手前に配置する
• aが文字列・bが数値の場合：1を返してbを手前に配置する
• 両方とも文字列の場合：辞書順（アルファベット順）で比較する

コード例

const arr = [1, 5, 'fd', 6, 'as', 'a', 'cx', 43, 's', 51, 7];
const sorter = (a, b) => {
    const first = typeof a === 'number';
    const second = typeof b === 'number';
    if(first && second){
        return a - b;
    }else if(first && !second){
        return -1;
    }else if(!first && second){
        return 1;
    }else{
        return a > b ? 1 : -1;
    }
};
arr.sort(sorter);
console.log(arr);

実行結果

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

[
    1, 5, 6, 7,
    43, 51, 'a', 'as',
    'cx', 'fd', 's'
]

仕組みの解説

JavaScriptの比較関数では、負の値を返すと第一引数（a）が先に、正の値を返すと第二引数（b）が先に来るように要素が並べ替えられます。この性質を利用することで、数値要素がすべて配列の前方に集められ、その後ろに文字列要素がアルファベット順で整列されるという結果になります。

また、文字列同士の比較をより厳密に行いたい場合は、String.prototype.localeCompare()を活用すると、大文字・小文字やアクセント記号を考慮した柔軟なソートも実現できます。用途に応じて比較ロジックをカスタマイズしてみてください。