Sort strings like a señor dev
['bread', 'apple'].sort((item1, item2) => item1 > item2);
While this might be right for this simple usecase, it isn’t. Yes english is a great language, we know…
But there are also other languages with different letters. For example there is french that uses accents or german that uses letters like ‘ä’. Let’s take this common example and feed it with these letters.
['Élite', 'french', 'earth'].sort((item1, item2) => item1 > item2);
One might expect, that Élite comes before or after earth, but it doesn’t. That’s because the sorting algorithm used here is a technical one and doesn’t really care about languages.
It just determines at what position the letter is in the UTF-8 table and takes this for sorting. So the letter e and f come before the letter É in the UTF-8 table.
['Élite', 'french', 'earth'].sort((item1, item2) => item1.localeCompare(item2));
And voilà our array gets sorted as we might expect it to be sorted.
Because languages are so strange, there is also a difference how languages sort the same letter. In german, you would sort the letter Ä together with the letter a. In swedish however, you would sort the letter Ä after the letter Z. For these use cases, we should pass the user’s locale as the second argument to the localeCompare function.
['Ärger', 'Zaun', 'arm'].sort((item1, item2) => item1.localeCompare(item2, 'de') );
['Ärger', 'Zaun', 'arm'].sort((item1, item2) => item1.localeCompare(item2, 'sv') );
As you can see, when using the locale for german de, it puts the letter Ä next to the letter a. However, when using swedish sv it puts the letter Ä after the letter Z.
Originally published at www.danielbischoff.com on October 17, 2019.