JavaScriptで英数字が混在した配列をアルファベット順・数字順にソートする方法

はじめに

JavaScriptでは、英字と数字が混在した文字列の配列を並べ替えたい場面がよくあります。例えば「Ab-1」「ab-10」のような文字列を、まずアルファベット順に、同じ英字同士は数字の昇順でソートしたいケースです。しかし、単純にsort()を呼び出すだけでは、文字列として先頭から比較されるため、「ab-10」が「ab-2」より前に来てしまうなど、意図した順序になりません。

そこで本記事では、文字列を英字部分と数字部分に分けて比較する、カスタムソート関数の実装方法を解説します。

対象となる配列

次のような英数字が混在した配列を並べ替えます。

const arr = ['Ab-1', 'Ab-11', 'Ab-12', 'ab-10', 'ab-100', 'ab-101', 'ab-2', 'ab-3', 'ab-105'];

ソート用コードの実装

並べ替えを行うコードは以下の通りです。

const arr = ['Ab-1', 'Ab-11', 'Ab-12', 'ab-10', 'ab-100', 'ab-101', 'ab-2', 'ab-3', 'ab-105'];
const alphaNumericSort = (arr = []) => {
    arr.sort((a, b) => {
        const aPart = a.split('-');
        const bPart = b.split('-');
        return aPart[0].toLowerCase().localeCompare(bPart[0].toLowerCase()) || aPart[1] - bPart[1];
    });
};
alphaNumericSort(arr);
console.log(arr);

コードのポイント

• 文字列の分割: split('-')で各要素をハイフン区切りに分解し、英字部分と数字部分を取得します。
• 大文字・小文字の無視: toLowerCase()で英字部分を小文字に統一し、「Ab」と「ab」を同じ文字として扱います。
• 英字部分の比較: localeCompare()により、辞書順(アルファベット順)で比較します。
• 数字部分の比較: ||演算子を使い、英字部分が同一の場合のみ数字部分を比較します。文字列同士の引き算は数値として評価されるため、「2」と「10」も正しく数値順に並びます。

実行結果

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

[
    'Ab-1', 'ab-2',
    'ab-3', 'ab-10',
    'Ab-11', 'Ab-12',
    'ab-100', 'ab-101',
    'ab-105'
]

英字部分がアルファベット順に並べ替えられ、同じ英字を持つ要素は数字部分の昇順に正しくソートされていることがわかります。

まとめ

英数字が混在した配列をソートするには、文字列を英字部分と数字部分に分割し、それぞれに適した比較方法を組み合わせたカスタム比較関数をsort()に渡すのが有効です。この手法は、ファイル名やバージョン番号、商品コードなど、英字と数字が組み合わさったデータの並べ替えに幅広く応用できます。