JavaScript/Objekte/String

Die Eigenschaften und Methoden des Objektes String können Sie auf alle Zeichenketten - oder Strings - anwenden.

Der Begriff String hat in JavaScript zwei Bedeutungen:

• einer der primitiven Datentypen, zur Darstellung von Zeichenketten
• ein globales Objekt zur Handhabung von Zeichenketten

Der JavaScript-Programmierer verwendet im Normalfall immer den primitiven Datentyp. Das String-Objekt existiert in JavaScript vor allem als Funktion, die Werte in Zeichenketten konvertieren kann, und um Zeichenketten bei Bedarf wie Objekte zu behandeln und die Methoden von String.prototype anwenden zu können.

Eigenschaften

• length (Anzahl Zeichen)

Methoden der String-Konstruktorfunktion

• String.fromCharCode()
• String.fromCodePoint()
• String.raw()

Methoden von String.prototype

• at() (Zeichen an einer Position ermitteln)
• charAt() (Zeichen an einer Position ermitteln)
• charCodeAt() (UTF-16-Zeicheneinheit an einer Position)
• codePointAt() (Unicode-Zeichen an einer Position)
• concat() (Zeichenketten zusammenfügen)
• constructor (Verweis zum String-Konstruktor)
• endsWith() (Ende der Zeichenkette vergleichen)
• fromCharCode() (UTF-16-Zeicheneinheit erzeugen)
• includes() (Prüfen ob Zeichenkette enthalten ist)
• indexOf() (Position einer Zeichenkette ermitteln)
• lastIndexOf() (letzte Position eines Zeichens ermitteln)
• localeCompare() (vergleichen)
• match() (Regulären Ausdruck anwenden)
• matchAll() (Regulären Ausdruck anwenden)
• normalize() (Unicodezeichen normalisieren)
• padEnd() (Zeichenkette am Ende auffüllen)

• padStart() (Zeichenkette am Anfang auffüllen)
• repeat() (Zeichenkette vermehrfachen)
• replace() (Regulären Ausdruck anwenden und ersetzen)
• replaceAll() (Regulären Ausdruck anwenden und ersetzen)
• search() (Suchen mit Regulärem Ausdruck)
• slice() (Teil aus Zeichenkette extrahieren)
• split() (Zeichenkette aufsplitten)
• startsWith() (Anfang der Zeichenkette vergleichen)
• substring() (Teilzeichenkette ermitteln)
• toLocaleLowerCase() (alles klein schreiben)
• toLocaleUpperCase() (alles groß schreiben)
• toLowerCase() (alles klein schreiben)
• toUpperCase() (alles groß schreiben)
• trim() (Leerzeichen entfernen)
• trimEnd() (Leerzeichen am Ende entfernen)
• trimStart() (Leerzeichen am Anfang entfernen)

Kompatibilitätsmethoden (nur in Browsern)

• anchor(name)
• big()
• blink()
• bold()
• fixed()
• fontcolor()
• fontsize()
• italics()

• link(url)
• small()
• strike()
• substr()
• sub()
• sup()
• trimLeft()
• trimRight()

Beachten Sie: Die aufgelisteten Kompatibilitätsmethoden stammen aus der Zeit vor dem ECMAScript-Standard. Auf Grund ihrer Verbreitung listet der Standard sie in Anhang B als erforderliche Sprachergänzungen in Webbrowsern auf. Sie gelten als obsolet und sollten nicht mehr verwendet werden.

Der einfache Datentyp String

Ein einfacher (primitiver) String wird mit einem so genannten String-Literal erzeugt:

Stringliterale

let einfach = 'string1';
let doppelt = "string2";

let backticks = `string3`;

Dabei ist es egal, ob Sie doppelte oder einfache Anführungszeichen verwenden. Eine in Backticks (rückwärts geneigte Hochkommas) eingeschlossene Zeichenkette wird ebenfalls als String gespeichert, allerdings haben Backticks die erweiterte Funktion, ein Template-Literal zu bilden.

Template-Literale

Bei Template-Literalen handelt es sich um String-Literale mit der zusätzlichen Funktion, Variableninhalte einfach einbauen zu können.

Variable in einem Template-Literal

const name = "Gustav";
const gruß = `Hallo ${name}, wie geht es Dir?`;

Hauptartikel: [[JavaScript/Objekte/String/template-literal|]]

Zeichenketten, näher betrachtet

Ein String stellt in JavaScript ein gegen Veränderung geschütztes, Array-artiges Objekt dar. Die Zeichen, aus denen der String besteht, lassen sich mit dem Index-Operator [] einzeln ansprechen:

Beispiel

    const name = 'Hans';
    console.log(name[0]);      // Ausgabe 'H'
    console.log(name[1]);      // Ausgabe 'a'
    console.log(name[2]);      // Ausgabe 'n'
    console.log(name[3]);      // Ausgabe 's'

Das Beispiel definiert eine Konstante namens name und weist ihr den String "Hans" zu. Anschließend werden die einzelnen Zeichen von name auf die Konsole ausgegeben, jedes in eine neue Zeile. Wie in Arrays und arrayartigen Objekten üblich, hat das erste Zeichen die Position 0.

Außer den Zeichenpositionen hat jeder String noch eine Eigenschaft length, die die Anzahl der im String gespeicherten Zeichen angibt:

Beispiel ansehen …

function überprüfen() {
  var ort = 'Friedrichshafen';
  var ergebnis = (ort + ' hat ' + ort.length + ' Buchstaben.');
  ausgabe(ergebnis);
}

Im Beispiel wird eine Variable ort definiert, der ein Wert zugewiesen wird, nämlich der Wert Friedrichshafen. Anschließend wird in einem Meldungsfenster ausgegeben: Friedrichshafen hat 15 Buchstaben. Dies geschieht durch einen Aufruf der Objekteigenschaft String.length. Vor dem Punkt kann also eine Variable oder auch irgendeine andere JavaScript-Objekteigenschaft stehen, in der eine Zeichenkette gespeichert ist. Hinter dem Punkt folgt die gewünschte Eigenschaft oder Methode des String-Objekts.

Welches Begrenzungszeichen verwenden?

Welches Begrenzungszeichen Sie verwenden, ist zunächst einmal gleichgültig. Es wird nur dann wichtig, wenn in der Zeichenkette selbst solche vorkommen. Sie haben dann die Möglichkeit, die Zeichenkette mit einem anderen Begrenzungszeichen einzuschließen. Für den Fall, dass Sie tatsächlich alle drei Begrenzungszeichen in einem String-Literal verwenden müssen, hilft Ihnen die Maskierung mit einem Backslash weiter:

Beispiel

tag1 = '<div class="cont">';
tag2 = "<div class=\"cont\">";

Auch mit String('text') wird ein einfacher String erzeugt.

Bei sehr langen Strings möchte man diese manchmal über mehrere Zeilen notiert im Quelltext haben. Dies ist prinzipiell in Javascript möglich, indem der Zeilenumbruch einfach mit \ entwertet wird:

Beispiel

var liste = '<ol>\
<li>First</li>\
<li>Second</li>\
</ol>';

Ergebnis ist <ol><li>First</li><li>Second</li></ol>.

Dieser Ansatz hat den Nachteil, dass er Fehler erlaubt, die man kaum feststellen kann. Im Gegensatz zu obigem Beispiel verursacht folgendes einen Laufzeitfehler. Um das Problem erkennbar zu machen, wurden Farben gesetzt:

Beispiel

var liste = '<ol>\ 
<li>First</li>\
<li>Second</li>\
</ol>'; 

Sehen Sie die zusätzliche Leerstelle am Ende der letzten Zeile? Sie bewirkt, dass das \ das Leerzeichen maskiert und nicht den Zeilenumbruch.

Um einen String auf mehrere Zeilen aufzuteilen, ist es daher empfehlenswerter, dies mittels des String-Verkettungs-Operators + (concatenate) zu tun:

Beispiel

const liste = '<ol>' +
              '<li>First</li>' +
              '<li>Second</li>' +
              '</ol>';

