W3docs

Unicode in JavaScript verstehen: Flags und Klassen

JavaScript-Regex-Flag „u" für korrekte Code-Point- und Surrogatpaar-Behandlung sowie Unicode-Eigenschafts-Escapes \p{...} und \P{...} zum Abgleichen von Buchstaben, Zahlen, Schriften und Emoji. Mit ausführbaren Beispielen.

Einführung in Unicode

JavaScript unterstützt Unicode, einen Zeichenkodierungsstandard, der die Darstellung von Text aus verschiedenen Sprachen und Schriften ermöglicht. Unicode ist für die Entwicklung internationalisierter Anwendungen und die effektive Verarbeitung vielfältiger Textdaten unverzichtbar. In diesem Kapitel werden wir Unicode-Flags und -Klassen in JavaScript erkunden, ihre Verwendung untersuchen und praktische Beispiele bereitstellen, um das Verständnis zu vertiefen.

Das Unicode-Flag u

Das u-Flag aktiviert die vollständige Unicode-Erkennung in regulären Ausdrücken. Standardmäßig behandelt ein Regex einen string als Folge von UTF-16-Codeeinheiten. Zeichen außerhalb der Basic Multilingual Plane (BMP) — Emoji, viele mathematische Symbole und seltenere Schriften — werden als Surrogatpaar gespeichert: zwei Codeeinheiten, die zusammen einen Code-Point kodieren. Ohne das u-Flag sieht die Regex-Engine diese beiden Hälften getrennt, was dazu führt, dass ., Zeichenbereiche und Quantoren für solche Zeichen falsch funktionieren.

Mit gesetztem u-Flag arbeitet die Engine auf Basis von Code-Points statt Codeeinheiten, sodass ein einzelnes astrales Zeichen als ein Zeichen gezählt wird.

Surrogatpaare und warum das Flag wichtig ist

. passt auf ein einzelnes Zeichen. Ohne u passt es nur auf eine Codeeinheit und kann daher kein vollständiges astrales Zeichen allein abgleichen.

javascript— editable

😀 ist das Surrogatpaar für 😀. String#length gibt 2 zurück, weil es Codeeinheiten zählt, während das Aufteilen des Strings in ein array (das nach Code-Points iteriert) 1 ergibt. Ohne u schlägt /^.$/ fehl, weil . nur eine der beiden Hälften abgleicht; mit u wird das vollständige Zeichen abgeglichen.

Verwendung des u-Flags

javascript— editable

Hier ist 👍 das Daumen-hoch-Emoji. Ohne das u-Flag kann der Regex a.b nicht übereinstimmen, weil . nur eine Hälfte des Surrogatpaars verarbeitet. Mit dem u-Flag verarbeitet . den gesamten Code-Point, sodass das Muster übereinstimmt.

Zeichen korrekt zählen

Ein u-gekennzeichneter Regex mit dem g-Flag ermöglicht die Iteration über echte Zeichen, auch astrale.

javascript— editable

Das u-Flag mit anderen Flags kombinieren

Das u-Flag lässt sich mit anderen Flags kombinieren. Dieses Beispiel fügt global (g) und Groß-/Kleinschreibung ignorierend (i) hinzu.

javascript— editable

Dieses Beispiel zeigt die Kombination des u-Flags mit dem global (g) und dem Groß-/Kleinschreibung ignorierenden (i) Flag. Der Regex gleicht A👍b korrekt ab und veranschaulicht, wie das u-Flag zusammen mit anderen Flags für flexibleres Matching verwendet werden kann.

Unicode-Eigenschafts-Escapes: \p{...} und \P{...}

Unicode-Eigenschafts-Escapes bieten eine Möglichkeit, Zeichen anhand ihrer Unicode-Eigenschaften abzugleichen. Dieses in ECMAScript 2018 eingeführte Feature erleichtert die Arbeit mit bestimmten Zeichentypen.

Syntax der Unicode-Eigenschafts-Escapes

  • \p{Property=Value}: Gleicht Zeichen mit der angegebenen Eigenschaft ab.
  • \P{Property=Value}: Gleicht Zeichen ohne die angegebene Eigenschaft ab.

Häufige Unicode-Eigenschaften

