Sort strings like a señor dev

In this post, we will find out, how to sort strings correctly in JavaScript.

The problem

['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.

The solution

JavaScript / browsers offer a simple to use function for these usecases: String.localeCompare() How can we write the above code with this function, to sort the array correctly?

['Élite', 'french', 'earth'].sort((item1, item2) => item1.localeCompare(item2));

And voilà our array gets sorted as we might expect it to be sorted.

Using locales

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.

I hope I could show you, how you can easily sort words with the function String.localeCompare() in JavaScript.


Originally published at www.danielbischoff.com on October 17, 2019.