JavaScriptで文字列に含まれる数値に従って配列をソートする方法

次のような、各要素が1つ以上の数字を含む文字列の配列があるとします。

const arr = ['di5aster', 'ca1amity', 'cod3', 'ho2me3', 'ca11ing'];

ここでは、この配列を各文字列に含まれる数字の昇順で並べ替える関数を作成する必要があります。期待される正しい並び順は以下のとおりです。

const output = [ 'ca1amity', 'cod3', 'di5aster', 'ca11ing', 'ho2me3' ];

各文字列から抽出される数値は、それぞれ 5、1、3、23、11 となるため、この順序で並ぶことになります。

実装コード

まず、文字列から数字部分だけを取り出す関数を用意し、それをArray.prototype.sort()のコールバック内で利用します。

const arr = ['di5aster', 'ca1amity', 'cod3', 'ho2me3', 'ca11ing'];
const filterNumber = str => {
   return +str
   .split("")
   .filter(el => el.charCodeAt() >= 48 && el.charCodeAt() <= 57)
   .join("");
};
const sorter = (a, b) => {
   return filterNumber(a) - filterNumber(b);
};
arr.sort(sorter);
console.log(arr);

出力結果

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

[ 'ca1amity', 'cod3', 'di5aster', 'ca11ing', 'ho2me3' ]

コードの解説

• filterNumber関数：split("")で文字列を1文字ずつに分解し、charCodeAt()で各文字の文字コードを取得します。48〜57は数字「0」〜「9」に対応するため、この範囲の文字だけをfilter()で残し、join("")で連結することで数字部分だけを抽出できます。
• +演算子による変換：先頭に付けた単項プラス演算子により、抽出した数字の文字列を数値型へ変換しています。
• sorter関数：sort()のコールバックとして、2つの文字列から抽出した数値の差を返すことで、配列全体が数値の昇順に並べ替えられます。