So konvertieren Sie Text nach Gebietsschema-Regeln in Groß- oder Kleinbuchstaben

Verwenden Sie JavaScript, um die Groß- und Kleinschreibung von Text für verschiedene Sprachen und Schriftsysteme korrekt zu ändern

Einführung

Wenn Sie Text zwischen Groß- und Kleinbuchstaben konvertieren, gehen Sie möglicherweise davon aus, dass diese Operation für alle Sprachen gleich funktioniert. Das ist nicht der Fall. Verschiedene Schriftsysteme folgen unterschiedlichen Regeln für die Groß-/Kleinschreibung, und diese Regeln können unerwartete Ergebnisse liefern, wenn Sie sie nicht berücksichtigen.

JavaScript bietet die Standard-Methoden toUpperCase() und toLowerCase(), die für Englisch korrekt funktionieren, aber für andere Sprachen falsche Ergebnisse liefern können. Die gebietsschema-bewussten Methoden toLocaleUpperCase() und toLocaleLowerCase() wenden sprachspezifische Regeln für die Groß-/Kleinschreibung an und stellen sicher, dass Text unabhängig von der Sprache korrekt transformiert wird.

Diese Lektion erklärt, warum die Groß-/Kleinschreibung je nach Sprache variiert, demonstriert spezifische Probleme, die bei Standard-Methoden auftreten, und zeigt, wie Sie gebietsschema-bewusste Methoden verwenden, um die Groß-/Kleinschreibung für internationale Anwendungen korrekt zu handhaben.

Warum die Groß-/Kleinschreibung je nach Gebietsschema variiert

Die Groß- und Kleinbuchstaben-Versionen von Buchstaben sind keine universellen Konzepte, die in allen Schriftsystemen identisch funktionieren. Verschiedene Sprachen haben unterschiedliche Regeln für die Groß-/Kleinschreibung entwickelt, basierend auf ihren historischen Schreibkonventionen und typografischen Praktiken.

Im Englischen ist die Groß-/Kleinschreibung unkompliziert. Der Buchstabe i wird zu I, wenn er großgeschrieben wird, und I wird zu i, wenn er kleingeschrieben wird. Diese Beziehung gilt für das gesamte englische Alphabet.

Andere Sprachen haben komplexere Regeln. Türkisch hat vier verschiedene i-Buchstaben anstelle von zwei. Deutsch hat den Buchstaben ß (scharfes s), der spezifische Regeln für die Großschreibung hat. Griechisch hat verschiedene Formen des Buchstabens Sigma, je nachdem, ob er am Ende eines Wortes steht.

Wenn Sie Standard-JavaScript-Methoden wie toUpperCase() und toLowerCase() verwenden, folgt die Konvertierung englischen Regeln. Dies führt zu falschen Ergebnissen für Text in anderen Sprachen. Locale-aware Methoden wenden die entsprechenden Regeln für jede Sprache an und gewährleisten so eine korrekte Konvertierung.

Das türkische i-Problem

Türkisch liefert das klarste Beispiel dafür, warum Locale für die Groß-/Kleinschreibung wichtig ist. Im Gegensatz zum Englischen hat Türkisch vier verschiedene Buchstaben, die mit i verwandt sind:

  • Kleinbuchstabe i mit Punkt: i (U+0069)
  • Großbuchstabe İ mit Punkt: İ (U+0130)
  • Kleinbuchstabe ı ohne Punkt: ı (U+0131)
  • Großbuchstabe I ohne Punkt: I (U+0049)

Im Türkischen wird der Kleinbuchstabe i mit Punkt zum Großbuchstaben İ mit Punkt. Der Kleinbuchstabe ı ohne Punkt wird zum Großbuchstaben I ohne Punkt. Dies sind zwei separate Buchstabenpaare mit unterschiedlichen Aussprachen und Bedeutungen.

Standard-JavaScript-Methoden folgen englischen Regeln und konvertieren das i mit Punkt zum I ohne Punkt. Dies ändert die Bedeutung türkischer Wörter und erzeugt falschen Text.