Bei einbuchstabigen allgemeinen Kategorien kann der Eigenschaftsname direkt geschrieben werden: \p{L} ist eine Kurzform für \p{General_Category=Letter}.

  1. Allgemeine Kategorie: Gleicht Zeichen anhand ihrer allgemeinen Kategorie ab.
    • \p{L} (Letter): Gleicht jeden Buchstaben in jeder Schrift ab.
    • \p{N} (Number): Gleicht jedes numerische Zeichen ab.
    • \p{P} (Punctuation): Gleicht Satzzeichen ab.
    • \p{Lu} / \p{Ll}: Groß- / Kleinbuchstaben.
  2. Script: Gleicht Zeichen ab, die einem Schriftsystem angehören.
    • \p{Script=Greek} (oder \p{sc=Greek}): Griechische Zeichen.
    • \p{Script=Han}: Han-Zeichen (Chinesisch, Japanisch, Koreanisch).
    • \p{Script=Cyrillic}: Kyrillische Zeichen.
  3. Binäre Eigenschaften: Gleichen Zeichen ab, die ein bestimmtes Merkmal aufweisen.
    • \p{Emoji}, \p{Emoji_Presentation}: Emoji-Zeichen.
    • \p{White_Space}: Leerzeichen.

Die Großbuchstabenform \P{...} ist die Negation — sie gleicht alle Zeichen ab, die die Eigenschaft nicht haben. Für eine ausführlichere Beschreibung der [...]-Form siehe Zeichenklassen.

Beispiele für Unicode-Eigenschafts-Escapes

javascript— editable

Hier gleicht \p{L} jeden Buchstaben ab. Der Regex \p{L}+ findet alle Buchstabenfolgen im string 'Hello123' und gibt ["Hello"] zurück.

javascript— editable

In diesem Beispiel gleicht \p{N} jede Zahl ab. Der Regex \p{N}+ extrahiert alle Zahlenfolgen aus dem string 'Hello123' und liefert ["123"].

javascript— editable

\P{L} ist das Gegenteil von \p{L}, daher erfasst \P{L}+ die Abschnitte, die keine Buchstaben enthalten — hier "123!".

javascript— editable

Dieses Beispiel verwendet \p{Script=Greek} zum Abgleichen griechischer Zeichen. Der Regex gleicht den griechischen string 'αβγδε' erfolgreich ab.

Emoji abgleichen

Da \p{...} das u-Flag erfordert, werden auch astrale Emoji korrekt behandelt — jedes Emoji wird als einzelnes Zeichen betrachtet.

javascript— editable
Warnung

Die Verwendung von Unicode-Eigenschafts-Escapes kann die Performance beeinträchtigen, insbesondere bei großen Textmengen. Optimieren Sie Ihre regulären Ausdrücke und testen Sie ihre Performance in Ihrem spezifischen Anwendungsfall.

Praktische Anwendungen

Benutzereingaben validieren

Unicode-Eigenschafts-Escapes können Benutzereingaben präziser validieren und sicherstellen, dass nur erlaubte Zeichen akzeptiert werden.

javascript— editable

Dieser Regex stellt sicher, dass ein gültiger Benutzername mit mindestens zwei Buchstaben beginnt, gefolgt von einer beliebigen Kombination aus Buchstaben und Zahlen. 'User123' besteht die Validierung, während '123User' es nicht tut.

Bestimmte Zeichen extrahieren

Mit Unicode-Eigenschafts-Escapes können bestimmte Zeichentypen aus einem string extrahiert werden.

javascript— editable

In diesem Beispiel gleicht \p{L}+ alle Buchstabenfolgen im string 'Hello, κόσμε!' ab und gibt ["Hello", "κόσμε"] zurück.

Info

Das u-Flag immer mit Unicode-Eigenschafts-Escapes verwenden

Wenn Sie Unicode-Eigenschafts-Escapes verwenden, aktivieren Sie immer das u-Flag, um eine korrekte Übereinstimmung zu gewährleisten. Ohne dieses Flag werfen Eigenschafts-Escapes einen SyntaxError.

javascript— editable

Fazit

Das Verständnis und die Nutzung von Unicode in JavaScript sind entscheidend für die Entwicklung robuster, internationalisierter Anwendungen. Durch den Einsatz des u-Flags und von Unicode-Eigenschafts-Escapes können vielfältige Textdaten effektiver verarbeitet und präzise Zeichenübereinstimmungen erzielt werden. Integrieren Sie diese Techniken in Ihre Projekte, um deren Funktionalität zu verbessern und sicherzustellen, dass sie globalen Standards entsprechen.

Übung

Übung
Was ändert das Flag 'u' in JavaScript-regulären Ausdrücken?
Was ändert das Flag 'u' in JavaScript-regulären Ausdrücken?
Was this page helpful?