Why "👨👩👧👦".length Is 11: Counting Characters the Way Users See Them

JavaScript's default `string.length` method counts UTF-16 code units, not what users actually see. This led to an error when counting the emoji family 👨👩👧👦, which JavaScript reported as 11 characters. Users only see one character in this emoji. To fix this bug, we need to count graphemes, which represent what a user perceives as a single character.

Unicode defines graphemes, or extended grapheme clusters, as the building blocks of text that users recognize as individual characters. There are multiple ways to count graphemes in JavaScript. The most straightforward method is using the built-in `Intl.Segmenter` in modern browsers and Node.js. We first create a grapheme segmenter object, then use the `segment()` method to split the string into individual graphemes.

Finally, we count the number of resulting segments. For compatibility with older browsers, we can fall back to counting code points, which is still more accurate than using `string.length`. When counting characters for user input, such as captions, bios, SMS, or form fields, it's essential to use graphemes instead of raw code points to ensure users can see and edit what they're typing.

For third-party limits or database columns, use UTF-8 byte count or the platform's specific counting method. The provided code snippets demonstrate how to implement a grapheme counter in JavaScript, ensuring accurate character counts across various platforms and use cases.