Emoji-Zeichen in JavaScript in Unicode umwandeln

Emojis sind keine einfachen Zeichen, sondern Teil der Supplementary Planes von Unicode. Das Verständnis der JavaScript-Verarbeitung ist wichtig für Stringlängen, Datenbanken und plattformübergreifende Darstellung.

Das Problem: Warum .length täuscht

JavaScript-Zeichenfolgen sind UTF-16-kodiert. Standardzeichen wie „A“ oder „☃“ liegen in der Basic Multilingual Plane (BMP) und benötigen eine 16-Bit-Einheit. Moderne Emojis wie 😀 liegen in den ergänzenden Ebenen und werden durch zwei 16-Bit-Einheiten, ein Ersatzpaar, dargestellt.

'A'.length;    // 1 (BMP)
'☃'.length;    // 1 (BMP)
'😀'.length;    // 2 (Supplementary Plane – Ersatzpaar)
'👨‍👩‍👧‍👦'.length; // 11 (siehe „ZWJ“ weiter unten)

Lösung 1: codePointAt()

Vor ES6 lieferte charCodeAt() nur die erste Hälfte eines Ersatzpaars. codePointAt() erkennt die vollständige 32-Bit-Unicode-Nummer:

const emoji = '😀';
console.log(emoji.codePointAt(0)); // 128512
console.log(emoji.codePointAt(0).toString(16)); // "1f600"

Lösung 2: String.fromCodePoint()

Mit String.fromCodePoint() wird eine Unicode-Zahl wieder in ein sichtbares Emoji umgewandelt:

String.fromCodePoint(128512); // "😀"
String.fromCodePoint(0x1F600); // "😀"
String.fromCodePoint(0x1F1FA, 0x1F1F8); // "🇺🇸"

Mehrere Zeichen umwandeln

Der Spread-Operator [...] ist für Einsteiger besonders nützlich, weil er Unicode-Zeichen nicht in ihre Ersatzteile zerlegt:

1. Von Zeichenfolgen zu Zahlen (Kodierung)

const text = "Hi 😀 🚀";
const decimals = [...text].map(char => char.codePointAt(0));
const hexCodes = [...text].map(char => '0x' + char.codePointAt(0).toString(16));

2. Von Zahlen zu Zeichenfolgen (Dekodierung)

Mit String.fromCodePoint(...zahlen) kannst du eine solche Liste wieder in Text umwandeln:

const zahlen = [128512, 128640, 9731];
const result = String.fromCodePoint(...zahlen);
console.log(result); // "😀🚀☃"

3. Eine einfache Schleife verwenden

const input = "🍎🍊";
for (const char of input) {
  const hex = char.codePointAt(0).toString(16);
  console.log(`Zeichen: ${char} -> Unicode: U+${hex.toUpperCase()}`);
}

Komplexe Emojis: Zero Width Joiner

Manche Emojis sehen wie ein einzelnes Zeichen aus, bestehen aber aus mehreren Unicode-Punkten, die durch einen Zero Width Joiner (ZWJ, U+200D) verbunden sind. Das Familien-Emoji 👨‍👩‍👧‍👦 besteht beispielsweise aus Mann, ZWJ, Frau, ZWJ, Mädchen, ZWJ und Junge.

Verwende den Spread-Operator oder Array.from(), um solche Sequenzen Unicode-bewusst zu durchlaufen.

const complexEmoji = '👨‍👩‍👧‍👦';
const points = [...complexEmoji];
console.log(points);
// ["👨", "‍", "👩", "‍", "👧", "‍", "👦"]

Praktische Anwendungsfälle

1. Datenbankspeicherung: Verwende für 4-Byte-Zeichen wie Emojis utf8mb4.
2. Eingabelimits: Zähle Codepunkte mit [...str].length statt str.length.
3. Eigene Text-Renderer: Hilfreich für Canvas-Spiele und performante UI-Komponenten.

Interaktives Werkzeug

Für häufige Konvertierungen kannst du den Online-Unicode- und Emoji-Konverter verwenden. Er wandelt Text in Echtzeit zwischen Text, Hex, CSS- und JavaScript-Escape-Sequenzen um.

Online-Unicode-Konverter ausprobieren →