Javascript String concat – Strings zusammenlegen
Es gibt drei Techniken, mehrere Strings miteinander zu einem neuen String zu verbinden: die klassische Konkatenation mit dem +-Operator und die String-Methode concat. Die dritte und modernste Variante sind Template Literals oder Template-Strings, die flexibel und am besten lesbar sind.
Strings zusammensetzen
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";
Template-String oder Template Literal – Strings und Ausdrücke in Backticks
ES6 (ECMAScript 6) erleichterte bereits den Umgang mit Strings, die aus Zeichenketten und Variablen bestehen: String-Template oder Template Literal beendet die Flut der Hochkommas und setzen Variablen mit einem $-Zeichen in geschweifte Klammern.
Template Strings (Backticks) sind fast immer besser als die Konkatenation mittels Pluszeichen oder concat(), weil Variablen und Ausdrücke direkt in den String einbettet werden können, und der String mehrere Zeilen umspannen darf.
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).
Backticks (``) sind heute der Standard für den Bau von komplexen Strings. Template-Strings werden von allen Browsern unterstützt.
Beispiel: Template Literals und HTML-Ausgabe mit Zeilenumbrüchen
const books = [
{ title: "Raumschiff Titanic", autor: "Douglas Adams", img: "titanic.jpg" },
{ title: "Ab die Post", autor: "Terry Pratchett", img: "ab-die-post.jpg" },
{ title: "Tim und Struppi", autor: "Hergé", img: "lotus.jpg" }
];
const html = `
<div class="books">
${books.map(user => `
<div class="card">
<h2>${user.title}</h2>
<div><img src="${user.img}" …></div>
<p>Autor: ${user.autor}</p>
</div>
`).join("")}
</div>
`;
console.log(html);
.trim() entfernt führende / abschließende Leerzeilen.
Lange literale Strings dürfen ohne +-Flut über mehrere Zeilen notiert werden. Die Zeilenumbrüche und Einrückungen bleiben erhalten. Das skalier gut bei größeren Projekten und ist genau die Standardlösung in modernen Projekten.
string concat()
Neben dem vertrauten +-Operator für das Verbinden von Strings gibt es die String-Methode concat(). concat() gilt heute als altmodisch und wird in modernen Projekten fast gar nicht mehr genutzt.
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. Und noch besser lesbar und flexibler sind Template Strings für die Konkatenation.
