10

Considerando o trecho de código a seguir:

const str = 'Olá! 😀';

str.split('').forEach((char) => console.log(char));

Utilizando o método split, note que (quase) todos os caracteres foram separados da string corretamente. Contudo, o emoji foi quebrado em duas partes — e .

Mas, se eu usar algum recurso mais novo da linguagem (como a implementação de strings para o protocolo de iteração), o emoji não é dividido em duas partes. Veja estes dois exemplos:

const str = 'Olá! 😀';

for (const char of str) {
  console.log(char);
}

Ou até mesmo um exemplo mais similar ao primeiro excerto de código desta pergunta. A única diferença é que, ao contrário do split, a sintaxe de espalhamento foi utilizada:

const str = 'Olá! 😀';

[...str].forEach((char) => console.log(char));

A sintaxe de espalhamento utiliza, por baixo dos panos, o protocolo de iteradores do ECMAScript.

Por que acontece isso? O que provoca essa diferença?

2
  • 1
    O problema é i split() que provavelmente não foi preparado pra isso, não parece ter alguma coisa a ver com iterador ou algo assim.
    – Maniero
    Commented 31/03/2020 às 18:22
  • 2
    Fagmento da documentação do 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ção console.log('😀BC'.charCodeAt(0));console.log('😀BC'.charCodeAt(1)); e o split() entende como 2 caracteres. Documentação sobre pares de substituição Commented 31/03/2020 às 18:37

1 Resposta 1

18

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ê.

4
  • +1 Muito boa resposta. Apenas uma duvida. Array.from(str) meio que contorna esse problema de fato ou não? A única atencao que tive foi que ficou a string vazia no array, mas isso é o de menos. Commented 3/03/2023 às 12:54
  • @CmteCardeal Que string vazia? No último exemplo, antes do emoji tem um espaço, o que está correto pq ele faz parte da string. É isso?
    – hkotsubo
    Commented 3/03/2023 às 12:58
  • Foi mal, escrevi errado. Mas é isso mesmo. Commented 3/03/2023 às 13:00
  • @CmteCardeal Blz. Então voltando à dúvida, a resposta é sim. Array.from resolve o problema do split e retorna um array da forma esperada.
    – hkotsubo
    Commented 3/03/2023 às 13:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .