JavaScript String localeCompare() Method: String Comparison

The localeCompare() method in JavaScript is a powerful tool for performing locale-sensitive string comparisons. Unlike simple equality checks (== or ===) or basic string comparison operators (<, >, <=, >=), localeCompare() takes into account the nuances of different languages and regional variations in character ordering. This makes it invaluable for applications that need to sort strings correctly or handle user input in diverse languages. This comprehensive guide will explain how to use localeCompare(), its parameters, return values, and real-world applications.

What is localeCompare()?

The localeCompare() method is a built-in JavaScript string method that compares two strings based on the rules of a specific locale. This means that the comparison respects the character ordering and sorting conventions of the specified language or region. This is particularly useful when dealing with internationalized content or data that includes characters from different languages. The method is called on a string, and the string passed as an argument is compared against it.

Purpose of localeCompare()

The primary purpose of the localeCompare() method is to enable:

• Correct String Sorting: Sorting strings according to the rules of a specific language or region.
• Handling Internationalized Text: Comparing strings containing characters from various scripts correctly.
• User Input Validation: Comparing user inputs in a locale-aware way, ensuring that comparisons are not based on ASCII character codes but specific rules for that language.
• Customizable Comparison: Allowing developers to control the details of the comparison process with options for sensitivity, case-handling, and accent-handling.

Syntax of localeCompare()

The localeCompare() method has the following syntax:

string.localeCompare(compareString, locales, options);

Here’s a breakdown of each parameter:

Parameter	Type	Description
`compareString`	String	The string to compare against the calling string. This is a required parameter.
`locales`	String or Array	A string with a BCP 47 language tag, or an array of such strings. This optional parameter specifies the locale to use for the comparison. If not provided, the default locale of the JavaScript environment is used. Examples include ‘en’, ‘de’, ‘zh-Hans-CN’ or `[‘en-US’, ‘de-DE’]`
`options`	Object	An optional object to configure comparison options, including: – `usage`: Either ‘sort’ (for sorting) or ‘search’ (for searching). Default is ‘sort’. – `sensitivity`: Specifies which differences should lead to non-zero results. Possible values: ‘base’, ‘accent’, ‘case’, ‘variant’. – `ignorePunctuation`: `true` to ignore punctuation. Default is `false`. – `numeric`: `true` to handle numeric strings in number-aware way. Default is `false`. – `caseFirst`: Whether to return upper or lower case first while sorting. Possible values: ‘upper’, ‘lower’ or `false`.

Return Values

The localeCompare() method returns one of the following values:

• Negative Number: If the calling string comes before compareString in the sort order.
• Positive Number: If the calling string comes after compareString in the sort order.
• Zero: If the two strings are equivalent based on locale rules.

Basic Examples

Let’s start with some basic examples to understand the localeCompare() method’s behavior.

Basic String Comparison

const str1_basic = "apple";
const str2_basic = "banana";
const result_basic = str1_basic.localeCompare(str2_basic);
console.log(result_basic); // Output: -1 (or a negative number)

const str3_basic = "zebra";
const str4_basic = "ant";
const result2_basic = str3_basic.localeCompare(str4_basic);
console.log(result2_basic); // Output: 1 (or a positive number)

const str5_basic = "cat";
const str6_basic = "cat";
const result3_basic = str5_basic.localeCompare(str6_basic);
console.log(result3_basic); // Output: 0

In this example, "apple" comes before "banana" alphabetically, "zebra" comes after "ant", and "cat" is the same as "cat" and thus produces a zero result.

Comparison with Locales

Now, let’s examine how localeCompare() handles locale-specific differences.

const str1_locale = "cafe";
const str2_locale = "café";

const result_locale_default = str1_locale.localeCompare(str2_locale);
console.log(result_locale_default);

const result_locale_en = str1_locale.localeCompare(str2_locale, 'en');
console.log(result_locale_en);

const result_locale_fr = str1_locale.localeCompare(str2_locale, 'fr');
console.log(result_locale_fr);

In this example, the default and English locale might treat both strings the same (depending on the browser’s default locale), but in French locale, “café” will come after “cafe”.

Using the options parameter

Let’s see how different options parameters affect the comparison.

const str1_options = "aBc";
const str2_options = "abc";

// Default comparison
const result1_options = str1_options.localeCompare(str2_options);
console.log("Default:",result1_options);

// Case-insensitive comparison
const result2_options = str1_options.localeCompare(str2_options, undefined, { sensitivity: 'base' });
console.log("Case insensitive:",result2_options);


// Case-sensitive comparison
const result3_options = str1_options.localeCompare(str2_options, undefined, { sensitivity: 'case' });
console.log("Case sensitive:", result3_options);

Here, using sensitivity: 'base' treats the strings as identical (ignoring case), whereas using sensitivity: 'case' treats them as different.

Numerical Comparison

With numeric: true, we can get numeric string comparison with numbers being compared as numbers rather than string characters.

const str1_num = "file2";
const str2_num = "file10";

// Default string comparison
const result1_num = str1_num.localeCompare(str2_num);
console.log("Default comparison:", result1_num);

// Numeric comparison
const result2_num = str1_num.localeCompare(str2_num, undefined, { numeric: true });
console.log("Numeric comparison:", result2_num);

Without the numeric option, "file2" comes before "file10". But when it is set to true, then numbers are treated as numbers so that "file10" comes after "file2".

Advanced Examples

Sorting an Array of Strings

The most common usage of localeCompare() is to sort arrays of strings based on a specific locale.

const names_arr = ["Zoe", "alice", "Bob", "Aaron"];
names_arr.sort((a, b) => a.localeCompare(b));
console.log(names_arr);

const names_arr_locale = ["Zoe", "alice", "Bob", "Aaron"];
names_arr_locale.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' }));
console.log(names_arr_locale);

The output shows an array sorted without locale and then with locale, also case insensitive sort.

Real World Scenario: User Input Handling

Imagine a user input form where the user can enter their names. When sorting the names, using localeCompare ensures correct ordering for various locales.

function sortNames(names, locale) {
    return names.sort((a, b) => a.localeCompare(b, locale, {sensitivity: 'base'}));
}

const users_names = ["Björn", "Aaron", "Émilie", "Zoe"];
const sorted_names_en = sortNames(users_names, 'en');
console.log('English sort:', sorted_names_en);

const sorted_names_de = sortNames(users_names, 'de');
console.log('German sort:', sorted_names_de);

const sorted_names_fr = sortNames(users_names, 'fr');
console.log('French sort:', sorted_names_fr);

Here, we are sorting user names with different locale settings. The English sort may not sort Bjorn, but German and French will sort it as per their rules.

Browser Support

The localeCompare() method is widely supported across all modern browsers.

Browser	Supported
Chrome	Yes
Safari	Yes
Firefox	Yes
Edge	Yes
Opera	Yes

Note: While generally well-supported, it’s a good practice to test your specific use-cases across the browsers you intend to support, as older versions might have subtle differences or incomplete support for some locale options. 🧐

Conclusion

The localeCompare() method is essential for developing robust applications that need to handle string comparisons in a locale-sensitive way. By understanding its capabilities, you can create applications that respect the nuances of various languages and cultures, improving the user experience for a global audience. Whether you are sorting lists, validating user inputs, or performing complex string operations, localeCompare() provides a reliable solution for locale-aware string comparisons.