const turkish = "istanbul";

console.log(turkish.toUpperCase());
// Output: "ISTANBUL" (incorrect - uses dotless I)

console.log(turkish.toLocaleUpperCase("tr"));
// Output: "İSTANBUL" (correct - uses dotted İ)

Der Stadtname Istanbul enthält das i-Zeichen mit Punkt. Wenn er nach türkischen Regeln in Großbuchstaben konvertiert wird, wird daraus İSTANBUL mit einem İ mit Punkt. Die Verwendung der Standard-Methode toUpperCase() erzeugt ISTANBUL mit einem I ohne Punkt, was im Türkischen falsch ist.

Das gleiche Problem tritt umgekehrt auf, wenn türkischer Text in Großbuchstaben in Kleinbuchstaben konvertiert wird.

const uppercase = "İSTANBUL";

console.log(uppercase.toLowerCase());
// Output: "i̇stanbul" (incorrect - creates i with combining dot above)

console.log(uppercase.toLocaleLowerCase("tr"));
// Output: "istanbul" (correct - produces dotted i)

Das İ mit Punkt sollte im Türkischen zum i mit Punkt werden, wenn es in Kleinbuchstaben konvertiert wird. Die Standard-Methode toLowerCase() behandelt dies nicht korrekt und kann ein Kleinbuchstaben-i mit einem kombinierenden Punktzeichen erzeugen, das ähnlich aussieht, aber technisch falsch ist.

Weitere gebietsschemaspezifische Groß- und Kleinschreibungsregeln

Türkisch ist nicht die einzige Sprache mit speziellen Regeln für die Groß- und Kleinschreibung. Mehrere andere Sprachen erfordern eine gebietsschemaspezifische Behandlung.

Deutsch hat den Buchstaben ß (scharfes s), der traditionell keine Großbuchstabenform hatte. Im Jahr 2017 fügte Unicode das Großbuchstabenzeichen ẞ hinzu, aber viele Systeme konvertieren ß immer noch zu SS bei der Umwandlung in Großbuchstaben.

const german = "Straße";

console.log(german.toUpperCase());
// Output: "STRASSE" (converts ß to SS)

console.log(german.toLocaleUpperCase("de"));
// Output: "STRASSE" (also converts ß to SS)

Beide Methoden erzeugen in den meisten JavaScript-Umgebungen das gleiche Ergebnis für deutschen Text. Der Locale-Parameter ändert die Ausgabe nicht, aber die Verwendung der gebietsschemabewussten Methode stellt sicher, dass Ihr Code korrekt bleibt, falls sich die Unicode-Behandlung in zukünftigen Implementierungen ändert.

Griechisch hat drei verschiedene Formen des Buchstabens Sigma. Die Kleinbuchstabenform verwendet σ in der Mitte von Wörtern und ς am Ende von Wörtern. Beide Formen werden in das gleiche Großbuchstaben-Σ umgewandelt.

Litauisch hat spezielle Regeln für gepunktete Buchstaben. Der Buchstabe i behält seinen Punkt, wenn er mit bestimmten diakritischen Zeichen kombiniert wird, selbst wenn er in Großbuchstaben umgewandelt wird. Dies beeinflusst, wie die gebietsschemabewussten Methoden bestimmte Zeichenkombinationen behandeln.

Verwendung von toLocaleUpperCase für gebietsschemabewusste Großbuchstabenkonvertierung

Die Methode toLocaleUpperCase() konvertiert eine Zeichenkette in Großbuchstaben unter Verwendung gebietsschemaspezifischer Regeln für die Groß- und Kleinschreibung. Sie rufen sie auf einer Zeichenkette auf und übergeben optional eine Gebietsschema-Kennung als Argument.

const text = "istanbul";

const result = text.toLocaleUpperCase("tr");
console.log(result);
// Output: "İSTANBUL"

