JavaScript localeCompare(): String Comparison with Language Support

Sorting strings correctly in JavaScript can be more challenging than it seems at first glance. Many developers rely on standard comparison methods (>, <, ===), but these approaches often fail when dealing with different languages, case sensitivity, and numerical sorting.

In this article, we’ll explore the localeCompare method—a powerful but often overlooked tool that allows for proper string sorting with respect to linguistic rules. We’ll also discuss its advantages, limitations, and real-world use cases.

---

Problems with Standard String Comparison

By default, JavaScript compares strings character by character based on their Unicode values. This approach can lead to unexpected results:

console.log("apple" > "banana"); // false (as expected)
console.log("Zebra" > "apple"); // false (unexpected, since 'Z' < 'a' in Unicode)
console.log("straße" === "Strasse"); // false (in German, these are considered the same)

Key Issues with Standard String Comparison:

1. Case Sensitivity

   • "Zebra" > "apple" returns false because uppercase Z has a smaller Unicode value than lowercase a.

2. Diacritic Handling

   • "straße" !== "Strasse" despite both being identical in German.

3. Incorrect Numerical Sorting

   • Sorting strings with numbers results in an unnatural order:

   •   console.log(["file10", "file2"].sort()); // ["file10", "file2"]
     

     The expected order is ["file2", "file10"], but Unicode-based comparison sorts "1" in "file10" before "2" in "file2".

Why Use localeCompare?

The localeCompare method allows for string comparisons that respect linguistic rules, case sensitivity, and numerical order.

console.log("árbol".localeCompare("zanahoria", "es")); // -1 ('Á' comes before 'Z' in Spanish)
console.log("él".localeCompare("el", "es", { sensitivity: "base" })); // 0 (ignores accent difference)
console.log("archivo10".localeCompare("archivo2", "es", { numeric: true })); // 1 (correct numerical sorting)
console.log("mesa".localeCompare("Madrid", "es", { sensitivity: "case" })); // 1 (case-sensitive sorting)

Advantages of localeCompare:

✅ Correct string comparison across languages
✅ Customizable sorting (ignoring case, handling numbers, controlling sort order)
✅ Supported in all modern browsers (no extra libraries needed)

---

Understanding localeCompare Syntax

localeCompare is used as follows:

string1.localeCompare(string2, [locales], [options])

Parameters:

• string2 – The string to compare against.

• locales (optional) – The language locale (e.g., "en", "es", "de"). Defaults to the system locale if not provided.

• options (optional) – An object configuring the comparison behavior.

Basic Examples:

console.log("manzana".localeCompare("banana")); // -1 ('manzana' comes before 'banana')
console.log("banana".localeCompare("manzana")); // 1 ('banana' comes after 'manzana')
console.log("manzana".localeCompare("manzana")); // 0 (strings are equal)

Locale-Specific Sorting:

console.log("ñ".localeCompare("z", "es")); // -1 ('ñ' comes before 'z' in Spanish)
console.log("ä".localeCompare("z", "sv")); // 1 ('ä' comes after 'z' in Swedish)

Using localeCompare with Options

The options parameter allows fine-tuning of sorting behavior:

1. Case Sensitivity (caseFirst)

Controls whether uppercase or lowercase letters should come first.

console.log("a".localeCompare("B", "es", { caseFirst: "upper" })); // 1 ('B' comes before 'a')
console.log("a".localeCompare("B", "es", { caseFirst: "lower" })); // -1 ('a' comes before 'B')

• "upper" – Uppercase letters come first.

• "lower" – Lowercase letters come first.

• "false" – Follows locale-specific sorting.

2. Diacritic Sensitivity (sensitivity)

Determines whether accents and case differences are considered.

console.log("españa".localeCompare("España", "es", { sensitivity: "case" })); // -1 (case-sensitive)
console.log("número".localeCompare("numero", "es", { sensitivity: "base" })); // 0 (ignores accents)
console.log("número".localeCompare("numero", "es", { sensitivity: "accent" })); // 1 (distinguishes accents)

• "base" – Ignores case and accents.

• "accent" – Distinguishes accents but ignores case.

• "case" – Distinguishes case but ignores accents.

• "variant" – Distinguishes both case and accents.

3. Numeric Sorting (numeric)

Ensures correct order for strings containing numbers.

console.log("archivo10".localeCompare("archivo2", "es", { numeric: true })); // 1 ('archivo2' comes before 'archivo10')
console.log("archivo10".localeCompare("archivo2", "es", { numeric: false })); // -1 (default behavior)

4. Ignoring Punctuation (ignorePunctuation)

console.log("hola!".localeCompare("hola", "es", { ignorePunctuation: true })); // 0
console.log("palabra, palabra".localeCompare("palabra palabra", "es", { ignorePunctuation: true })); // 0

Practical Applications of localeCompare

1. Sorting an Array of Strings (ES Locale)

const words = ["zanahoria", "Ñandú", "pimiento", "árbol", "banana"];
words.sort((a, b) => a.localeCompare(b, "es"));
console.log(words); 
// ["árbol", "banana", "Ñandú", "pimiento", "zanahoria"]

To ignore case differences:

words.sort((a, b) => a.localeCompare(b, "es", { sensitivity: "base" }));
console.log(words);

2. Sorting an Array of Objects by Name

const users = [
  { name: "Sergio" },
  { name: "Ana" },
  { name: "Yolanda" },
  { name: "Benito" }
];

users.sort((a, b) => a.name.localeCompare(b.name, "es"));
console.log(users);
/* [{ name: "Ana" }, { name: "Benito" }, { name: "Sergio" }, { name: "Yolanda" }] */

To ensure case-insensitive sorting:

users.sort((a, b) => a.name.localeCompare(b.name, "es", { sensitivity: "base" }));

Limitations of localeCompare

1. Performance on Large Data Sets

Sorting large arrays with localeCompare is slower than simple Unicode comparison due to its complexity.

🔹 Optimization Tips:

• Use "base" sensitivity for faster comparisons.

• Cache results if sorting frequently.

• Consider Intl.Collator for better performance:

const collator = new Intl.Collator("es", { sensitivity: "base" });
arr.sort((a, b) => collator.compare(a, b));

2. Locale Support in Older Browsers

Check supported locales:

console.log(Intl.Collator.supportedLocalesOf(["es", "en", "fr"]));

Conclusion

The localeCompare method provides accurate, customizable, and language-aware sorting, making it invaluable for internationalized applications. However, for large-scale sorting, alternatives like Intl.Collator may offer better performance. 🚀