Guia de Busca e Uso de Emoji: Da Codificação Unicode à Compatibilidade Multiplataforma

Texto

Codificação Unicode de Emoji

Faixas de codificação

Faixa Bloco Unicode Exemplo
U+1F600 - U+1F64F Emoticons 😀😁😂
U+1F300 - U+1F5FF Misc Symbols & Pictographs 🎨🌟🌀
U+1F680 - U+1F6FF Transport & Map 🚀🚗🚲
U+1F900 - U+1F9FF Supplemental Symbols & Pictographs 🤖🦊🦁
U+1FA00 - U+1FA6F Chess Symbols 🪀🪁🪂
U+1FA70 - U+1FAFF Symbols & Pictographs Extended-A 🪩🪫🪬

Representação de codificação

// Ponto de código Unicode
console.log('\u{1F600}');  // 😀
console.log('\u{1F680}');  // 🚀

// Consulta de ponto de código
console.log('😀'.codePointAt(0).toString(16));  // "1f600"

// Criar a partir de ponto de código
String.fromCodePoint(0x1F600);  // "😀"
String.fromCodePoint(0x1F680);  // "🚀"

Comprimento da codificação UTF-8

// Emoji ocupa 4 bytes em UTF-8
new TextEncoder().encode('😀').length;  // 4

// Mas .length retorna 2 (par substituto)
'😀'.length;  // 2

// Contar caracteres corretamente
[...'😀😁😂'].length;  // 3

Modificadores de tom de pele

5 tons de pele

U+1F3FB  🏻  Tom claro (Light Skin Tone)
U+1F3FC  🏼  Tom médio-claro (Medium-Light)
U+1F3FD  🏽  Tom médio (Medium)
U+1F3FE  🏾  Tom médio-escuro (Medium-Dark)
U+1F3FF  🏿  Tom escuro (Dark)

Combinação

Emoji base + Modificador de tom de pele = Emoji com tom de pele

👨 + 🏽 = 👨🏽
👋 + 🏿 = 👋🏿

// Combinação em JavaScript
const base = '\u{1F468}';  // 👨
const modifier = '\u{1F3FD}';  // 🏽
const result = base + modifier;  // 👨🏽

// Decomposição
[...'👨🏽'];  // ['👨', '🏽']

Sequências de União de Largura Zero (ZWJ)

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

👨 + ZWJ + 🏭 = 👨‍🏭  (Trabalhador de fábrica)
👩 + ZWJ + 💻 = 👩‍💻  (Mulher tecnóloga)
👨 + ZWJ + ❤️ + ZWJ + 👨 = 👨‍❤️‍👨  (Casal de homens)

Combinações familiares

👨 + ZWJ + 👩 + ZWJ + 👦 = 👨‍👩‍👦  (Família de três)
👨 + ZWJ + 👨 + ZWJ + 👧 = 👨‍👨‍👧  (Dois pais e uma filha)

Combinações de bandeiras

🇨 + 🇭 = 🇨🇭  (Bandeira da Suíça)
🇯 + 🇵 = 🇯🇵  (Bandeira do Japão)
🇨 + 🇳 = 🇨🇳  (Bandeira da China)

Emojis de bandeiras são compostos por dois indicadores regionais (Regional Indicator).

Diferenças de exibição multiplataforma

Emoji Apple Google Microsoft Samsung Twitter
😀 Estilo 😁 Estilo 😁 Estilo 😁 Estilo 😁 Estilo 😁
🔫 Pistola de água Pistola de água Pistola real Pistola de água Pistola de água

O mesmo Emoji tem aparência diferente em diferentes plataformas, mas o ponto de código Unicode é o mesmo.

Recomendações para evitar mal-entendidos

  1. Evitar Emoji ambíguos: 🔫 (arma/pistola de água), 🍆 (vegetal/insinuação)
  2. Testar exibição multiplataforma: Use a Ferramenta de busca de Emoji para ver a renderização em diferentes plataformas
  3. Usar com moderação em contextos profissionais: Evitar em e-mails/documentos formais
  4. Cuidado com sequências combinadas: Sequências ZWJ podem ser exibidas como múltiplos Emoji independentes em sistemas antigos

Usar Emoji em código

HTML

<!-- Uso direto -->
<p>Bem-vindo 🚀</p>