Dies konvertiert die Zeichenkette in Großbuchstaben unter Verwendung türkischer Regeln. Das gepunktete i wird zum gepunkteten İ, was für Türkisch korrekt ist.

Sie können denselben Text mit unterschiedlichen Gebietsschemaregeln konvertieren.

const text = "istanbul";

console.log(text.toLocaleUpperCase("tr"));
// Output: "İSTANBUL" (Turkish rules - dotted İ)

console.log(text.toLocaleUpperCase("en"));
// Output: "ISTANBUL" (English rules - dotless I)

Der Locale-Parameter bestimmt, welche Regeln für die Groß- und Kleinschreibung angewendet werden. Türkische Regeln bewahren den Punkt auf dem i, während englische Regeln dies nicht tun.

Wenn Sie toLocaleUpperCase() ohne Argumente aufrufen, wird das System-Locale verwendet, das von der JavaScript-Laufzeitumgebung bestimmt wird.

const text = "istanbul";

const result = text.toLocaleUpperCase();
console.log(result);
// Output depends on system locale

Die Ausgabe hängt vom Standard-Locale der JavaScript-Umgebung ab, das in der Regel den Betriebssystemeinstellungen des Benutzers entspricht.

Verwendung von toLocaleLowerCase für locale-bewusste Kleinschreibungskonvertierung

Die Methode toLocaleLowerCase() konvertiert einen String in Kleinbuchstaben unter Verwendung locale-spezifischer Groß-/Kleinschreibungsregeln. Sie funktioniert genauso wie toLocaleUpperCase(), konvertiert jedoch in Kleinbuchstaben statt in Großbuchstaben.

const text = "İSTANBUL";

const result = text.toLocaleLowerCase("tr");
console.log(result);
// Output: "istanbul"

Dies konvertiert den türkischen Großbuchstabentext in Kleinbuchstaben unter Verwendung türkischer Regeln. Das gepunktete İ wird zum gepunkteten i und erzeugt die korrekte Kleinschreibungsform.

Ohne den Locale-Parameter können die Standard-Methoden toLowerCase() oder toLocaleLowerCase() mit Standard-Locale-Einstellungen türkische Zeichen möglicherweise nicht korrekt verarbeiten.

const text = "İSTANBUL";

console.log(text.toLowerCase());
// Output: "i̇stanbul" (incorrect - i with combining dot above)

console.log(text.toLocaleLowerCase("tr"));
// Output: "istanbul" (correct - dotted i)

Das türkische gepunktete İ erfordert türkische Groß-/Kleinschreibungsregeln für eine korrekte Konvertierung. Die Verwendung der locale-bewussten Methode mit dem Locale tr gewährleistet eine korrekte Konvertierung.

Sie können auch das punktlose I im Türkischen verarbeiten, das bei der Kleinschreibung punktlos bleiben sollte.

const text = "IRAK";

console.log(text.toLocaleLowerCase("tr"));
// Output: "ırak" (Turkish rules - dotless ı)

console.log(text.toLocaleLowerCase("en"));
// Output: "irak" (English rules - dotted i)

Das Wort IRAK (Irak auf Türkisch) verwendet das punktlose I. Türkische Groß-/Kleinschreibungsregeln konvertieren es in das kleingeschriebene punktlose ı, während englische Regeln es in das gepunktete i konvertieren.

Angabe von Locale-Identifikatoren

Sowohl toLocaleUpperCase() als auch toLocaleLowerCase() akzeptieren Locale-Identifikatoren im BCP-47-Format. Dies sind dieselben Sprach-Tags, die in der gesamten Intl-API und anderen Internationalisierungsfunktionen verwendet werden.

const text = "Straße";

console.log(text.toLocaleUpperCase("de-DE"));
// Output: "STRASSE"

console.log(text.toLocaleUpperCase("de-AT"));
// Output: "STRASSE"

console.log(text.toLocaleUpperCase("de-CH"));
// Output: "STRASSE"

