![['B', 'a', 'A', 'b'].sort()はlocaleCompareを使うとabc順になる](https://iwb.jp/wp-content/uploads/2021/12/javascript-localecompare-not-localcompare.png.webp)
['B', 'a', 'A', 'b'].sort()はabc順にならない
大文字・小文字を区別せず文字列を並べ替えてabc順にしたい場合はsortを使用しても['A', 'B', 'a', 'b']になってしまう。
['a', 'A', 'b', 'B']の順番で並び替えたい場合はsortにlocaleCompareを併用すればabc順に並び替えることができる。
失敗例
['Banana', 'apple', 'Air', 'box'].sort()
// ['Air', 'Banana', 'apple', 'box']
成功例
['Banana', 'apple', 'Air', 'box'].sort((a, b) => a.localeCompare(b))
// ['Air', 'apple', 'Banana', 'box']
toLowerCaseを使用した並び替えは非推奨
toLowerCaseを使用した大文字・小文字を区別せず並び替える方法もあるがlocaleCompareを使用したときよりよりもコード量が増えてしまう。
const arr = ['Banana', 'apple', 'Air', 'box']
const sortArray = arr.sort((a, b) => {
return a.toLowerCase() < b.toLowerCase() ? -1 : 1
})
console.log(sortArray)
// ['Air', 'apple', 'Banana', 'box']
また、toLowerCaseを使用すると大文字・小文字の違いによる同名の場合は小文字 => 大文字の優先順位ではなく表示順がバラバラになってしまうので使用は避けたほうが良いだろう。
const arr = ['B', 'a', 'A', 'b']
const sortArray = arr.sort((a, b) => {
return a.toLowerCase() < b.toLowerCase() ? -1 : 1
})
console.log(sortArray)
// ['a', 'A', 'B', 'b']
localeCompareを使用すると同名の場合は「小文字 => 大文字」の順になる。
const arr = ['B', 'a', 'A', 'b']
const sortArray = arr.sort((a, b) => a.localeCompare(b))
console.log(sortArray)
// ['a', 'A', 'b', 'B']
localCompareではなくlocaleCompare
よくlocaleCompareをlocalCompareと書き間違えている人が多いので注意が必要。
localCompareだと当然動作しない。😅
