Provavelmente você já sabe o que é um Unicode code point (se não sabe, leia aqui). Mas de forma resumida, todo caractere (inclusive emojis) possui um valor numérico associado, que é chamado de code point.
No caso do emoji 😀, o code point dele é U+1F600 ("GRINNING FACE").
O que acontece é que internamente o JavaScript representa code points acima de U+FFFF na forma de surrogate pairs <- neste link tem a descrição do algoritmo, mas basicamente o code point U+1F600 é "quebrado"/decomposto em dois valores: 0xD83D e 0xDE00 (provavelmente porque internamente as strings são armazenadas em UTF-16).
const str = '😀';
console.log(str.codePointAt(0).toString(16)); // 1f600
console.log(str.charCodeAt(0).toString(16)); // d83d
console.log(str.charCodeAt(1).toString(16)); // de00
Na documentação de split
há um aviso:
When the empty string ("") is used as a separator, the string is not split by user-perceived characters (grapheme clusters) or unicode characters (codepoints), but by UTF-16 codeunits. This destroys surrogate pairs.
Ou seja, ao fazer o split
, você estará iterando individualmente pelas partes do surrogate pair. Isso também influencia em outros aspectos da string, como por exemplo o tamanho dela e a iteração pelos caracteres usando um for
tradicional:
const str = '😀';
console.log(str.length); // 2
for (let i = 0; i < str.length; i++)
console.log(str[i]);
O tamanho é 2 porque length
também leva em conta os code units (na documentação diz: "the length of the string, in UTF-16 code units"), e um surrogate pair usa 2 code units.
E ao fazer um loop pelos caracteres da string, ele imprime os dois code points do surrogate pair.
Já o operador of
e a sintaxe de espalhamento operam sobre os code points da string, por isso o emoji é tratado corretamente nestes casos, pois na documentação é dito que o iterador de uma String
itera pelos code points da mesma (e a sintaxe de espalhamento usa o protocolo de iteradores por baixo dos panos, por isso funciona corretamente).
Outra forma de obter um array de code points é usando Array.from
:
const str = 'Olá! 😀';
console.log(Array.from(str)); // [ "O", "l", "á", "!", " ", "😀" ]
Para saber mais, sugiro o artigo: JavaScript has a Unicode problem.
Lembrando que esse problema não ocorre somente com emojis, e sim com qualquer caractere cujo code point seja maior que U+FFFF.
Outro detalhe é que nem todo caractere (no sentido de "um 'desenho único' que vemos na tela") é composto por apenas um code point. Existem casos mais bizarros que só o Unicode traz para você.
split()
que provavelmente não foi preparado pra isso, não parece ter alguma coisa a ver com iterador ou algo assim.split()
para o separador vazio:Se o separador for uma string vazia, str será convertido em um array de caracteres.
Os emojis são formados pares de sustituiçãoconsole.log('😀BC'.charCodeAt(0));console.log('😀BC'.charCodeAt(1));
e osplit()
entende como 2 caracteres. Documentação sobre pares de substituição