Textformatierung

Dieses Kapitel stellt vor, wie Sie mit Strings und Text in JavaScript arbeiten.

Strings

Der String-Typ von JavaScript wird verwendet, um Textdaten darzustellen. Es handelt sich um eine Reihe von "Elementen" aus 16-Bit-unsigned-Integer-Werten (UTF-16-Codeunits). Jedes Element im String hat eine Position im String. Das erste Element befindet sich bei Index 0, das nächste bei Index 1 und so weiter. Die Länge eines Strings ist die Anzahl der darin enthaltenen Elemente. Sie können Strings entweder durch String-Literale oder String-Objekte erstellen.

String-Literale

Sie können Strings im Quellcode mit einfachen oder doppelten Anführungszeichen deklarieren:

js
'foo'
"bar"

Komplexere Strings können durch Escape-Sequenzen erstellt werden:

Hexadezimale Escape-Sequenzen

Die Zahl nach \x wird als hexadezimale Zahl interpretiert.

js
"\xA9" // "©"

Unicode-Escape-Sequenzen

Die Unicode-Escape-Sequenzen erfordern mindestens vier hexadezimale Ziffern nach \u.

js
"\u00A9" // "©"

Unicode-Codepunkt-Escapes

Mit Unicode-Codepunkt-Escapes kann jedes Zeichen mit hexadezimalen Zahlen escapt werden, sodass Unicode-Codepunkte bis zu 0x10FFFF verwendet werden können. Mit den vierstelligen Unicode-Escapes ist es oft notwendig, die Surrogathälften separat zu schreiben, um das gleiche Ergebnis zu erzielen.

Siehe auch String.fromCodePoint() oder String.prototype.codePointAt().

js
"\u{2F804}"

// the same with simple Unicode escapes
"\uD87E\uDC04"

String-Objekte

Das String-Objekt ist ein Wrapper um den string-primitiven Datentyp.

js
const foo = new String("foo"); // Creates a String object
console.log(foo); // [String: 'foo']
typeof foo; // 'object'

Sie können bei einem String-Literal jeden der Methoden des String-Objekts aufrufen—JavaScript wandelt das String-Literal automatisch in ein temporäres String-Objekt um, ruft die Methode auf und verwirft dann das temporäre String-Objekt. Sie können auch die length-Eigenschaft mit einem String-Literal verwenden.

Sie sollten String-Literale verwenden, es sei denn, Sie müssen speziell ein String-Objekt verwenden, da String-Objekte unerwartetes Verhalten zeigen können. Zum Beispiel:

js
const firstString = "2 + 2"; // Creates a string literal value
const secondString = new String("2 + 2"); // Creates a String object
eval(firstString); // Returns the number 4
eval(secondString); // Returns a String object containing "2 + 2"

Ein String-Objekt hat eine Eigenschaft, length, die die Anzahl der UTF-16-Codeunits im String angibt. Zum Beispiel weist der folgende Code helloLength den Wert 13 zu, weil "Hello, World!" 13 Zeichen hat, die jeweils durch eine UTF-16-Codeunit dargestellt werden. Sie können auf jede Codeunit im Array-Bracket-Stil zugreifen. Sie können keine einzelnen Zeichen ändern, da Strings unveränderbare, array-ähnliche Objekte sind:

js
const hello = "Hello, World!";
const helloLength = hello.length;
hello[0] = "L"; // This has no effect, because strings are immutable
hello[0]; // This returns "H"

Zeichen, deren Unicode-Skalare größer sind als U+FFFF (wie einige seltene chinesische/japanische/koreanische/vietnamesische Zeichen und einige Emojis), werden in UTF-16 mit jeweils zwei Surrogat-Codeunits gespeichert. Ein String, der das einzelne Zeichen U+1F600 "Emoji lachendes Gesicht" enthält, hat beispielsweise eine Länge von 2. Der Zugriff auf die einzelnen Codeunits in einem solchen String mit eckigen Klammern kann unerwünschte Folgen haben, wie die Bildung von Strings mit nicht übereinstimmenden Surrogat-Codeunits, was gegen den Unicode-Standard verstößt. (Beispiele sollten auf dieser Seite hinzugefügt werden, nachdem der MDN-Fehler 857438 behoben ist.) Siehe auch String.fromCodePoint() oder String.prototype.codePointAt().

Ein String-Objekt hat eine Vielzahl von Methoden: zum Beispiel solche, die eine Variation des Strings selbst zurückgeben, wie substring und toUpperCase.

Die folgende Tabelle fasst die Methoden der String-Objekte zusammen.

Methoden von String

Methode Beschreibung
charAt(), charCodeAt(), codePointAt() Gibt das Zeichen oder den Zeichencode an der angegebenen Position im String zurück.
indexOf(), lastIndexOf() Gibt die Position des angegebenen Substrings im String oder die letzte Position des angegebenen Substrings zurück.
startsWith(), endsWith(), includes() Gibt zurück, ob der String mit einem angegebenen String beginnt, endet oder diesen enthält.
concat() Kombiniert den Text von zwei Strings und gibt einen neuen String zurück.
split() Teilt ein String-Objekt in ein Array von Strings, indem der String in Substrings getrennt wird.
slice() Extrahiert einen Abschnitt eines Strings und gibt einen neuen String zurück.
substring(), substr() Gibt das angegebene Teilstück des Strings zurück, entweder durch Angabe der Start- und End-Indizes oder des Start-Indizes und einer Länge.
match(), matchAll(), replace(), replaceAll(), search() Arbeiten mit regulären Ausdrücken.
toLowerCase(), toUpperCase()

