Check If Strings Are Equal in JavaScript

Like common programming languages, string comparison is a fundamental operation in JavaScript. Whether you're working on a simple web application or a complex software project, being able to check if two strings are equal is essential. However, string equality in JavaScript can be tricky due to the nuances of the language. This article will explore various techniques and methods to check for string equality in JavaScript. From the basic comparison operators (double equals == loose equality operator and triple equals === strict equality operator) to using the String prototype methods, we'll cover everything you need to know to compare strings effectively. So, let's dive in and explore the different approaches to checking string equality in JavaScript!

Understanding the basics of string equality in JavaScript

In JavaScript, there are multiple ways to check for string equality. The most straightforward method is to use the basic logical operators. Strict equality operator === ​compares its left operand and right operand and returns a boolean value. The result is true if both values are identical and of the same data type. Another method is to use the loose equality operator ==. Unlike the strict equality operator, the loose equality operator performs type coercion, meaning it will attempt to convert the operands to a common type before comparison.
Additionally, JavaScript provides a built-in method called localeCompare(). This method compares two strings and returns a number indicating whether the reference string comes before, after, or is the same as the compared string in a sort order. You can use different methods for different cases.

console.info("1" === "1"); // TRUE
console.info(1 === "1"); // FALSE
console.info(1 == "1"); // TRUE

Strict Equality Operator ===

The triple equals operator === is the recommended approach for comparing equality between two strings. It will return true only if the values and types of the compared strings are identical. For example, if you have two variables, str1 and str2, and you want to check if they are equal, you can use the following example:

const a = "str1";
const b = "str1";

console.info(a === b);

Using the strict equality operator, === or strict inequality operator !== eliminates ambiguity by ensuring that the value and type of the strings are equal. It is useful when comparing strings containing numbers or other characters that could be coerced to a different type. The triple-equals operator is case-sensitive, so "Hi" and "hi" are unequal.

Differences between the double equals == and the triple equals === operators.

As the name suggests, the loose equality == and loose inequality != operator performs a loose equality check. It allows for type coercion by attempting to convert the values compared to a common type, leading to some unexpected results. For example, "1" == 1 would be evaluated as true, as the string "1" is coerced into the numeric value 1. Surprisingly, "1" == true would also be evaluated as true, as both values are considered truthy. As a result, values of different types return true as the comparison result. For solid applications, it is best to avoid loose comparison and automatic type conversion that comes with it because you usually don't want to treat data of different types as equal.

On the other hand, the triple equals === operator performs a strict equality check, including the type of the data. This means that "1" === 1 would be false, as the string and number types are not considered equal. Similarly, "1" === true would also be evaluated as false, as the string and boolean types differ. Using the triple equals === operator leads to precise comparison and helps avoid unexpected conversions or type-related issues. In general, using the triple equals === operator is recommended when checking for string equality in JavaScript.

localeCompare() Method

localeCompare compares two strings and returns a number value instead of a boolean result​, indicating their relative ordering. You call the method on one string and pass the other as an argument. The localeCompare() method will compare the two strings using the current locale's rules, considering factors such as language-specific sorting and case sensitivity. The return value of localeCompare() can be used to determine the equality of the strings. If the return value is 0, it means the strings are equal. If the return value is a negative number, the first string comes before the second string in the sorting order. Conversely, if the return value is positive, the first string comes after the second string.

console.info("hi".localeCompare("hi")); // 0
console.info("a".localeCompare("b")); // -1
console.info("b".localeCompare("a")); // 1

Handling Case Sensitivity in String Comparisons

You can use the toLowerCase() method to turn all capital letters into lowercase letters, which results in case-insensitive string comparison:

console.info("HI".toLocaleLowerCase() === "hi"); // TRUE
```​