Strings zusammenfügen
Das Zusammenfügen oder anhängen – konkatenieren – von Strings ist die wichtigste Stringoperation – z.B. um zwei Strings in einen String zu packen oder einen langen String in kürzere Strecken zu teilen, damit er besser lesbar ist.
Das »+«-Zeichen verbindet Strings miteinander. Das Verfahren wird auch als Konkatenation bezeichnet und das »+«-Zeichen als Operator der Konkatenation. Seine Operanden sind zwei Strings.
const vorname = "Donald";
const nachname = "Duck";
const name = vorname + " " + nachname;
console.log (name); // Ausgabe: Donald Duck
console.log (name) gibt Donald Duck aus – und zwar ohne die Hochkommas, die im Skript nur dazu dienen, den String vom Rest des Skriptcodes zu trennen.
In der Mitte steht ein literales Leerzeichen (literal: „wörtlich“, weil nicht durch eine Variable dargestellt, sondern direkt notiert). Jede Mischung aus literalen Strings und Variablen ist erlaubt:
const vorname = "Donald"; const name = vorname + " " + "Duck";
Und es geht noch kürzer:
let name = "Donald"; name += " Duck";
Immer die Hochkamms prüfen! Falsch gesetzte Hochkommas passieren auch den besten Programmierern immer wieder.
Steht innerhalb einer Zeichenkette eine Variable, so wird sie nicht ausgewertet, sondern als Teil des Strings angesehen. Damit eine Variable innerhalb des Strings ausgewertet wird, muss sie durch den +-Operator von den umgebenden Zeichen getrennt werden.
const preis = 17; const prod = "T-Shirts " + preis + " €";
string concat ()
Neben dem vertrauten +-Operator für das Verbinden von Strings gibt es die String-Methode concat ().
const last = "Miau";
var first = "Wuff";
result = last.concat (" Muh ", " Gack Gack ", first, , parseInt(17.9));
Der + bzw. += -Operator ist i.d.R. die schnellere Technik. Überhaupt gilt allgemein, dass Funktionen langsamer als Operatoren sind.
Template Strings oder Template Literale
Erst ES6 (ECMAScript 6) erleichtert den Umgang mit Strings, die aus Zeichenketten und Variablen bestehen: Template Strings oder Template Literals beenden die Flut der Hochkommas und setzen Variablen mit einem $-Zeichen in geschweifte Klammern.
let pro = `T-Shirts ${preis} €`;
Nur aufpassen bei Template Literals: Rundherum sitzen keine Hochkommas, weder einfache noch doppelte, sondern Backticks wie beim à (Accent Grave oder Gravis).
Template Strings werden von allen immergrünen Browsern unterstützt, nur nicht von IE11.
Zeilenumbruch im String
Lange literale Strings dürfen über mehrere Zeilen notiert werden:
let gedicht = "Als es klingelte, nachts," + "es war kurz vor halb zehn," + "wurde niemand erwartet und niemand gesehen.";
Seit ECMAScript 5 dürfen Strings auch ohne "+"-Zeichen umgebrochen werden.
let gedicht1 = "Als es klingelte, nachts, \ es war kurz vor halb zehn, "; let gedicht2 = "Als es klingelte, nachts, \ es war kurz vor halb zehn, ";
Die zweite Zeile führt zu einem Fehler, denn hinter dem Backslash sitzt ein Leerzeichen. Firefox meldet SyntaxError: unterminated string literal[Weitere Informationen], Chrome bezeichnet den Fehler als Uncaught SyntaxError: Invalid or unexpected token.
Diese Schreibweise ist kaum eine empfehlenswerte Technik, zumal die folgenden Zeilen immer am linken Rand anfangen müssen. Werden die Folgezeilen schön eingerückt, entstehen dicke Lücken im String.
Der Zeilenumbruch, der den Code lesbarer gestaltet, wird bei der Ausgabe einer Zeichenkette nicht berücksichtigt.
offer.innerHTML = "T-Shirt „Emmi“ Stck 12,50 € " +
"T-Shirt „Loll“ Stck 10,l2 €";
T-Shirt „Emmi“ Stck 12,50 € T-Shirt „Loll“ Stck 10,l2 €
Strings, Zahlen und das +
Der +-Operator ist doppelt belegt und kann sowohl die Konkatenation von Strings als auch die Addition von Zahlen veranlassen. Wenn der JavaScript-Interpreter ein +-Symbol erspäht, muss er also eine Entscheidung treffen, ob er Zahlen addieren oder Strings konkatenieren soll.
Wenn einer der beiden Operanden eine Zahl ist und der andere Operand ein String, erzeugt die Konkatenation einen String. Wenn beide Operanden Zahlen sind, wird das „+“-Zeichen zu einem Additions-Operator.
2 + 2 // ist eine Addition und ergibt die Zahl 4 2 + "2" // ist eine Konkatenation und ergibt den String "22" "2" + "2" // ist eine Konkatenation und ergibt den String "22" 2 + 2 + "2" // ist eine Addition gefolgt von einer Konkatenation // und ergibt den String "42"
Zu klassischen Fehlern kommt es immer wieder, wenn ein Skript versucht, Zahlenwerte und Strings zu addieren. Zu den Fallen gehören die Werte aus Formularfeldern, die der Javascript-Interpreter immer als Strings behandelt, auch wenn das Eingabefeld die Eingabe von Zahlen erfordert.
Die Methoden parseInt () und parseFloat () konvertieren Strings in ganze Zahlen bzw. Fließkommazahlen.
parseInt("2") + parseInt("2") // ergibt 4
parseInt("2") + 2 // ergibt 4
Zeilenumbrüche in br konvertieren
Wer PHP programmiert hat, wird in der Liste der Methoden des String-Objekts vergeblich nach einer Methode wie nl2br suchen. nl2br nimmt einen String, der z.B. durch eine Benutzereingabe in einer Textarea entstanden ist, und ersetzt die unterschiedlichen Escape-Sequenzen für den Zeilenumbruch (\n bei Unix, \r\n bei Windows und \r bei Mac OS) der Betriebssysteme durch das <br>-Tag.
// Windows: Zeilenumbruch \r\n let userText = "Montag,\r\nDienstag\r\nMittwoch und\r\nFreitag"; // Unix: Zeilenumbruch \n let userText = "Montag,\nDienstag\nMittwoch und\nFreitag";
<script>
function newLineBreak() {
let htmlString = this.replace(/(\r\n)|(\r)|(\n)/g, '<br>');
return( htmlString);
}
String.prototype.nl2br = newLineBreak;
</script>
Die Funktion newLineBreak() nimmt den String, auf den sie angewendet wird und ersetzt die Escape-Sequenzen durch den String '<br>' – das ist schon alles, was in newEcho() passiert.
Die letzte Anweisung fügt die Funktion dem Prototypen des String-Objekts als neue Methode hinzu String.prototype.nl2br = newLineBreak;.
prototype erweitert das String-Objekt und damit den primitiven Datentyp string durch neue Methoden und Eigenschaften.
Die neue Methode ist jetzt sowohl für das String-Objekt als auch für den primitiven Datentyp string verfügbar:
Montag,<br>Dienstag<br>Mittwoch und<br>Freitag