diff options
Diffstat (limited to 'files/nl/web/javascript/reference/template_literals/index.html')
| -rw-r--r-- | files/nl/web/javascript/reference/template_literals/index.html | 254 |
1 files changed, 254 insertions, 0 deletions
diff --git a/files/nl/web/javascript/reference/template_literals/index.html b/files/nl/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..ed698025ba --- /dev/null +++ b/files/nl/web/javascript/reference/template_literals/index.html @@ -0,0 +1,254 @@ +--- +title: Template literals +slug: Web/JavaScript/Reference/Template_literals +translation_of: Web/JavaScript/Reference/Template_literals +--- +<div>{{JsSidebar("More")}}</div> + +<p><em>Template literals </em>zijn strings met daar binnengesloten een expressie. Ze zijn te gebruiken met meerdere regels, en ook met <em>string interpolation</em>, ook een kenmerk van Javascript. Ze werden in eerdere versies dan ES2015 ook wel "template strings" genoemd.</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="Beschrijving">Beschrijving</h2> + +<p><em>Template literals</em> beginnen en eindigen met een <em>back tick</em>, het accent grave symbool (` `) (<a href="http://en.wikipedia.org/wiki/Grave_accent">grave accent</a>) in plaats van de gewone aanhalingstekens (" ") of apostrof (' '). <em>Template literals</em> kunnen bestaan uit <em>placeholders</em>. Deze worden aangegeven met een dollar-teken en vervolgens accolades (<code>${expression}</code>). De expressie en tekst tussen de accolades worden doorgegeven aan een functie. The default functie plaatst alle delen achter elkaar. Als er een expressie voor de <em>template literal</em> staat, wordt de template string een <em>tagged template literal genoemd</em>. In dat geval wordt de expressie binnen de <em>template literal</em> doorgegeven aan de expressie (meestal een functie) zodat de template literal nog verder aangepast kan worden voordat de literal wordt weergegeven of doorgegeven.</p> + +<pre class="brush: js"><code>let value = dummy`Ik ben ${name} en ik ben ${age} jaar`; + +function dummy() { + let str = ""; + strings.forEach((string, i) => { + str += string + values[i]; + }); + return str; +} +</code></pre> + +<p>Om een <em>back-tick</em> in een template literal te gebruiken, moet er een backslash (<strong>\</strong>) voor de <em>back-tick</em> gebruikt worden (<em>escaping</em>).</p> + +<pre class="brush: js">`\`` === '`' // --> true</pre> + +<h3 id="Meerdere_regels">Meerdere regels</h3> + +<p>Any new line characters inserted in the source are part of the template literal. Using normal strings, you would have to use the following syntax in order to get multi-line strings:</p> + +<p>Wordt binnen de template literal een nieuwe regel begonnen, dan maakt die regelopvoer deel uit van de template literal. Dit is anders dan met een gewone string; daar moet '\n' gebruikt worden om een string over meerdere regels toe te passen:</p> + +<pre class="brush: js">console.log('string text line 1\n' + +'string text line 2'); +// "string text line 1 +// string text line 2"</pre> + +<p>Bij een template literal kan '\n' weggelaten worden:</p> + +<pre class="brush: js">console.log(`string text line 1 +string text line 2`); +// "string text line 1 +// string text line 2"</pre> + +<h3 id="Expression_interpolation">Expression interpolation</h3> + +<p>Als er gerekend moet worden binnen een normale string, moet dat op de volgende manier gecodeerd worden:</p> + +<pre class="brush: js">var a = 5; +var b = 10; +console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.'); +// "Fifteen is 15 and +// not 20."</pre> + +<p>Met een template literal hoeft dat niet; de expressie kan tussen de accolades gezet worden. Dat verbetert de leesbaarheid:</p> + +<pre class="brush: js">var a = 5; +var b = 10; +console.log(`Fifteen is ${a + b} and +not ${2 * a + b}.`); +// "Fifteen is 15 and +// not 20."</pre> + +<h3 id="Nesting_templates">Nesting templates</h3> + +<p>Soms kan de leebaarheid vergroot worden door <em>template literals</em> binnen een andere <em>template literal</em> te gebruiken (nesting). Met andere woorden, binnen de <code>${ }</code> mag ook weer een <em>template literal</em>, voorzien van <em>back-ticks</em> gebruikt worden. Bijvoorbeeld:</p> + +<p>In ES5:</p> + +<pre class="brush: js">var classes = 'header' +classes += (isLargeScreen() ? + '' : item.isCollapsed ? + ' icon-expander' : ' icon-collapser'); +</pre> + +<p>In ES2015 met <em>template literals</em>, zonder <em>nesting</em>:</p> + +<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' : + (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</pre> + +<p>In ES2015 nu met <em>nested template literals</em>:</p> + +<pre class="brush: js">const classes = `header $<strong>{</strong> isLargeScreen() ? '' : + `icon-${item.isCollapsed ? 'expander' : 'collapser'}`<strong> </strong><strong>}`</strong>;</pre> + +<h3 id="Tagged_template_literals">Tagged template literals</h3> + +<p>Een geavanceerde vorm van template literals zijn de <em>tagged</em> template literals. Hiermee kan de template literal verder gemanipuleerd worden in een functie. De eerste parameter van de <em>tag </em>functie is een array met strings. De volgende parameters zijn gerelateerd aan de expressie. Uiteindelijk kan de de geretourneerde string compleet aangepast worden. De naam van de tag functie kan net zoals bij gewone functies, vrij gekozen worden:</p> + +<pre class="brush: js">var person = 'Mike'; +var age = 28; + +function myTag(strings, personExp, ageExp) { + + var str0 = strings[0]; // "that " + var str1 = strings[1]; // " is a " + + // There is technically a string after + // the final expression (in our example), + // but it is empty (""), so disregard. + // var str2 = strings[2]; + + var ageStr; + if (ageExp > 99){ + ageStr = 'centenarian'; + } else { + ageStr = 'youngster'; + } + + return str0 + personExp + str1 + ageStr; + +} + +var output = myTag`that ${ person } is a ${ age }`; + +console.log(output); +// that Mike is a youngster</pre> + +<p>Het is overigens niet noodzakelijk dat een tag functie weer een string retourneert:</p> + +<pre class="brush: 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!" +var t2Closure = template`${0} ${'foo'}!`; +t2Closure('Hello', {foo: 'World'}); // "Hello World!" +</pre> + +<h3 id="Raw_strings">Raw strings</h3> + +<p>De speciale <code>raw</code> property, een property van het eerste functie argument, maakt het mogelijk de oorspronkelijke strings te benaderen, zonder de <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Using_special_characters_in_strings">escape sequences</a>.</p> + +<pre class="brush: js">function tag(strings) { + console.log(strings.raw[0]); +} + +tag`string text line 1 \n string text line 2`; +// logs "string text line 1 \n string text line 2" , +// including the two characters '\' and 'n' +</pre> + +<p>De "String.raw()" method kan gebruikt worden om strings te maken op dezelfde manier als de standaard template function:</p> + +<pre class="brush: js">var str = String.raw`Hi\n${2+3}!`; +// "Hi\n5!" + +str.length; +// 6 + +str.split('').join(','); +// "H,i,\,n,5,!" +</pre> + +<h3 id="Tagged_template_literals_and_escape_sequences">Tagged template literals and escape sequences</h3> + +<p>Volgens de ES2016 spec, <em>tagged template literals</em> conformeren zich tot de volgende escape reeksen:</p> + +<ul> + <li>Unicode escapes beginnen met "\u", bijvoorbeeld <code>\u00A9</code></li> + <li>Unicode code point escapes; hier wordt "\u{}" gebruikt, bijvoorbeeld \<code>u{2F804}</code></li> + <li>Hexadecimal escapes beginnen met "\x", bijvoorbeeld <code>\xA9</code></li> + <li>Octal literal escapes beginnen met "\" en een of meerdere getallen, bijvoorbeeld \251</li> +</ul> + +<p>Dit kan soms problemen geven:</p> + +<pre class="brush: js">latex`\unicode` +// Throws in older ECMAScript versions (ES2016 and earlier) +// SyntaxError: malformed Unicode character escape sequence</pre> + +<p>Tagged template literals zou andere taal elementen moeten toestaan, bijvoorbeeld <a href="https://en.wikipedia.org/wiki/Domain-specific_language">DSLs</a> of <a href="https://en.wikipedia.org/wiki/LaTeX">LaTeX</a> waar andere escape reeksten normaal zijn. Het ECMAScript voorstel <a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a> (stage 4, voor de ECMAScript 2018 standaard) zal hiermee rekening houden.</p> + +<p>Escape reeksen zullen echter nu nog een <em>undefined </em>opleveren:</p> + +<pre class="brush: js">function latex(str) { + return { "cooked": str[0], "raw": str.raw[0] } +} + +latex`\unicode` + +// { cooked: undefined, raw: "\\unicode" }</pre> + +<p>Let op dat alleen de restrictie bij <em>tagged</em> template literals wordt opgeheven, en niet bij <em>untagged</em> template literals:</p> + +<pre class="brush: js example-bad">let bad = `bad escape sequence: \unicode`;</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition. Defined in several section of the specification: <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> + <tr> + <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several section of the specification: <a href="https://tc39.github.io/ecma262/#sec-template-literals">Template Literals</a>, <a href="https://tc39.github.io/ecma262/#sec-tagged-templates">Tagged Templates</a></td> + </tr> + <tr> + <td><a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a></td> + <td>Stage 4 draft</td> + <td>Drops escape sequence restriction from tagged template literals</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.grammar.template_literals")}}</p> +</div> + +<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> |