diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:45:38 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:45:38 +0100 |
commit | 4ab365b110f2f1f2b736326b7059244a32115089 (patch) | |
tree | c3c7c0219f728ade49a78c238c51cc0c8d06ebd6 /files/de/web/javascript/reference/template_strings | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-4ab365b110f2f1f2b736326b7059244a32115089.tar.gz translated-content-4ab365b110f2f1f2b736326b7059244a32115089.tar.bz2 translated-content-4ab365b110f2f1f2b736326b7059244a32115089.zip |
unslug de: move
Diffstat (limited to 'files/de/web/javascript/reference/template_strings')
-rw-r--r-- | files/de/web/javascript/reference/template_strings/index.html | 219 |
1 files changed, 0 insertions, 219 deletions
diff --git a/files/de/web/javascript/reference/template_strings/index.html b/files/de/web/javascript/reference/template_strings/index.html deleted file mode 100644 index 54885ed5a3..0000000000 --- a/files/de/web/javascript/reference/template_strings/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -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> |