String.prototype.sub() — Methode · JavaScript-Referenz

Signatur

String.prototype.sub()

Beschreibung

Die Methode sub() gehört zu den sogenannten HTML-Wrapper-Methoden von String. Sie erzeugt aus einem String wie "2" den HTML-Quelltext "2". Der ursprüngliche String bleibt unverändert, weil Strings in JavaScript unveränderlich sind.

Die Methode stammt aus der Frühzeit von JavaScript. Seit ES2015 steht sie nur noch in Annex B der Spezifikation, also bei den Funktionen, die aus Kompatibilitätsgründen erhalten bleiben. Sie gilt als veraltet. Alle Browser und Node.js unterstützen sie weiterhin, in neuem Code solltest du sie aber nicht mehr einsetzen.

Moderne Alternativen: Erzeuge das Element über die DOM-API mit document.createElement("sub") und setze den Inhalt über textContent. Oder nutze Template-Literale zusammen mit einer sauberen Maskierung. Für reine Textdarstellung ohne HTML gibt es außerdem die Unicode-Tiefstellungszeichen (z. B. ₂).

Rückgabewert

Typ

string

Beschreibung

Ein neuer String der Form str, wobei str der ursprüngliche String ist.

Beispiele

Grundlegende Verwendung

const index = "2";
console.log(index.sub());

2

Chemische Formel zusammensetzen (Legacy-Stil)

const formel = `H${"2".sub()}O`;
console.log(formel);
// Im Browser z. B.: element.innerHTML = formel;

H2O

Moderne Alternative per DOM-API

const p = document.createElement("p");
p.append("CO");
const sub = document.createElement("sub");
sub.textContent = "2"; // wird automatisch sicher maskiert
p.append(sub);
document.body.append(p);
console.log(p.outerHTML);

CO2

Fehlende Maskierung demonstrieren

const eingabe = "<b>x</b>";
console.log(eingabe.sub());

x

// Wichtig · Fallstricke

Veraltet: sub() ist nur noch in Annex B der ECMAScript-Spezifikation definiert. Sie funktioniert zwar in allen Browsern und in Node.js, Linter wie ESLint (z. B. mit unicorn-Regeln) melden sie aber häufig. Für neuen Code nicht empfohlen.
Keine Maskierung (XSS-Risiko): Der Inhalt wird unverändert zwischen die Tags gesetzt. Zeichen wie <, > oder & werden nicht maskiert. Wenn du das Ergebnis mit Benutzereingaben per innerHTML einfügst, entsteht eine Cross-Site-Scripting-Lücke. Nimm stattdessen textContent oder DOM-Knoten.
Das Ergebnis ist nur ein String und kein DOM-Element. Außerhalb eines HTML-Kontexts (z. B. in der Konsole oder in Node.js) erscheint es als roher Tag-Text.
Für die Tiefstellung per CSS gibt es vertical-align: sub. Semantisch passender ist aber meist das -Element selbst.

Siehe auch

String.prototype.sup() String.prototype.small() String.prototype.bold() String.prototype.at() String.prototype.big()