JavaScript Template

Template Strings

Mit Vorlagenliteralen (Vorlagenzeichenfolgen) können Sie Zeichenfolgen oder eingebettete Ausdrücke in Form einer Zeichenfolge verwenden. Sie sind in Backticks eingeschlossen.

	const name = 'Jon';
console.log(Hello ${name}!); // Hello Jon!
	

			
	
			

		
	

Hinweis:Template literal wurde 2015 eingeführt (auch bekannt als ECMAScript 6 oder ES6 oder ECMAScript 2015). Einige Browser unterstützen möglicherweise nicht die Verwendung von Vorlagenliteralen. Weitere Informationen finden Sie unter JavaScript Template Literal support.

JavaScript String InterPolation

Template Literals für Strings

In den früheren Versionen von JavaScript verwendeten Sie ein einfaches Anführungszeichen oder ein doppeltes Anführungszeichen für Zeichenfolgen. Zum Beispiel'' oder ""

	const str1 = 'This is a string';

// cannot use the same quotes
const str2 = 'A "quote" inside a string';  // valid code
const str3 = 'A 'quote' inside a string';  // Error
const str4 = "Another 'quote' inside a string"; // valid code
const str5 = "Another "quote" inside a string"; // Error
	

			
	
			

		
	

Um dieselben Anführungszeichen innerhalb der Zeichenfolge zu verwenden, können Sie das Escapezeichen verwenden.

	// escape characters using 
const str3 = 'A 'quote' inside a string';  // valid code
const str5 = "Another "quote" inside a string"; // valid code
	

			
	
			

		
	

Anstelle von Escapezeichen können Sie Vorlagenliterale verwenden. Zum Beispiel

	const str1 = This is a string;
const str2 = This is a string with a 'quote' in it;
const str3 = This is a string with a "double quote" in it;
	

			
	
			

		
	

Wie Sie sehen können, machen die Vorlagenliterale es nicht nur einfach, Zitate einzuschließen, sondern lassen unseren Code auch sauberer aussehen.

Mehrzechsige Zeichenfolgen mit Vorlagenliteralen

Vorlagenliterale erleichtern auch das Schreiben von mehrzechnigen Zeichenfolgen. Zum Beispiel

Mithilfe von Vorlagenliteralen können Sie

JavaScript Multiline String

	// using the + operator
const mess = 'This is a long messagen' + 
'that spans across multiple linesn' + 
'in the code.'

console.log(mess)
	

			
	
			

		
	

mit

	const mess = `This is a long message
that spans across multiple lines
in the code.`

console.log(mess)
	

			
	
			

		
	

js multiline string

Die Ausgabe dieser beiden Programme ist die gleiche.

	This is a long message
that spans across multiple lines
in the code.
	

			
	
			

		
	

Ausdrucksinterpolation

Vor JavaScript ES6 würden Sie den Operator verwenden, um Variablen und Ausdrücke in einer Zeichenfolge zu verketten. Zum Beispiel +

	const name = 'Jon';
console.log('Hello ' + name); // Hello Jon
	

			
	
			

		
	

Mit Vorlagenliteralen ist es etwas einfacher, Variablen und Ausdrücke in eine Zeichenfolge aufzunehmen. Dafür verwenden wir die Syntax.${...}

String Interpolation

	const name = 'Jon';
console.log(Hello ${name});

// template literals used with expressions

const result = The sum of  3 + 4 is ${3 + 4};
console.log(result);

console.log(${result < 10 ? 'Ja': 'Nein'})
	

			
	
			

		
	

Ausgabe

	Hello Jon
The sum of  3 + 4 is 7
Nein
	

			
	
			

		
	

Das Zuweisen von Variablen und Ausdrücken innerhalb des Vorlagenliterals wird als Interpolation bezeichnet.

Verschlagwortete Vorlagen

Normalerweise würden Sie eine Funktion verwenden, um Argumente zu übergeben. Zum Beispiel

	function tagExample(strings) {
    return strings;
}

// passing argument
const result = tagExample('Hello Jon');

console.log(result);
	

			
	
			

		
	

Sie können jedoch mithilfe von Vorlagenliteralen mit Tags (die sich wie eine Funktion verhalten) mit Tags erstellen. Sie verwenden Tags, mit denen Sie Vorlagenliterale mit einer Funktion analysieren können.

Die getaggte Vorlage wird wie eine Funktionsdefinition geschrieben. Sie übergeben jedoch keine Klammern, wenn Sie das Literal aufrufen. Zum Beispiel()

	function tagExample(strings) {
    return strings;
}

// creating tagged template
const result = tagExampleHello Jon;

console.log(result);
	

			
	
			

		
	

Ausgabe

	["Hello Jon"]
	

			
	
			

		
	

Ein Array von Zeichenfolgenwerten wird als erstes Argument einer Tag-Funktion übergeben. Sie können die Werte und Ausdrücke auch als die verbleibenden Argumente übergeben. Zum Beispiel

	const name = 'Jon';
const greet = true;

function tagExample(strings, nameValue) {
    let str0 = strings[0]; // Hello
    let str1 = strings[1]; // , How are you?

    if(greet) {
        return ${str0}${nameValue}${str1};
    }
}

// creating tagged literal
// passing argument name
const result = tagExampleHello ${name}, How are you?;

console.log(result);
	

			
	
			

		
	

Ausgabe

	Hello Jon, How are you?
	

			
	
			

		
	

Auf diese Weise können Sie auch mehrere Argumente in der getaggten temaplate übergeben.

Referenzen

• Template Strings