<!-- Escape Unicode -->
<p>Bem-vindo &#x1F680;</p>

<!-- CSS content -->
<style>
  .icon::before { content: '\1F680'; }
</style>

JavaScript

// Uso direto (recomendado)
const rocket = '🚀';

// Escape Unicode
const rocket = '\u{1F680}';

// Em strings
const message = `Deploy bem-sucedido ${rocket}`;

// Como chave de objeto (não recomendado, mas possível)
const icons = { '🚀': 'rocket', '🎨': 'art' };

Python

# Uso direto
rocket = '🚀'

# Escape Unicode
rocket = '\U0001F680'

# Em f-string
message = f'Deploy bem-sucedido {rocket}'

Armazenamento em banco de dados

-- MySQL: requer o conjunto de caracteres utf8mb4
CREATE TABLE messages (
  content VARCHAR(500) CHARACTER SET utf8mb4
);

-- ❌ O conjunto de caracteres utf8 não pode armazenar Emoji
-- ✅ O conjunto de caracteres utf8mb4 pode armazenar Emoji

Buscar Emoji com a ferramenta do Tools Ku

  1. Abra a Ferramenta de busca de Emoji
  2. Digite uma palavra-chave (em português ou inglês) como "feliz"
  3. Veja a lista de Emoji correspondentes
  4. Clique para copiar para a área de transferência
  5. Navegue por categorias

Exemplos de busca

Palavra-chave Resultado
feliz 😄😁😆😊🥰
foguete 🚀🚁🛸
gato 🐱🐈🐈‍⬛
comida 🍕🍔🍜🍣🍰
trabalho 💼💻📊📋✏️

Expressões regulares para Emoji

Corresponder todos os Emoji

// Regex para Emoji (versão simplificada)
const emojiRegex = /\p{Emoji_Presentation}/gu;

// Versão mais completa (inclui modificadores e sequências ZWJ)
const fullEmojiRegex = /\p{Extended_Pictographic}(\u{FE0F})?(\u{1F3FB}-\u{1F3FF})?(\u{200D}\p{Extended_Pictographic}(\u{FE0F})?(\u{1F3FB}-\u{1F3FF})?)*/gu;

// Uso
const text = 'Hello 😀 World 🚀';
const emojis = text.match(fullEmojiRegex);
// ["😀", "🚀"]

Remover Emoji do texto

function removeEmoji(text: string): string {
  return text.replace(/\p{Emoji_Presentation}/gu, '');
}

removeEmoji('Hello 😀 World 🚀');  // "Hello  World "

Contar quantidade de Emoji

function countEmoji(text: string): number {
  const matches = text.match(/\p{Emoji_Presentation}/gu);
  return matches ? matches.length : 0;
}

Perguntas frequentes

Por que os Emoji aparecem como quadrados □?

  • Fonte não suportada: O sistema não possui fontes Emoji
  • Conjunto de caracteres incorreto: O banco de dados/arquivo usa UTF-8 em vez de UTF-8MB4
  • Versão antiga: Novos Emoji requerem uma versão mais recente do sistema

Por que o .length de um Emoji não é 1?

'😀'.length          // 2 (par substituto)
'👨🏽'.length         // 4 (base + modificador, cada um ocupa 2)
'👨‍👩‍👦'.length         // 8 (3 Emoji + 2 ZWJ)
[...'👨‍👩‍👦'].length     // 5 (decomposição correta)

// Comprimento de string seguro
function safeLength(str: string): number {
  return [...str].length;
}

Como obter os últimos Emoji?

Os Emoji são atualizados anualmente (com a versão Unicode), novos Emoji requerem:

  • Atualização do sistema operacional (iOS/Android/Windows)
  • Atualização do navegador
  • Atualização de fontes (Noto Color Emoji)

Resumo

Os Emoji são parte do padrão Unicode. Compreender seus princípios de codificação (pontos de código, modificadores, sequências ZWJ) ajuda a lidar corretamente com problemas de compatibilidade multiplataforma. Pontos-chave: use utf8mb4 para armazenamento em banco de dados, use [...str] para contar caracteres e preste atenção às diferenças de exibição entre plataformas. A Ferramenta de busca de Emoji do Tools Ku permite encontrar rapidamente os Emoji que você precisa.

#Emoji#表情符号#Unicode#搜索#教程