Diese Beispiele verwenden verschiedene deutsche Locales für Deutschland, Österreich und die Schweiz. Groß-/Kleinschreibungsregeln sind in der Regel über regionale Varianten derselben Sprache hinweg konsistent, sodass alle drei dieselbe Ausgabe erzeugen.

Sie können auch ein Array von Locale-Identifikatoren übergeben. Die Methode verwendet die erste Locale im Array.

const text = "istanbul";

const result = text.toLocaleUpperCase(["tr", "en"]);
console.log(result);
// Output: "İSTANBUL"

Die Methode wendet türkische Regeln an, da tr die erste Locale im Array ist. Wenn die Laufzeitumgebung die erste Locale nicht unterstützt, greift sie auf nachfolgende Locales im Array zurück.

Verwendung der Locale-Einstellungen des Browsers

In Webanwendungen können Sie die Locale-Einstellungen des Browsers des Benutzers verwenden, um zu bestimmen, welche Regeln für die Groß- und Kleinschreibung angewendet werden sollen. Die Eigenschaft navigator.language gibt die bevorzugte Sprache des Benutzers zurück.

const userLocale = navigator.language;

const text = "istanbul";
const result = text.toLocaleUpperCase(userLocale);

console.log(result);
// Output varies by user's locale
// For Turkish users: "İSTANBUL"
// For English users: "ISTANBUL"

Dies wendet automatisch die korrekten Groß- und Kleinschreibungsregeln basierend auf den Spracheinstellungen des Benutzers an. Türkische Benutzer sehen Text, der mit türkischen Regeln konvertiert wurde, englische Benutzer sehen Text, der mit englischen Regeln konvertiert wurde, und so weiter.

Sie können auch das gesamte Array der Locale-Einstellungen übergeben, um ein Fallback-Verhalten zu ermöglichen.

const text = "istanbul";
const result = text.toLocaleUpperCase(navigator.languages);

console.log(result);

Die Methode verwendet die erste Locale aus den Einstellungen des Benutzers und bietet eine bessere Fallback-Behandlung, wenn bestimmte Locales nicht verfügbar sind.

Vergleich von Standard- und Locale-bewussten Methoden

Die Standardmethoden toUpperCase() und toLowerCase() funktionieren für Englisch korrekt, können aber bei anderen Sprachen versagen. Die Locale-bewussten Methoden toLocaleUpperCase() und toLocaleLowerCase() behandeln alle Sprachen korrekt, indem sie Locale-spezifische Regeln anwenden.

const turkish = "Diyarbakır";

// Standard methods (incorrect for Turkish)
console.log(turkish.toUpperCase());
// Output: "DIYARBAKIR" (dotless I - incorrect)

console.log(turkish.toUpperCase().toLowerCase());
// Output: "diyarbakir" (dotted i - lost the dotless ı)

// Locale-aware methods (correct for Turkish)
console.log(turkish.toLocaleUpperCase("tr"));
// Output: "DİYARBAKIR" (dotted İ and dotless I - correct)

console.log(turkish.toLocaleUpperCase("tr").toLocaleLowerCase("tr"));
// Output: "diyarbakır" (preserves both i types - correct)

Der türkische Stadtname Diyarbakır enthält beide Arten von i. Standardmethoden können diese Unterscheidung beim Konvertieren zwischen Groß- und Kleinschreibung nicht beibehalten. Locale-bewusste Methoden erhalten die korrekten Zeichen in beide Richtungen.

Für Text, der nur Zeichen mit einfachen Groß- und Kleinschreibungsregeln enthält, liefern beide Ansätze identische Ergebnisse.

const english = "Hello World";

console.log(english.toUpperCase());
// Output: "HELLO WORLD"

console.log(english.toLocaleUpperCase("en"));
// Output: "HELLO WORLD"

Englischer Text wird mit beiden Methoden gleich konvertiert. Die locale-bewusste Version ist für rein englischen Text nicht erforderlich, aber ihre Verwendung stellt sicher, dass Ihr Code korrekt funktioniert, wenn der Text andere Sprachen enthält.

