diff options
Diffstat (limited to 'files/de/web/javascript/reference/template_literals/index.html')
| -rw-r--r-- | files/de/web/javascript/reference/template_literals/index.html | 220 |
1 files changed, 220 insertions, 0 deletions
diff --git a/files/de/web/javascript/reference/template_literals/index.html b/files/de/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..6d53234144 --- /dev/null +++ b/files/de/web/javascript/reference/template_literals/index.html @@ -0,0 +1,220 @@ +--- +title: Template-Strings +slug: Web/JavaScript/Reference/Template_literals +translation_of: Web/JavaScript/Reference/Template_literals +original_slug: Web/JavaScript/Reference/template_strings +--- +<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> |