Oder so

const liste = '<ol>'
            + '<li>First</li>'
            + '<li>Second</li>'
            + '</ol>';

Oder mit Hilfe eines Arrays und der join-Methode

const liste = [ "<ol>",
                "<li>First</li>",
                "<li>Second</li>",
                "</ol>" // nach dem letzten Element kein Komma!
              ].join("");

Wenn die Zeilenumbrüche Teil der Zeichenkette sein dürfen, können Sie auch ein Template-Literal verwenden:

const liste = `<ol>
<li>First</li>",
<li>Second</li>",
</ol>`;

Strings, Zeichen und Unicode

Strings werden intern entsprechend der ECMAScript-Spezifikation als Unicode-Zeichenfolge im UTF-16-Format dargestellt und von der JavaScript-Engine als ein Array von 16-bit Integerwerten behandelt. Die Unicode-Zeichen der Ebene 0, oder Basic Multilingual Plane, lassen sich so durch einen einzelnen Wert darstellen.

Die Zeichen der Unicode-Ebenen 1-16 müssen dagegen durch ein Paar aus zwei 16-bit Zeichen, den sogenannten Surrogatzeichen, codiert werden. Das Problem daran ist, dass JavaScript ursprünglich die UCS-2 Codierung verwendete, wobei es sich im Prinzip um UTF-16 ohne Surrogatzeichen handelt, und deshalb die Surrogatpaare als zwei separate Zeichen auffasst. Wenn Sie also beispielsweise die Länge des Strings "Hallo 😀 Welt" mit Hilfe der length-Methode ermitteln, erhalten Sie die das Ergebnis 13, weil 😀 in UTF-16 als Surrogatpaar dargestellt werden muss.

Die einzigen Stringoperationen in JavaScript, die von Surrogatzeichen wissen, sind String.fromCodePoint, String.protoype.codePointAt sowie die RegExp Klasse, sofern das u-Flag verwendet wird.

Strings verketten

Strings können mit dem +-Operator miteinander verkettet werden. Das Ergebnis der Verkettung ist ein neuer String, der die Zeichen aus beiden Strings enthält.

Beispiel

const t1 = "Hallo",
      t2 = "Welt";
const t3 = t1 + " " + t2; // "Hallo Welt"

Das String-Objekt

Sobald ein einfacher String-Wert wie ein Objekt verwendet wird, wandelt JavaScript ihn intern in ein String-Objekt um. Dadurch werden die von String.prototype bereitgestellten und an das String-Objekt vererbte Methoden nutzbar. Ein String-Objekt kann durch Verwendung des new-Operators, also durch new String, auch direkt erzeugt werden - was aber nur in Ausnahmefällen erforderlich ist (lesen Sie dazu den Abschnitt über Wrapper-Objekte im Artikel Datentyp).

Beispiel

let str = 'text';
let strObj = new String(str);
console.log('str ist vom Typ', typeof str);       // Ausgabe: str ist vom Typ string
console.log('strObj ist vom Typ', typeof strObj); // Ausgabe: strObj ist vom Typ object
console.log('Der Vergleich von str und strObj ergibt', str == strObj);   // true!
console.log('Der strenge Vergleich ergibt aber', str === strObj);       // false!

Es ist ein Irrtum, zu glauben, dass ein mit new String() erzeugtes String-Objekt einen Performance-Vorteil gegenüber dem primitiven String hätte. Die Überlegung könnte sein, dass das Umwandeln des primitiven Strings in ein String-Objekt, das für jeden Methodenaufruf notwendig ist, unnötig Zeit kostet. Es ist aber gerade anders herum. Der Zugriff auf primitive Strings ist in JavaScript hoch optimiert und die Verwendung von String-Objekten ist deutlich langsamer als primitve Strings.

Siehe auch

• JavaScript/Tutorials/Grundlagen von Strings und Arrays

Weblinks

• ECMAScript 2022 (ECMA-262, 13. Ausgabe):
  • String-Objekte
  • String-Ergänzungen für Browser-Kompatibilität
• MDN: String

ECMAScript: Strings