1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
---
title: Template-Strings
slug: Web/JavaScript/Reference/template_strings
translation_of: Web/JavaScript/Reference/Template_literals
---
<div>{{JsSidebar("More")}}</div>
<p>Template-Strings sind {{jsxref("String", "String-Symbole")}}, die über mehrere Zeilen gehende Zeichenketten sowie eingebettete Javascript-Ausdrücke ermöglichen.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`
tag `string text ${expression} string text`
</pre>
<h2 id="Beschreibung">Beschreibung</h2>
<p>Template-Strings sind anstelle von doppelten bzw. einfachen Anführungszeichen in zwei Akzente Gravis <code>`</code> (Französisch: accent grave, Englisch: backtick) eingeschlossen.</p>
<p>Sie können Platzhalter beinhalten, die durch das Dollarsymbol gefolgt von geschweiften Klammern gekennzeichnet sind (<code>${expression}</code>). Auf diese Weise dienen sie als Vorlagen (Englisch: template), die, zentral definiert, während des Programmablaufs an verschiedenen Stellen individuell eingesetzt werden können.</p>
<p>Die Ausdrücke in den Platzhaltern sowie der Text selbst können an eine optionale Funktion übergeben werden. Falls vor dem Template-String ein Ausdruck vorhanden ist (hier als <code>tag</code> bezeichnet), wird der Template-String „Tagged Template String“ genannt. In diesem Fall wird der <code>tag</code>-Ausdruck (üblicherweise eine Funktion) mit dem verarbeiteten Template-String aufgerufen, um den Text vor der Ausgabe zu bearbeiten.</p>
<p>Ein Gravis kann in einen Template-String durch Maskieren mit dem Rückstrich <code>\</code> eingefügt werden:</p>
<pre class="brush: js">`\`` === '`' // --> true</pre>
<h4 id="Der_Gravis_und_das_einfache_Anführungszeichen">Der Gravis und das einfache Anführungszeichen</h4>
<p>Der Gravis befindet sich auf deutschen Tastaturen rechts neben dem ß und ist nur zusammen mit der Hochstelltaste und einer anschließenden Betätigung der Leertaste zu erreichen.</p>
<p>Das Zeichen wird gelegentlich mit dem einfachen Anführungszeichen <code>'</code> verwechselt; dieses befindet sich rechts neben dem Ä.</p>
<p>Im normalen Sprachgebrauch wird es meist zusammen mit den Tasten e oder a genutzt um è bzw. à zu schreiben, analog zur Notwendigkeit einer zusätzlichen Betätigung der Leertaste für ` alleine.</p>
<h3 id="Mehrzeilige_Zeichenketten">Mehrzeilige Zeichenketten</h3>
<p>In normale Zeichenketten sind Zeilenumbrüche nur durch Einfügen der Sequenz <code>\n</code> zu erreichen:</p>
<pre class="brush: js">console.log("string text line 1\nstring text line 2");
// Ausgabe:
// string text line 1
// string text line 2
// Identische Ausgabe, jedoch deutlicher durch Trennung:
console.log("string text line 1\n" +
"string text line 2");
</pre>
<p>Das gleiche Ergebnis kann mit Template-Strings einfacher und übersichtlicher erreicht werden, indem der Text so, wie er erscheinen soll, über mehrere Zeilen geschrieben wird:</p>
<pre class="brush: js">console.log(`string text line 1
string text line 2`);
// Ausgabe:
// string text line 1
// string text line 2</pre>
<h3 id="Ausdrücke_in_Zeichenketten">Ausdrücke in Zeichenketten</h3>
<p id="Um_Ausdrücke_in_normale_Strings_einzufügen_müsste_die_folgende_Syntax_genutzt_werden">Um Javascript-Ausdrücke in normale Strings einzufügen, müsste die folgende Syntax genutzt werden:</p>
<pre class="brush: js">var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// Ausgabe:
// Fifteen is 15 and
// not 20.</pre>
<p>Mit Template-Strings können nun die syntaktischen Vorteile genutzt werden um solche Ersetzungen leserlicher zu machen:</p>
<pre class="brush: js">var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// Ausgabe:
// Fifteen is 15 and
// not 20.</pre>
<h3 id="Verschachtelte_Vorlagen">Verschachtelte Vorlagen</h3>
<p>Das Verschachteln von Template-Strings ist manchmal die einfachste und lesbarste Möglichkeit, konfigurierbare Vorlagen zu erhalten, denn auch innerhalb von <code>${ }</code> können Template-Strings verwendet werden</p>
<p>Die nachfolgenden drei Beispiele haben eine identische Funktion:</p>
<p>ECMAScript 5:</p>
<pre class="brush: js">let classes = 'header';
classes += (isLargeScreen() ?
'' : item.isCollapsed ?
' icon-expander' : ' icon-collapser');
</pre>
<p>Eine nicht verschachtelte Vorlage mit ECMAScript 2015:</p>
<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
(item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</pre>
<p>Verschachtelte Vorlage mit ECMAScript 2015:</p>
<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
`icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;</pre>
<h3 id="Tagged_Template-Strings">Tagged Template-Strings</h3>
<p>Eine erweiterte Form der Template-Strings sind <em>Tagged</em> Template-Strings. Mit ihnen kann die Ausgabe von Template-Strings mit einer Funktion ändern.</p>
<p>Das erste Argument enthält ein Array von Strings ("Hello" und "world" in diesem Beispiel). Alle Argumente nach dem ersten sind die Werte der verarbeiteten (manchmal auch <em>cooked </em>genannt, „vorgekocht“) Ausdrücke (hier: "15" und "50").</p>
<p>Im folgenden Beispiel heißt die Funktion <code>tag</code>, was aber keinen besonderen Grund hat, da sie jeden gewünschten Namen haben kann.</p>
<pre class="brush: js">var a = 5;
var b = 10;
function tag(strings, ...values) {
console.log(strings[0]); // "Hello "
console.log(strings[1]); // " world "
console.log(values[0]); // 15
console.log(values[1]); // 50
return "Bazinga!";
}
tag`Hello ${ a + b } world ${ a * b}`;
// "Bazinga!"
</pre>
<p>Tag-Funktionen müssen keinen String zurückgeben, wie das folgende Beispiel zeigt.</p>
<pre class="brush: js line-numbers language-js"><code class="language-js">function template(strings, ...keys) {
return (function(...values) {
var dict = values[values.length - 1] || {};
var result = [strings[0]];
keys.forEach(function(key, i) {
var value = Number.isInteger(key) ? values[key] : dict[key];
result.push(value, strings[i + 1]);
});
return result.join('');
});
}
var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A'); // "YAY!"
</code><code>var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'}); // "Hello World!"</code>
</pre>
<h3 id="Raw_Strings">Raw Strings</h3>
<p>Die Eigenschaft raw, verfügbar für das erste Argument eines Tagged Template-Strings, erlaubt den Zugriff auf den unverarbeiteten String, also ohne <a href="/de/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings">Escape-Sequenzen</a> auszuwerten.</p>
<pre class="brush: js"><code class="language-js">function tag(strings, ...values) {
console.log(strings.raw[0]);
// "string text line 1 \\n string text line 2"
}
tag`string text line 1 \n string text line 2`;
</code></pre>
<p>Zusätzlich exisitert die Methode {{jsxref("String.raw()")}} um unverarbeitete Strings zu erstellen, genauso wie sie die vorgegebene Template-Funktion und String-Verknüpfung erstellen würde.</p>
<pre class="brush: js"><code class="language-js">String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"
str.length;
// 6
str.split('').join(',');
// "H,i,\,n,5,!"
</code></pre>
<h2 id="Sicherheit">Sicherheit</h2>
<p>Template-Strings <strong>SOLLTEN NIEMALS </strong>von Nutzern erstellt werden, denen nicht vertraut werden kann, da diese Zugriff auf Variablen und Funktionen haben.</p>
<pre class="brush: js"><code class="language-js">`${console.warn("this is",this)}`; // "this is" Window
let a = 10;
console.warn(`${a+=20}`); // "30"
console.warn(a); // 30
</code></pre>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-template-literals', 'Template Literals')}}</td>
<td>{{Spec2('ES6')}}</td>
<td>Erste Definition. Definiert in mehreren Abschnitten der Spezifikation: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-template-literals">Template Literals</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates">Tagged Templates</a></td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{Compat("javascript.grammar.template_literals")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{jsxref("String")}}</li>
<li>{{jsxref("String.raw()")}}</li>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
<li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Template-like strings in ES3 compatible syntax</a></li>
<li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">"ES6 in Depth: Template strings" on hacks.mozilla.org</a></li>
</ul>
|
