JavaScriptで小数点形式の文字列を昇順に並べ替える方法

まず、次のような文字列の配列を考えてみましょう。

const arr = [ '.0', '.1', '.2', '.4', '.2.1', '.3', '.4.1', '.5', '.5.1.5' ];

このような配列を引数として受け取り、一般の人が見て自然だと感じる順序、つまり昇順に並べ替えるJavaScript関数を作成します。ここでいう昇順とは、'.0' を先頭とし、続いて '.1'、'.2' というように数値の小さいものから順に並べることを意味します。

したがって、並べ替え後の配列は次のようになります。

const output = [ '.0', '.1', '.2', '.2.1', '.3', '.4', '.4.1', '.5', '.5.1.5' ];

ポイントは、'.2.1' のような複数階層を持つ文字列の扱いです。単純な文字列比較ではなく、各数値セグメントを個別に比較する必要があります。

コード例

この処理を実現するコードは以下の通りです。

const arr = [ '.0', '.1', '.2', '.4', '.2.1', '.3', '.4.1', '.5', '.5.1.5' ];
const compare = (a, b) => {
   if (a === b) {
      return 0
   };
   const aArr = a.split("."), bArr = b.split(".");
   for (let i = 0; i < Math.min(aArr.length, bArr.length); i++) {
      if (parseInt(aArr[i]) < parseInt(bArr[i])) {
         return -1
      };
      if (parseInt(aArr[i]) > parseInt(bArr[i])) {
         return 1
      };
   }
   if (aArr.length < bArr.length) {
      return -1
   };
   if (aArr.length > bArr.length) {
      return 1
   };
   return 0;
};
arr.sort(compare);
console.log(arr);

仕組みの解説

この比較関数では、まず各文字列をピリオド（"."）で split() メソッドにより分割し、それぞれの数値セグメントを左から順に比較していきます。たとえば '.2.1' であれば [2, 1] として扱われます。parseInt() を使うことで、文字列としてではなく数値として比較できるため、「10」と「9」のようなケースでも誤った順序になりません。

また、共通するセグメントがすべて等しい場合（例：'.2' と '.2.1'）は、配列の長さを比較して、より短い（階層が浅い）文字列を先に配置します。この仕組みにより、ソフトウェアのバージョン番号のような階層構造を持つ文字列も、自然な順序で正確に並べ替えることが可能です。

実行結果

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

[
   '.0', '.1',
   '.2', '.2.1',
   '.3', '.4',
   '.4.1', '.5',
   '.5.1.5'
]