Guía de búsqueda y uso de Emoji: desde la codificación Unicode hasta la compatibilidad multiplataforma

Texto

Codificación Unicode de Emoji

Rangos de codificación

Rango Bloque Unicode Ejemplo
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 🪩🪫🪬

Representación de codificación

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

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

// Crear desde punto de código
String.fromCodePoint(0x1F600);  // "😀"
String.fromCodePoint(0x1F680);  // "🚀"

Longitud de codificación UTF-8

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

// Pero .length devuelve 2 (par sustituto)
'😀'.length;  // 2

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

Modificadores de tono de piel

5 tonos de piel

U+1F3FB  🏻  Tono claro (Light Skin Tone)
U+1F3FC  🏼  Tono medio-claro (Medium-Light)
U+1F3FD  🏽  Tono medio (Medium)
U+1F3FE  🏾  Tono medio-oscuro (Medium-Dark)
U+1F3FF  🏿  Tono oscuro (Dark)

Combinación

Emoji base + Modificador de tono de piel = Emoji con tono de piel

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

// Combinación en JavaScript
const base = '\u{1F468}';  // 👨
const modifier = '\u{1F3FD}';  // 🏽
const result = base + modifier;  // 👨🏽

// Descomposición
[...'👨🏽'];  // ['👨', '🏽']

Secuencias de unión de ancho cero (ZWJ)

ZWJ (U+200D) combina múltiples Emoji en uno:

👨 + ZWJ + 🏭 = 👨‍🏭  (Trabajador de fábrica)
👩 + ZWJ + 💻 = 👩‍💻  (Mujer tecnóloga)
👨 + ZWJ + ❤️ + ZWJ + 👨 = 👨‍❤️‍👨  (Pareja de hombres)

Combinaciones familiares

👨 + ZWJ + 👩 + ZWJ + 👦 = 👨‍👩‍👦  (Familia de tres)
👨 + ZWJ + 👨 + ZWJ + 👧 = 👨‍👨‍👧  (Dos papás y una hija)

Combinaciones de banderas

🇨 + 🇭 = 🇨🇭  (Bandera de Suiza)
🇯 + 🇵 = 🇯🇵  (Bandera de Japón)
🇨 + 🇳 = 🇨🇳  (Bandera de China)

Los Emoji de banderas están compuestos por dos indicadores regionales (Regional Indicator).

Diferencias de visualización multiplataforma

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

El mismo Emoji tiene aspecto diferente en distintas plataformas, pero el punto de código Unicode es el mismo.

Recomendaciones para evitar malentendidos

  1. Evitar Emoji ambiguos: 🔫 (arma/pistola de agua), 🍆 (verdadera/insinuación)
  2. Probar visualización multiplataforma: Usa la Herramienta de búsqueda de Emoji para ver la renderización en diferentes plataformas
  3. Usar con moderación en contextos profesionales: Evitar en correos/documentos formales
  4. Precaución con secuencias combinadas: Las secuencias ZWJ pueden mostrarse como múltiples Emoji independientes en sistemas antiguos

Usar Emoji en código

HTML

<!-- Uso directo -->
<p>Bienvenido 🚀</p>

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

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

JavaScript

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

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

// En cadenas
const message = `Despliegue exitoso ${rocket}`;

// Como clave de objeto (no recomendado, pero posible)
const icons = { '🚀': 'rocket', '🎨': 'art' };

Python

# Uso directo
rocket = '🚀'

# Escape Unicode
rocket = '\U0001F680'

# En f-string
message = f'Despliegue exitoso {rocket}'

Almacenamiento en base de datos

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

-- ❌ El conjunto de caracteres utf8 no puede almacenar Emoji
-- ✅ El conjunto de caracteres utf8mb4 puede almacenar Emoji

Buscar Emoji con la herramienta de Tools Ku

  1. Abre la Herramienta de búsqueda de Emoji
  2. Ingresa una palabra clave (en español o inglés) como "feliz"
  3. Consulta la lista de Emoji coincidentes
  4. Haz clic para copiar al portapapeles
  5. Navega por categorías

Ejemplos de búsqueda

Palabra clave Resultado
feliz 😄😁😆😊🥰
cohete 🚀🚁🛸
gato 🐱🐈🐈‍⬛
comida 🍕🍔🍜🍣🍰
trabajo 💼💻📊📋✏️

Expresiones regulares para Emoji

Coincidir todos los Emoji

// Regex para Emoji (versión simplificada)
const emojiRegex = /\p{Emoji_Presentation}/gu;

// Versión más completa (incluye modificadores y secuencias 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);
// ["😀", "🚀"]

Eliminar Emoji del texto

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

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

Contar cantidad de Emoji

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

Preguntas frecuentes

¿Por qué los Emoji se muestran como cuadros □?

  • Fuente no soportada: El sistema carece de fuentes Emoji
  • Conjunto de caracteres incorrecto: La base de datos/archivo usa UTF-8 en lugar de UTF-8MB4
  • Versión antigua: Los nuevos Emoji requieren una versión más reciente del sistema

¿Por qué .length de un Emoji no es 1?

'😀'.length          // 2 (par sustituto)
'👨🏽'.length         // 4 (base + modificador, cada uno ocupa 2)
'👨‍👩‍👦'.length         // 8 (3 Emoji + 2 ZWJ)
[...'👨‍👩‍👦'].length     // 5 (descomposición correcta)

// Longitud de cadena segura
function safeLength(str: string): number {
  return [...str].length;
}

¿Cómo obtener los últimos Emoji?

Los Emoji se actualizan anualmente (con la versión Unicode), los nuevos Emoji requieren:

  • Actualización del sistema operativo (iOS/Android/Windows)
  • Actualización del navegador
  • Actualización de fuentes (Noto Color Emoji)

Resumen

Los Emoji son parte del estándar Unicode. Comprender sus principios de codificación (puntos de código, modificadores, secuencias ZWJ) ayuda a manejar correctamente los problemas de compatibilidad multiplataforma. Puntos clave: usa utf8mb4 para almacenar en bases de datos, usa [...str] para contar caracteres y presta atención a las diferencias de visualización entre plataformas. La Herramienta de búsqueda de Emoji de Tools Ku te permite encontrar rápidamente los Emoji que necesitas.

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