Let’s compare 2 strings str1 and str2:

const str1 = 'Hello!';
const str2 = 'Hello!';

str1 === str2; // => true

Because str1 and str2 have the same characters, these strings are equal.

Is it always the case that 2 strings looking the same are equal? Let’s try another example:

const str1 = 'café';
const str2 = 'café';

str1 === str2; // => false

While str1 and str2 look the same, the comparison str1 === str2 evaluates to false. How’s that possible?

Let’s detail into how to correctly compare strings in JavaScript. Before starting, I’m going to familiarize you with the terms of grapheme (a unit of writing) and combining character (specialized character that modify the look of a base character).

1. What’s a grapheme

Looking at the following string, what can you say about its content?

const str1 = 'café';

You can easily see that it has 4 letters: lowercase c, lowercase a, lowercase f, and lowercase e with acute.

The way a user thinks about a character as a unit of writing is named grapheme. The example string café contains 4 graphemes.

Here’s a formal definition of a grapheme:

Grapheme is a minimally distinctive unit of writing in the context of a particular writing system.

Ok, that’s all interesting, but how does it relate to the safe comparison of strings? Some graphemes can be rendered using different sequences of characters.

Particularly, there is a special set of characters named combining characters that modify the previous character to create new graphemes. Let’s detail combining characters.

#javascript #equality #string #programming