Unicode e Emoji: de pontos de código a renderização

CodificaçãoEncoding, hashing, and QR

Unicode: o padrão de codificação que unifica todos os caracteres

Unicode atribui um número único (ponto de código) a cada caractere de quase todos os sistemas de escrita do mundo.

Conceito Descrição Exemplo
Ponto de código (Code Point) Número único do caractere U+4E2D (中)
Plano de código Cada 65536 pontos de código forma um plano BMP (plano 0)
BMP Plano multilíngue básico, U+0000~U+FFFF A maioria dos caracteres comuns
Plano suplementar U+10000~U+10FFFF Emoji, escritas antigas, caracteres raros

1. Família de codificações UTF

Codificação Comprimento em bytes Codificação de "中" Características
UTF-8 1-4 bytes E4 B8 AD Comprimento variável, compatível com ASCII, preferido para Web
UTF-16 2 ou 4 bytes 4E2D Comprimento variável, uso interno no JS
UTF-32 4 bytes fixo 00004E2D Comprimento fixo, alto consumo de memória

Regras de codificação UTF-8

Intervalo de pontos de código Bytes Modelo de codificação
U+0000 ~ U+007F 1 0xxxxxxx
U+0080 ~ U+07FF 2 110xxxxx 10xxxxxx
U+0800 ~ U+FFFF 3 1110xxxx 10xxxxxx 10xxxxxx
U+10000 ~ U+10FFFF 4 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

Exemplo de codificação

Caractere: 中
Ponto de código: U+4E2D = 0100 1110 0010 1101

UTF-8 (3 bytes):
  1110xxxx 10xxxxxx 10xxxxxx
  1110 0100 10 111000 10 101101
  = E4 B8 AD

UTF-16 (2 bytes):
  4E2D

UTF-32 (4 bytes):
  00004E2D

2. Armadilhas de Unicode no JavaScript

Comprimento de string incorreto

'中'.length              // 1 ✅
'𠮷'.length             // 2 ❌ (caractere do plano suplementar, par substituto)
'👨‍👩‍👧‍👦'.length           // 11 ❌ (sequência ZWJ de Emoji)
'🏳️‍🌈'.length             // 6 ❌ (Emoji de bandeira)

Causa: JS usa UTF-16

Caracteres do plano suplementar (ponto de código > U+FFFF) requerem pares substitutos (2 unidades de código UTF-16):

Caractere: 𠮷 (U+20BB7)
Par substituto UTF-16: D842 DF87
JS: length = 2 (duas unidades de código)

Forma correta de processar

// Método 1: operador de espalhamento
[...'𠮷'].length           // 1 ✅
[...'👨‍👩‍👧‍👦'].length         // 1 ✅ (mas a sequência ZWJ é contada como uma)

// Método 2: Array.from
Array.from('𠮷').length    // 1 ✅

// Método 3: for...of
for (const char of '𠮷👨‍👩‍👧‍👦') {
  console.log(char);  // iteração caractere por caractere
}

Operações com pontos de código

// Obter ponto de código
'中'.codePointAt(0)        // 20013 (0x4E2D)
'𠮷'.codePointAt(0)        // 134047 (0x20BB7)

// Criar caractere a partir do ponto de código
String.fromCodePoint(0x4E2D)  // '中'
String.fromCodePoint(0x20BB7) // '𠮷'

// Nota: charCodeAt não pode processar o plano suplementar
'𠮷'.charCodeAt(0)         // 55362 (apenas o primeiro substituto)

3. Análise profunda da codificação Emoji

Quatro tipos de Emoji

Tipo Exemplo Ponto de código Comprimento
Emoji básico 😀 U+1F600 1 (ponto de código)
Emoji com modificador 👩🏽 U+1F469 + U+1F3FD 2 (pontos de código)
Sequência ZWJ 👨‍👩‍👧‍👦 Múltiplos pontos de código + ZWJ 7 (pontos de código)
Emoji de bandeira 🇨🇳 U+1F1E8 + U+1F1F3 2 (pontos de código)

Conector de largura zero (ZWJ)

ZWJ (U+200D) conecta múltiplos Emoji em um Emoji composto:

👨 (U+1F468) + ZWJ (U+200D) + 👩 (U+1F469) + ZWJ (U+200D) + 👧 (U+1F467) + ZWJ (U+200D) + 👦 (U+1F466)
= 👨‍👩‍👧‍👦 (família de quatro)

Modificadores de tom de pele

