aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/javascript/reference/template_strings
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:45:38 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:45:38 +0100
commit4ab365b110f2f1f2b736326b7059244a32115089 (patch)
treec3c7c0219f728ade49a78c238c51cc0c8d06ebd6 /files/de/web/javascript/reference/template_strings
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-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.html219
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">`\`` === '`' // --&gt; 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>