When programming in JavaScript, you will encounter various situations where you must compare two strings before performing an operation.

When programming in JavaScript, you will encounter various situations where you must compare two strings before performing an operation. For instance, a user can only log in to a website if its name matches the existing names stored in the database. In such situations, the ‘Strict Equality Operator’ compares the strings. The functionality of comparison in JavaScript is not only limited to value-based comparisons. Strings are compared for various reasons. Some of the reasons include the following:

  • When determining which string is higher or lower alphabetically, for this case, the localeCompare() method is applied.
  • When determining if the strings are equal.
  • When determining which string is greater or smaller than the other in relation to its length, in this case, the ‘length’ property is utilized.

This article has been tailored to explain the different methods for comparing strings in JavaScript. Let’s dive in!

Comparing strings in JavaScript

Strings are compared based on their ‘value’, ‘character’s case’, ‘length’, or ‘alphabetical’ order. If you want to compare strings based on their values and characters case, use the “Strict Equality Operator (===).” If you are comparing strings while basing on their length, use the “length” property in combination with “Comparison Operators”. Lastly, if you want to compare strings about their alphabetical order, you will be required to use the “LocalCompare()” method.

Let us now discuss the mentioned procedures in detail.

How to compare strings in JavaScript using the “Strict Equality Operator”

The primary operator of this operation is to compare the value of two string operands. The term “strict” makes it different from the equality operator, “==”; hence it strictly compares the values of strings without converting them into a common type.

The syntax of the Strict Equality operator is “===”.

When given an operation such as x===y, the Strict Equality Operator, “===”, will compare ‘x’ and ‘y’ values and then return a “Boolean” value. To demonstrate this, create two strings, ‘string1’ and ‘string2’. Then assign different values to the strings. The example shown below shows how strings are compared using the Strict Equality Operator (===):

const string1 = 'good';
const string2 = 'grace';
console.log(string1 === string2);
false

Since the values of both strings are not equal, the Strict Equality Operator will return “false”. The log() method is used to write a message to the console, and it is helpful for testing purposes. console.log() method is used to output a message to the web console.

Example: Using the Strict Equality Operator

Assign two similar values to some strings, string1 and string2. Subsequently, use the Strict Equality Operator to compare those values as illustrated in the example.

const string1 = 'good';
const string2 = 'good';
console.log(string1 === string2);
true

Since the values of both strings are equal according to their associated data type and character case, the Strict Equality Operator will mark them as similar and then return a “true” as the Boolean value.

In case you want to perform a “case-insensitive” comparison, you will be required to convert both strings into lowercase with the help of the “toLowerCase()” method and then compare them.

Example: case-insensitive comparison

In this operation assign an uppercase value to string3. The value should be similar to that of either string2 or string1.

const string1 = 'grace';
const string2 = 'good';
const string3 = 'GOOD';
console.log(string2 === string3.toLowerCase());
true

For the case above, when the value of “string3” is converted to lowercase, it becomes, “good,” which is equal to the value of “string2”. As a result, the execution of the above-given Equality operator will return “true.”

How to compare the lengths of strings in JavaScript

The “length” property usually returns the specified length of a string or, rather, the number of characters of a string. This property can be used with a combination of various comparison operators, for instance, the Greater than “>” operator and Less than “< ” operator, to compare the length of the strings. An example of such an operation is shown below:

const string1 = 'grace';
const string2 = 'good';
console.log(string1.length > string2.length);
true

The above-given operation checks if the length of “string1” is greater than the length of “string2”. The string1, “grace”, has five characters, whereas the string2, “good,” has four characters. This means that the length of string1 is greater than the length of string2. Hence, after the comparison has been made, the Greater than operator returns “true”.

How to compare strings using localeCompare() method

This method of comparison is based on alphabetical order. The “localeCompare()” method compares strings in the current locale based on the settings of the browser’s language. This method returns a number that could either be “-1”, “1,” or “0”. “-1” indicates that the left side string alphabetically comes before the right side string, whereas “1” infers that the left side string comes after the right side string and “0” indicates that both strings are equal. In some browsers, it may fail to return -1 and return values like -2 or any other negative value. Consequently, you should not only depend on -1 as the only negative answer. Similarly, some browsers may also return different positive values besides 1. These values should not bother you.
To demonstrate this method, you first have to define three strings, “string1”, “string2,” and “string3,” with some given values, for example,

var string1 = "car"
var string2 = "bus"
var string3 = "bus"

After this, you pass “string2” as an argument to the “localeCompare()” method so that it can compare it with “string1”.

Console.log(string1.localeCompare(string2));
1

Since string1 is alphabetically greater than string2, that is, ‘c’ in car comes after ‘b’ in bus in the alphabetical order, the localeCompare () method returns “1”. In case “string1” comes before “string 2” or if it is smaller than the invoked “localeCompare()” method, it will return “-1” because b in bus comes before c in car in the alphabetical order.

An example of such an operation is as shown below:

var string1 = "car"
var string2 = "bus"
var string3 = "bus"
console.log(string2.localeCompare(string1));
-1

Lastly, the “localeCompare()” method returns the value ‘0’ when both strings are equal in order:

var string1 = "car"
var string2 = "bus"
var string3 = "bus"
console.log(string3.localeCompare(string2));
0

In the example above, ‘b’ in a bus for string2 is equal to ‘b’ in a bus for string3 hence the reason why the operation returns the value 0. When you compare “bus” and “Bus”, you will get -1 because the capital “B” is more significant than the small “b”.

Below is the comparison for such an operation:

var string1 = "car"
var string2 = "Bus"
var string3 = "bus"
console.log(string3.localeCompare(string2));
-1

Another example of the localeCompare() method is when both words start with the same letter, for example, banana and back. In such a case, you cannot consider ‘ba’. You will be required to consider the next letter,’ n’ and ‘c’. ‘n’ comes after ‘c’ in alphabetical order; hence the comparison below will give 1.

var string1 = "banana"
var string2 = "back"
console.log(string1.localecompare(string2));
1

Conclusion

In this article, we have put together different procedures for comparing strings in JavaScript. You can choose any of them based on your requirements.

In comparing strings in JavaScript, you can use the Strict Equality Operator (===), length property, and localeCompare() method in which the Strict Equality Operator compares strings based on their values.

In contrast, the length property, in combination with the comparison operator, compare strings based on their lengths ( number of characters). The localeCompare method compares strings based on their alphabetical order.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *