Mit ES6 (oder ES2015, wenn Sie möchten) können wir Template-Strings mit Template-Literalen erstellen. Template-Literale sind Zeichenketten, in die wir Variablen und Funktionen einfügen können. Sie ermöglichen es uns, ohne Pluszeichen + zu schreiben, um Strings und Variablen zu verketten. Diese Strings verwenden ein Back-Tick ` anstelle von einfachen oder doppelten Anführungszeichen.

Variablenkonkatenation:

var name = "Josh";
var string = "Hello " + name;// output = <p>Hello Josh</p>

Vorlagenliteral mit Variable:

let name = "Josh";
let string = `Hello ${name}`;// output = <p>Hello Josh</p>

Der Unterschied ist hier die Verwendung eines Dollarzeichens und geschweifter Klammern${} um einen Variablennamen und keine Pluszeichen ${variableName} . Das macht die Verwendung von Strings und Variablen zusammen lesbarer.

Zeilenverkettung:

var string = "The quick brown fox " +
"jumps over " +
"the lazy dog";

Vorlagenliterale Zeilen:

let string = `The quick brown fox
jumps over
the lazy dog`;

Jetzt sehen wir, dass Vorlagenliterale sehr ähnlich wie Vorlagenmotoren aussehen. Sehen wir uns an, wie das aussehen könnte:

let data = { greeting: 'Hello', name: 'Josh' };
let template = `<p>${data.greeting} {data.name}</p>`;
element.innerHTML = template;// output = <p>Hello Josh</p>

Ein Vorlagenliteral fügt die Objektdaten in die Zeichenkette ein, die wir verwenden können. Wir können Variablen und Objekte verwenden, um die Daten in der Zeichenkette zu informieren. Alles, was zwischen den geschweiften Klammern steht, wird ausgewertet, von Zahlen über Bedingungen bis hin zu Funktionen.

Math:

let number = `${2 * 5}`;// output = 10

Ternäre Bedingung:

let time = 'night';
let string = `Good ${time === 'night' ? 'evening' : 'day'}, Josh`;// output = Good evening, Josh

Alles zusammengenommen könnten wir Funktionen erstellen, um wiederholte Inhalte wie ein Array zu behandeln.

Funktion: