How to Compare Strings in JavaScript?

There are some instances that comparing strings is required, but how do we compare strings in JavaScript?

That’s what we are going to take care of in today’s tutorial, so bear with us, as we show you several approaches to do it.

Let’s start to discover the JavaScript compare strings, to enhance your coding skills in JS.

Solutions on comparing strings in JavaScript

There are several ways on how to compare strings JavaScript.

Solution 1: Use localeCompare() method

You can use the localeCompare method when comparing two strings in the current locale in JavaScript.

Here’s the syntax:

string1.localeCompare(string2)

Here are the references of the return value:

1If string1 is greater (higher in the alphabetical order) than string2
-1If string1 is smaller (lower in the alphabetical order) than string2
0If string1 and string2 are equal in the alphabetical order.

Here’s an example code:

let string1 = "It";
let string2 = "Sourcecode";
let result = string1.localeCompare(string2);
console.log(result); // output: -1

Output:

-1

The output is -1 because, in the English locale, “I” in “It” comes before “S” in the “Sourcecode” (S is further down in the alphabetical order than “I”).

In simple words, the output is -1 because string 1 is alphabetically greater than string 2.

Here’s another example using localeCompare() method:

const string1 = "itsourcecoders"
const string2 = "itsourcecode"
let result = string1.localeCompare(string2);
console.log(result); //output: 1

Output:

1

The output is 1 because, in the English locale, string1 is alphabetically greater than string2.

Here’s the last example of using localeCompare() method:

const string1 = "itsourcecode";
const string2 = "itsourcecode";
const string3 = "Itsourcecode";

let result1 = string1.localeCompare(string2);
console.log(result1); // output: 0

let result2 = string1.localeCompare(string3);
console.log(result2); // output: -1

Output:

0
-1

Comparing “itsourcecode” and “itsourcecode” gives “0” because they are equal in order. However, “itsourcecode” and “Itsourcecode” gives -1 because capital “I” is greater than small “i.”

Solution 2: Use mathematical operators

Aside from using the localeCompare() method, you can also use mathematical operators like greater than (>), less than (<), and equal to and equal to (== or ===) when comparing strings.

Mathematical operators, like localeCompare, return results based on the alphabetical order of the characters in the strings being compared.”

For example:

let string1 = "it";
let string2 = "sourcecode";
console.log(string1 < string2); // output: true

When comparing two strings, JavaScript compares character by character. If both strings start with the same character, JavaScript compares the 2nd characters of each string.

The end of a string is always < any character. In other words, strings are compared letter-by-letter.

Output:

true

As you can see, in our example the string1 is “it” and string2 is “sourcecode.” When comparing these two strings using the < operator, JavaScript compares the first characters of each string.

The first character of string1 is “i,” and the first character of string2 is “s.” Since “i” comes before “s” in the alphabetical order, string1 < string2 returns “true.”

Here’s another example:

let string1 = "it";
let string2 = "sourcecode";
console.log(string1 > string2); // output: false

As what we mentioned above, when comparing these two strings using the > operator, JavaScript compares the first characters of each string.

The first character of string1 is “i,” and the first character of string2 is “s.” Since “i” comes before “s” in the alphabetical order, string1 > string2 returns false.

Output:

false

On the other hand, we can use mathematical operators to compare the length of both strings.

For example:

let string1 = "it";
let string2 = "sourcecode";
console.log(string1.length < string2.length); // output: true

Output:

true

Why we got true? It is because the string1 “it” contains only two (2) characters, and string2 “sourcecode” contains ten (10) characters.

As you can see the length of “string2” is greater than the length of “string1,” so as a result of comparing the length, the “less than” (<) operator will return true.”

Solution 3: Use strict equality operator

You can also use strict equality operator (===) to determine whether the strings are equal.

It returns “false” if the strings are different otherwise “true” if they’re the same.

For example:

let string1 = "itsourcecode";
let string2 = "itsourcecode";
console.log(string1 === string2); // output: true

In our example, string1 is “itsourcecode” and string2 is “itsourcecode.” When comparing these two strings using the === operator, JavaScript checks if the two strings have the same characters in the same order.

Since both strings have the same characters in the same order, string1 === string2 returns true.

Output:

true

Solution 4: Use case-insensitive string comparison

You can also use case-insensitive string comparison in JavaScript. You can turn both strings to lowercase and compare them using strict equality operator afterward.

For example:

let string1 = "itsourcecode";
let string2 = "ITsourcecode";
console.log(string1.toLowerCase() === string2.toLowerCase()); //output: true

Why we got true? It is because in our example code string1 is “itsourcecode” and string2 is “ITsourcecode.”

When comparing these two strings using the toLowerCase method and the === operator, JavaScript first converts both strings to lowercase.

This means that string1.toLowerCase() returns “itsourcecode” and string2.toLowerCase() returns “itsourcecode”.

Then, the strict equality operator (===) is used to compare the two lowercase strings. Since both strings have the same characters in the same order, string1.toLowerCase() === string2.toLowerCase() returns true.

Output:

true

Conclusion

In conclusion, this article provides detailed explanations and code examples to help you understand the different ways to compare strings in JavaScript.

This article has provided several approaches to comparing strings in JavaScript.

These methods include using localeCompare, mathematical operators, strict equality, and case-insensitive comparison.

Each method has been explained in detail with code examples to help you understand how to compare strings in JavaScript.

By using these methods, you can enhance your coding skills in JavaScript and handle instances where string comparison is required.

We are hoping that this article provides you with enough information that helps you understand the compare strings JavaScript.

You can also check out the following article:

Thank you for reading itsourcecoders 😊.

Leave a Comment