Os modificadores de tom de pele (U+1F3FB ~ U+1F3FF) alteram o tom de pele do Emoji:

👩 (U+1F469) + 🏽 (U+1F3FD) = 👩🏽 (mulher com tom de pele médio)
Modificador Ponto de código Tom de pele
U+1F3FB 🏻 Tom claro
U+1F3FC 🏼 Tom médio claro
U+1F3FD 🏽 Tom médio
U+1F3FE 🏾 Tom médio escuro
U+1F3FF 🏿 Tom escuro

Emoji de bandeira

As bandeiras são compostas por dois símbolos indicadores regionais (ISO 3166-1 alpha-2):

🇨 (U+1F1E8) + 🇳 (U+1F1F3) = 🇨🇳 (China)
🇺 (U+1F1FA) + 🇸 (U+1F1F8) = 🇺🇸 (Estados Unidos)
🇯 (U+1F1EF) + 🇵 (U+1F1F5) = 🇯🇵 (Japão)

4. Seletores de variante

VS16 (U+FE0F) converte a apresentação de texto em apresentação Emoji:

❤ (U+2764)           → apresentação de texto: ❤ (coração preto)
❤️ (U+2764 + U+FE0F) → apresentação Emoji: ❤️ (coração vermelho)
Caractere Sem VS16 Com VS16
☕ ☕ (texto) ☕️ (Emoji)
⚡ ⚡ (texto) ⚡️ (Emoji)
❤ ❤ (texto) ❤️ (Emoji)

5. Uso de bibliotecas de ferramentas para processar Unicode

Codificação e decodificação Unicode

  1. Abra a ferramenta de codificação/decodificação Unicode
  2. Insira texto ou ponto de código
  3. Revise os resultados da conversão:
    • Texto → sequência de escape Unicode (\u4E2D)
    • Ponto de código → caractere
    • Sequência de bytes UTF-8/16/32

Codificação Emoji

  1. Abra a ferramenta de codificação Emoji
  2. Insira um Emoji
  3. Revise as informações completas de codificação:
    • Sequência de pontos de código
    • Bytes UTF-8
    • Decomposição ZWJ/modificadores
    • Nome curto CLDR

6. Armadilhas comuns e soluções

Armadilha 1: Truncamento de strings

// Erro: o truncamento pode cortar pares substitutos
text.substring(0, 10)  // pode produzir caracteres inválidos

// Correto: truncar por ponto de código
function sliceByCodePoint(str, start, end) {
  const chars = [...str];
  return chars.slice(start, end).join('');
}

Armadilha 2: Inversão de strings

// Erro: a inversão destrói caracteres combinados
'👨‍👩‍👧‍👦'.split('').reverse().join('')  // texto ilegível

// Correto: inverter por ponto de código
[...'👨‍👩‍👧‍👦'].reverse().join('')  // ✅

Armadilha 3: Correspondência com expressões regulares

// Erro: . não corresponde a caracteres do plano suplementar
/^.$/.test('𠮷')  // false

// Correto: usar flag u
/^.$/u.test('𠮷')  // true

Armadilha 4: Ordenação

// Ordenação padrão por unidades de código UTF-16
['中', '𠮷', 'a'].sort()  // pode não ser o esperado

// Correto: ordenar por ponto de código
['中', '𠮷', 'a'].sort((a, b) =>
  a.codePointAt(0) - b.codePointAt(0)
)

7. APIs práticas

// Normalização (lidar com equivalência de caracteres combinados)
'café'.normalize('NFC')   // café (combinado)
'café'.normalize('NFD')   // café (decomposto)

// Detectar Emoji
function isEmoji(char) {
  const code = char.codePointAt(0);
  return (code >= 0x1F600 && code <= 0x1F64F) ||  // Emoticons
         (code >= 0x1F300 && code <= 0x1F5FF) ||  // Símbolos diversos
         (code >= 0x1F680 && code <= 0x1F6FF) ||  // Transporte
         (code >= 0x1F900 && code <= 0x1F9FF);    // Suplementar
}

// Obter o comprimento real dos caracteres
function graphemeLength(str) {
  const segmenter = new Intl.Segmenter('pt', { granularity: 'grapheme' });
  return [...segmenter.segment(str)].length;
}

graphemeLength('👨‍👩‍👧‍👦')  // 1 ✅
graphemeLength('🏳️‍🌈')    // 1 ✅
#Unicode#Emoji#UTF-8#字符编码#码点