How to Check if Two Strings are Equal in JavaScript

Summary: in this tutorial, you’ll learn how to check if two strings are equal in JavaScript.

Suppose you have the following two strings:

const s1 = 'Hi';
const s2 = 'Hi';Code language: JavaScript (javascript)

Since s1 and s2 have the same characters, they are equal when you compare them using the === operator:

console.log(s1 === s2); // trueCode language: JavaScript (javascript)

Consider the following example:

const s1 = 'café';
const s2 = 'café';
console.log(s1===s2); // falseCode language: JavaScript (javascript)

In this example, s1 and s2 look the same. But the comparison s1 === s2 evaluates to false.

To understand how it works, you first need to know the concept of grapheme and combining characters.

What is a grapheme

A grapheme is the smallest functional unit of a writing system.

For example, the string café has four letters: c, a, f, and é (or e with acute). The way you see that each character is a unit of writing is called grapheme.

And some grapheme can be represented using different sequence of characters.

There are some characters that when you place them after a character, it modify the previous character. These characters are called combining characters.

What is a combining character

A combining character is a character that applies to the precedent base character to create a grapheme.

In our example, the é is an atomic grapheme. And you can encode it using the lowercase e (base character) and a combining character (◌́):

e + ◌́ = é

In JavaScript, the character é is represented as follows:

const c1 = 'e\u0301';
console.log(c1); // 
éCode language: JavaScript (javascript)

In this example, the \u0301 is the Unicode escape sequence of the combining character ◌́.

In addition, you can encode the same grapheme é using the lowercase e with acute character:

const c2 = 'é';
console.log(c2);Code language: JavaScript (javascript)

Now, if you compare the c1 and c2 of the same grapheme é, you find that they aren’t equal:

const c1 = 'e\u0301';
const c2 = 'é';
console.log(c1 === c2); // falseCode language: JavaScript (javascript)

To safely compare these string, you use the normalize() method. This method returns the Unicode normalization form of a string. For example:

const c1 = 'e\u0301';
console.log(c1.normalize()); // 
éCode language: JavaScript (javascript)

Hence, c1 and c2 will be equal after normalization:

const c1 = 'e\u0301';
const c2 = 'é';
console.log(c1.normalize() === c2.normalize()); // trueCode language: JavaScript (javascript)

Similarly, comparing the following strings also returns true:

const s1 = 'café';
const s2 = 'café';
console.log(s1.normalize() === s2.normalize()); // trueCode language: JavaScript (javascript)

Summary

• Generally, if the strings contain only ASCII characters, you use the === operator to check if they are equal.
• When the strings contain characters that include combining characters, you normalize them first before comparing them for equality.