How to compare strings in JavaScript

Read Time:5 Minute, 52 Second

Table of Contents

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.

SUGGESTED READ

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 (===):

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.

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.

SUGGESTED READ

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.

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:

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”.

SUGGESTED READ

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,

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

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:

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

SUGGESTED READ

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:

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.

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.

SUGGESTED READ

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.

Source: https://www.codeunderscored.com/how-to-compare-strings-in-javascript/

CyberSEO Pro - OpenAI GPT-3 autoblogging and content curation plugin for WordPress