Руководство по поиску и использованию Emoji: от кодировки Unicode до кроссплатформенной совместимости

Кодировка Unicode Emoji

Диапазоны кодировки

Диапазон	Блок Unicode	Пример
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	🪩🪫🪬

Представление кодировки

// Кодовая точка Unicode
console.log('\u{1F600}');  // 😀
console.log('\u{1F680}');  // 🚀

// Запрос кодовой точки
console.log('😀'.codePointAt(0).toString(16));  // "1f600"

// Создание из кодовой точки
String.fromCodePoint(0x1F600);  // "😀"
String.fromCodePoint(0x1F680);  // "🚀"

Длина кодировки UTF-8

// Emoji занимает 4 байта в UTF-8
new TextEncoder().encode('😀').length;  // 4

// Но .length возвращает 2 (суррогатная пара)
'😀'.length;  // 2

// Правильный подсчёт символов
[...'😀😁😂'].length;  // 3

Модификаторы тона кожи

5 тонов кожи

U+1F3FB  🏻  Светлый тон (Light Skin Tone)
U+1F3FC  🏼  Средне-светлый тон (Medium-Light)
U+1F3FD  🏽  Средний тон (Medium)
U+1F3FE  🏾  Средне-тёмный тон (Medium-Dark)
U+1F3FF  🏿  Тёмный тон (Dark)

Комбинация

Базовый Emoji + Модификатор тона кожи = Emoji с тоном кожи

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

// Комбинация в JavaScript
const base = '\u{1F468}';  // 👨
const modifier = '\u{1F3FD}';  // 🏽
const result = base + modifier;  // 👨🏽

// Разложение
[...'👨🏽'];  // ['👨', '🏽']

Последовательности соединения нулевой ширины (ZWJ)

ZWJ (U+200D) объединяет несколько Emoji в один:

👨 + ZWJ + 🏭 = 👨‍🏭  (Заводской рабочий)
👩 + ZWJ + 💻 = 👩‍💻  (Женщина-технолог)
👨 + ZWJ + ❤️ + ZWJ + 👨 = 👨‍❤️‍👨  (Мужская пара)

Семейные комбинации

👨 + ZWJ + 👩 + ZWJ + 👦 = 👨‍👩‍👦  (Семья из трёх)
👨 + ZWJ + 👨 + ZWJ + 👧 = 👨‍👨‍👧  (Два отца и дочь)

Комбинации флагов

🇨 + 🇭 = 🇨🇭  (Флаг Швейцарии)
🇯 + 🇵 = 🇯🇵  (Флаг Японии)
🇨 + 🇳 = 🇨🇳  (Флаг Китая)

Emoji флагов состоят из двух региональных индикаторов (Regional Indicator).

Кроссплатформенные различия отображения

Emoji	Apple	Google	Microsoft	Samsung	Twitter
😀	Стиль 😁	Стиль 😁	Стиль 😁	Стиль 😁	Стиль 😁
🔫	Водяной пистолет	Водяной пистолет	Настоящее оружие	Водяной пистолет	Водяной пистолет

Один и тот же Emoji выглядит по-разному на разных платформах, но кодовая точка Unicode одинакова.

Использование Emoji в коде

HTML

<!-- Прямое использование -->
<p>Добро пожаловать 🚀</p>

<!-- Unicode-экранирование -->
<p>Добро пожаловать &#x1F680;</p>

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

JavaScript

// Прямое использование (рекомендуется)
const rocket = '🚀';

// Unicode-экранирование
const rocket = '\u{1F680}';

// В строках
const message = `Развёртывание успешно ${rocket}`;

// Как ключ объекта (не рекомендуется, но возможно)
const icons = { '🚀': 'rocket', '🎨': 'art' };

Python

# Прямое использование
rocket = '🚀'

# Unicode-экранирование
rocket = '\U0001F680'

# В f-строке
message = f'Развёртывание успешно {rocket}'

Хранение в базе данных

-- MySQL: требуется кодировка utf8mb4
CREATE TABLE messages (
  content VARCHAR(500) CHARACTER SET utf8mb4
);

-- ❌ Кодировка utf8 не может хранить Emoji
-- ✅ Кодировка utf8mb4 может хранить Emoji

Поиск Emoji с помощью инструмента Tools Ku

Откройте Инструмент поиска Emoji
Введите ключевое слово (на русском или английском), например "счастье"
Просмотрите список подходящих Emoji
Нажмите, чтобы скопировать в буфер обмена
Просмотр по категориям

Примеры поиска

Ключевое слово	Результат
счастье	😄😁😆😊🥰
ракета	🚀🚁🛸
кот	🐱🐈🐈‍⬛
еда	🍕🍔🍜🍣🍰
работа	💼💻📊📋✏️

Регулярные выражения для Emoji

Сопоставление всех Emoji

// Regex для Emoji (упрощённая версия)
const emojiRegex = /\p{Emoji_Presentation}/gu;

// Более полная версия (включая модификаторы и ZWJ-последовательности)
const fullEmojiRegex = /\p{Extended_Pictographic}(\u{FE0F})?(\u{1F3FB}-\u{1F3FF})?(\u{200D}\p{Extended_Pictographic}(\u{FE0F})?(\u{1F3FB}-\u{1F3FF})?)*/gu;

// Использование
const text = 'Hello 😀 World 🚀';
const emojis = text.match(fullEmojiRegex);
// ["😀", "🚀"]

Удаление Emoji из текста

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

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

Подсчёт количества Emoji

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

Частые вопросы

Почему Emoji отображаются как квадраты □?

Шрифт не поддерживается: В системе отсутствуют шрифты Emoji
Неправильная кодировка: База данных/файл использует UTF-8 вместо UTF-8MB4
Устаревшая версия: Новые Emoji требуют более новой версии системы

Почему .length Emoji не равно 1?

'😀'.length          // 2 (суррогатная пара)
'👨🏽'.length         // 4 (база + модификатор, каждый по 2)
'👨‍👩‍👦'.length         // 8 (3 Emoji + 2 ZWJ)
[...'👨‍👩‍👦'].length     // 5 (правильное разложение)

// Безопасная длина строки
function safeLength(str: string): number {
  return [...str].length;
}

Как получить новейшие Emoji?

Emoji обновляются ежегодно (с обновлением версии Unicode), новые Emoji требуют:

Обновления операционной системы (iOS/Android/Windows)
Обновления браузера
Обновления шрифтов (Noto Color Emoji)

Итоги

Emoji являются частью стандарта Unicode. Понимание принципов их кодировки (кодовые точки, модификаторы, ZWJ-последовательности) помогает правильно решать кроссплатформенные проблемы совместимости. Ключевые моменты: используйте utf8mb4 для хранения в БД, [...str] для подсчёта символов и обращайте внимание на кроссплатформенные различия отображения. Инструмент поиска Emoji от Tools Ku позволяет быстро найти нужные Emoji.