Case Sensitivity with `localeCompare` in JavaScript
I recently ran into a bug using code like the following:
someArray.sort((a, b) => a.name.localeCompare(b.name))
At a glance this seems fine—localCompare
enjoys fantastic browser support, and as the name suggests, it isn’t English-centric. However, this is still the web we’re building for, and the familiar gotcha of inconsistent behavior amongst browsers is lurking here. This can lead to hard-to-debug inconsistencies and bugs.
Most browsers—including Chrome, Edge, and Firefox—and Node treat localeCompare
as case-insensitive by default, treating an uppercase “A” as the same as a lowercase “a”. Safari, however, does something different.
Safari uses a variant of case-sensitive sorting, but not in the usual ASCII order where “Z” sorts above “a”. Instead Safari sorts lowercase letters above their uppercase companions, but in alphabetical order otherwise, like “aAbBcC”.
In many cases...