Introduction

If you need accented letters and language variants to sort correctly in JavaScript, use locale-aware collation rather than plain Array.sort(). The built-in answer is Intl.Collator or String.prototype.localeCompare, both of which know about language-specific sorting rules.

The subtle part is deciding what "predefined way" means. If you want the standard order for a real language such as Swedish, German, or Spanish, use that locale. If you want your own custom alphabet that does not match a standard locale, you need a custom ranking function on top of or instead of locale collation.

Use Intl.Collator for Real Locale Rules

For locale-based sorting, Intl.Collator is the most robust option.

1const words = ["ångström", "apple", "Äpfel", "ábaco", "zebra"];
2
3const collator = new Intl.Collator("sv", {
4  usage: "sort",
5  sensitivity: "base"
6});
7
8const sorted = [...words].sort(collator.compare);
9console.log(sorted);

This uses Swedish collation rules. That matters because accented characters are not just decorative marks in many languages. They can have a defined place in the alphabet rather than behaving like plain ASCII substitutions.

Choose the Right sensitivity

The sensitivity option controls how strongly the collator distinguishes letter variants.

1const names = ["Émile", "Emile", "Élodie", "Elodie"];
2
3const accentAware = new Intl.Collator("fr", {
4  usage: "sort",
5  sensitivity: "accent"
6});
7
8console.log([...names].sort(accentAware.compare));

Common settings are:

• 'base, which usually ignores accents and case differences for ordering'
• 'accent, which distinguishes accents but not necessarily case'
• 'variant, which is the strictest and usually distinguishes accents and case'

Pick the weakest setting that still matches product requirements. If users expect e and é to be treated as equivalent for sorting, base may be enough. If they must sort separately, use accent or variant.

localeCompare Works Too

If you only need a comparator inline, localeCompare can be enough.

1const cities = ["Zürich", "Aachen", "Ålesund", "Évora"];
2
3cities.sort((a, b) => a.localeCompare(b, "de", {
4  sensitivity: "base"
5}));
6
7console.log(cities);

Under the hood, this uses the same internationalization machinery as Intl.Collator. For large arrays, creating one Intl.Collator and reusing collator.compare is usually cleaner and can be more efficient.

Custom Predefined Order Is a Different Problem

Sometimes "predefined" does not mean locale rules. It means your application wants a custom order, such as treating ä exactly like ae, or placing ñ after n even when the chosen locale would do something else.

In that case, locale collation alone is not enough. You need a normalization or ranking layer.

1const rank = new Map([
2  ["a", 1], ["á", 1], ["ä", 2], ["b", 3], ["c", 4]
3]);
4
5function customCompare(a, b) {
6  const a0 = a[0].toLowerCase();
7  const b0 = b[0].toLowerCase();
8  return (rank.get(a0) ?? 999) - (rank.get(b0) ?? 999);
9}
10
11const values = ["beto", "árbol", "alfa", "äther"];
12console.log([...values].sort(customCompare));

This is no longer locale-based sorting in the linguistic sense. It is application-defined ordering. That is fine, but it is important to be honest about which problem you are solving.

Keep Client and Server Ordering Consistent

If the backend also sorts the same values, make sure it uses equivalent collation rules. Otherwise a paginated list can come back from the server in one order and be re-sorted in the browser in another.

This is a common production bug in multilingual applications. The JavaScript comparator may be correct on its own, but the user still sees inconsistent ordering between pages, exports, and search results because the backend uses different collation rules.

Common Pitfalls

• Using plain Array.sort() without a locale-aware comparator for accented text.
• Picking the wrong locale and then assuming all users will agree with the resulting order.
• Using sensitivity: "base" when accents actually need to affect the order.
• Calling something "locale-based" when the real requirement is a custom application-specific alphabet.
• Sorting on the client and server with different rules, which breaks pagination and consistency.

Summary

• Use Intl.Collator or localeCompare for proper locale-aware sorting in JavaScript.
• Pick the locale that matches the language rules you actually want.
• Tune sensitivity based on whether accents should be ignored or distinguished.
• If you need a custom predefined alphabet, write a custom ranking function instead of relying on locale rules alone.
• Keep frontend and backend collation behavior aligned so lists stay consistent.