JavaScript

Optimum Way to Compare Strings in JavaScript

JavaScript has many methods that help a user compare two or more strings. But out of all the other methods available in JavaScript, the localeCompare() method is the most optimal for comparing strings. The localeCompare() method is applied to a string using a dot operator, and the other string is passed inside its argument.

Syntax of localeCompare() method

To understand the localeCompare() method, take a look at its syntax:

str1.localeCompare(str2);
  • str1: The first string to be compared, which can also be called the reference string
  • str2: The second string to be compared, which can also be called the compare string

Return Value
The localeCompare() method will return a numeric value with the following different scenarios:

  • Returns 0 in case both of the strings are totally equal and identical to each other
  • Returns 1 if the str1 comes before the str2 in numeric equivalence
  • Returns -1 if the str2 comes before the str1 in numeric equivalence

Example 1: localeCompare() method to compare two identical strings

First create two identical strings and store them in different variables like:

var str1 = "Hello";
var str2 = "Hello";

After that, apply the localeCompare() method on str1 and pass in the str2 as an argument, and then wrap this whole state inside a console log function to print the result onto the terminal:

console.log(str1.localeCompare(str2));

Upon execution, the result on the terminal looks like this:

However, the above output isn’t really that user-friendly, therefore, remove the console log function and wrap the localeCompare() statement inside an if-else condition like:

if (str1.localeCompare(str2) == 0) {
  console.log("Both the strings are identical");
} else {
  console.log("Both the strings are different");
}

Re-execute the program and the following result shows in the terminal:

The above-code snippet basically creates an identical-string checker, to verify this, change the values inside the string variables like:

var str1 = "Hello";
var str2 = "World";

Re-executing the program will provide the following result:

It is clear from the output that the strings are not identical to each other.

Example 2: Different strings yielding different return values

To check out the different return values that can occur with the localeCompare() method, create the following strings:

var str1 = "Romania";
var str2 = "romania";

Both the strings contain the same word, but are in different case-sensitivity. Apply localeCompare() on str1 and pass str2 in its argument like:

console.log(str1.localeCompare(str2));

Executing the program will give the following result on the terminal:

From the output, it is clear that both the strings are different. But the more interesting part is that the str1 > str2 in numeric equivalence.

To showcase a negative return value from the localeComapre() method, simply switch the reference string and the compare string with each other in the localeCompare() statement like:

console.log(str2.localeCompare(str1));

Executing the program will now yield the following outcome:

The output on the terminal depicts that str2 > str1 in numeric equivalence.

Example 3: Implementing Case-insensitivity in localeCompare() method

The localeCompare() method can take two additional arguments apart from the compare string. These are locales (can be used to define the local or base language) and options. If you choose a locale (for example, ‘en’) and in the third argument, you pass in “sensitivity = base”, then, in that case, the localeCompare() method is going to compare strings irrespective of their case sensitivity.

For example, take the following strings again:

var str1 = "Romania";
var str2 = "romania";

Afterwards, use the localeCompare() method with the second argument as “en” and the third argument as {sensitivity = base} and wrap the whole statement in a console log function:

console.log(str2.localeCompare(str1, "en", { sensitivity: "base" }));

The result upon execution will be:

As you can see, we got the output as “0” meaning that both of the strings are considered to be equal to each other.

Wrap up

The localeCompare() method is considered the most optimal and efficient string comparison method. The localCompare() is applied to a string using a dot operator, and that string is known as the reference string. The second string is called the compare string, which is passed inside the argument of the localeCompare() method. If both strings are equal and identical, then the numeric value “0” is returned; otherwise, a non-zero value is returned.

About the author

Abdul Mannan

I am curious about technology and writing and exploring it is my passion. I am interested in learning new skills and improving my knowledge and I hold a bachelor's degree in computer science.