Wann locale-bewusste Groß-/Kleinschreibungskonvertierung verwendet werden sollte

Verwenden Sie locale-bewusste Methoden bei der Arbeit mit nutzergenerierten Inhalten oder Text, der mehrere Sprachen enthalten kann. Dies gewährleistet eine korrekte Groß-/Kleinschreibungskonvertierung unabhängig davon, welche Sprache der Text enthält.

function normalizeUsername(username) {
  return username.toLocaleLowerCase();
}

Benutzernamen, E-Mail-Adressen, Suchbegriffe und andere Benutzereingaben sollten locale-bewusste Konvertierung verwenden. Dies behandelt internationale Zeichen korrekt und verhindert Probleme mit Türkisch und anderen Sonderfällen.

Verwenden Sie Standardmethoden nur dann, wenn Sie wissen, dass der Text ausschließlich englische Zeichen enthält und Sie maximale Performance benötigen. Standardmethoden werden etwas schneller ausgeführt, da sie keine Locale-Regeln prüfen müssen.

const htmlTag = "<DIV>";
const normalized = htmlTag.toLowerCase();
// Output: "<div>"

HTML-Tag-Namen, CSS-Eigenschaften, Protokollschemata und andere technische Bezeichner verwenden ASCII-Zeichen und erfordern keine Locale-Bewusstheit. Standardmethoden funktionieren für diesen Inhalt korrekt.

Wie sich die Zeichenlänge nach der Konvertierung ändern kann

Groß-/Kleinschreibungskonvertierung ist nicht immer eine Eins-zu-eins-Zeichenzuordnung. Einige Zeichen expandieren bei der Konvertierung in Großbuchstaben zu mehreren Zeichen, was die String-Länge beeinflusst.

const german = "groß";

console.log(german.length);
// Output: 4

const uppercase = german.toLocaleUpperCase("de");
console.log(uppercase);
// Output: "GROSS"

console.log(uppercase.length);
// Output: 5

Das deutsche Wort groß hat vier Zeichen. Bei der Konvertierung in Großbuchstaben wird das ß zu SS, wodurch GROSS mit fünf Zeichen entsteht. Die String-Länge erhöht sich während der Konvertierung um ein Zeichen.

Dies beeinflusst Operationen, die von der String-Länge oder Zeichenpositionen abhängen. Gehen Sie nicht davon aus, dass die groß- oder kleingeschriebene Version eines Strings dieselbe Länge wie das Original hat.

const text = "Maße";
const positions = [0, 1, 2, 3];

const uppercase = text.toLocaleUpperCase("de");
// "MASSE" (5 characters)

// Original position mapping no longer valid

Das ß an Position 2 wird in der Großschreibung zu SS, wodurch alle nachfolgenden Zeichen verschoben werden. Zeichenpositionen aus der ursprünglichen Zeichenkette entsprechen nicht den Positionen in der konvertierten Zeichenkette.

Wiederverwendung von Locale-Parametern

Wenn Sie mehrere Zeichenketten mit derselben Locale konvertieren müssen, können Sie die Locale-Kennung in einer Variablen speichern und wiederverwenden. Dies macht Ihren Code wartbarer und stellt eine konsistente Locale-Behandlung sicher.

const userLocale = navigator.language;

const city = "istanbul";
const country = "türkiye";

console.log(city.toLocaleUpperCase(userLocale));
console.log(country.toLocaleUpperCase(userLocale));

Dieser Ansatz hält die Locale-Auswahl an einer Stelle. Wenn Sie ändern müssen, welche Locale Sie verwenden, müssen Sie nur die Variablendefinition aktualisieren.

Für Anwendungen, die große Textmengen verarbeiten, bietet dies keinen Performance-Vorteil. Jeder Aufruf von toLocaleUpperCase() oder toLocaleLowerCase() führt die Konvertierung unabhängig durch. Im Gegensatz zu den Intl-API-Formatierern gibt es kein Formatter-Objekt zur Wiederverwendung.