Gibt den String in ganz in Klein- oder Großbuchstaben zurück.

normalize() Gibt die Unicode-Normalisierungsform des aufrufenden String-Werts zurück.
repeat() Gibt einen String zurück, der aus den wiederholten Elementen des Objekts besteht.
trim() Entfernt Leerzeichen vom Anfang und Ende des Strings.

Mehrzeilige Template-Literale

Template-Literale sind String-Literale, die eingebettete Ausdrücke erlauben. Sie können mit ihnen mehrzeilige Strings und String-Interpolation verwenden.

Template-Literale sind von Backticks (Gravis) (`) umschlossen anstatt von doppelten oder einfachen Anführungszeichen. Template-Literale können Platzhalter enthalten. Diese werden durch das Dollarzeichen und geschweifte Klammern (${expression}) angezeigt.

Mehrzeilige

Alle eingefügten Zeilenumbrüche im Quellcode sind Teil des Template-Literals. Bei normalen Strings müssten Sie folgende Syntax verwenden, um mehrzeilige Strings zu erhalten:

js
console.log(
  "string text line 1\n\
string text line 2",
);
// "string text line 1
// string text line 2"

Um den gleichen Effekt mit mehrzeiligen Strings zu erzielen, können Sie jetzt schreiben:

js
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

Eingebettete Ausdrücke

Um Ausdrücke innerhalb normaler Strings einzubetten, würden Sie folgende Syntax verwenden:

js
const five = 5;
const ten = 10;
console.log(
  "Fifteen is " + (five + ten) + " and not " + (2 * five + ten) + ".",
);
// "Fifteen is 15 and not 20."

Jetzt können Sie mit Template-Literalen syntaktischen Zucker verwenden, der solche Ersetzungen lesbarer macht:

js
const five = 5;
const ten = 10;
console.log(`Fifteen is ${five + ten} and not ${2 * five + ten}.`);
// "Fifteen is 15 and not 20."

Für weitere Informationen, lesen Sie über Template-Literale im JavaScript Reference.

Internationalisierung

Das Intl-Objekt ist der Namensraum für die ECMAScript-Internationalisierungs-API, die sprachspezifischen String-Vergleich, Zahlenformatierung und Datums- und Zeitformatierung bietet. Die Konstruktoren für Intl.Collator, Intl.NumberFormat und Intl.DateTimeFormat Objekte sind Eigenschaften des Intl-Objekts.

Datums- und Zeitformatierung

Das Intl.DateTimeFormat-Objekt ist nützlich zur Formatierung von Datum und Zeit. Folgendes formatiert ein Datum für Englisch, wie es in den Vereinigten Staaten verwendet wird. (Das Ergebnis ist in einer anderen Zeitzone unterschiedlich.)

js
// July 17, 2014 00:00:00 UTC:
const july172014 = new Date("2014-07-17");

const options = {
  year: "2-digit",
  month: "2-digit",
  day: "2-digit",
  hour: "2-digit",
  minute: "2-digit",
  timeZoneName: "short",
};
const americanDateTime = new Intl.DateTimeFormat("en-US", options).format;

// Local timezone vary depending on your settings
// In CEST, logs: 07/17/14, 02:00 AM GMT+2
// In PDT, logs: 07/16/14, 05:00 PM GMT-7
console.log(americanDateTime(july172014));

Zahlenformatierung

Das Intl.NumberFormat-Objekt ist nützlich zur Formatierung von Zahlen, zum Beispiel von Währungen.

js
const gasPrice = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 3,
});

console.log(gasPrice.format(5.259)); // $5.259

const hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec", {
  style: "currency",
  currency: "CNY",
});

console.log(hanDecimalRMBInChina.format(1314.25)); // ¥ 一,三一四.二五

Sortierung

Das Intl.Collator-Objekt ist nützlich zum Vergleichen und Sortieren von Strings.

Zum Beispiel gibt es tatsächlich zwei verschiedene Sortierordnungen in Deutsch, Telefonbuch und Wörterbuch. Die Telefonbuch-Sortierung betont den Klang, und es ist, als ob "ä", "ö" und so weiter vor dem Sortieren in "ae", "oe" usw. aufgelöst worden wären.

js
const names = ["Hochberg", "Hönigswald", "Holzman"];

const germanPhonebook = new Intl.Collator("de-DE-u-co-phonebk");

// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]:
console.log(names.sort(germanPhonebook.compare).join(", "));
// "Hochberg, Hönigswald, Holzman"

Einige deutsche Wörter konjugieren mit zusätzlichen Umlauten, also ist es in Wörterbüchern sinnvoll, die Umlaute beim Sortieren zu ignorieren (außer beim Sortieren von Wörtern, die sich nur durch Umlaute unterscheiden: schon vor schön).

js
const germanDictionary = new Intl.Collator("de-DE-u-co-dict");

// as if sorting ["Hochberg", "Honigswald", "Holzman"]:
console.log(names.sort(germanDictionary.compare).join(", "));
// "Hochberg, Holzman, Hönigswald"

Für weitere Informationen über die Intl-API, siehe auch Introducing the JavaScript Internationalization API.