普通にソートすると
以下のような配列をソートすることを考える。
['1日', '2日', '11日', '21日']
JavaScript組み込みのsort関数を使うと、
console.log(['1日', '21日', '2日', '11日'].sort());
// => Array ["11日", "1日", "21日", "2日"]
このように辞書順で並び替えられるため、直観的でない順序になってしまう。
sort関数にオプションを渡すと
sort関数にオプションを渡すことで、数値順を考慮した並べ替えを行うことができる。
console.log(['1日', '21日', '2日', '11日'].sort(new Intl.Collator("ja", { numeric: true }).compare));
// => Array ["1日", "2日", "11日", "21日"]
{ numeric: true }のところが重要で、このオプションを渡すと「数値が入った文字列」をいい感じに並べ替えてくれるようだ。
まとめ
- JavaScriptの配列のsort関数をそのまま使うと、辞書順で並べ替えられるため直観的でない順序になることがある。
-
Intl.Collatorを使いsort関数にオプションを渡すと、いい感じに並べ替えられる。
Intl.Collatorには他にも便利なオプションが多数あるようですので、活用していきたい。