diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:47:54 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:47:54 +0100 |
commit | 30feb96f6084a2fb976a24ac01c1f4a054611b62 (patch) | |
tree | d73194ae27b60156ff0ca54013c8c4ad8519f10a /files/it/web/javascript/reference/template_literals | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-30feb96f6084a2fb976a24ac01c1f4a054611b62.tar.gz translated-content-30feb96f6084a2fb976a24ac01c1f4a054611b62.tar.bz2 translated-content-30feb96f6084a2fb976a24ac01c1f4a054611b62.zip |
unslug it: move
Diffstat (limited to 'files/it/web/javascript/reference/template_literals')
-rw-r--r-- | files/it/web/javascript/reference/template_literals/index.html | 210 |
1 files changed, 210 insertions, 0 deletions
diff --git a/files/it/web/javascript/reference/template_literals/index.html b/files/it/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..5bb4890ad8 --- /dev/null +++ b/files/it/web/javascript/reference/template_literals/index.html @@ -0,0 +1,210 @@ +--- +title: Stringhe template +slug: Web/JavaScript/Reference/template_strings +translation_of: Web/JavaScript/Reference/Template_literals +--- +<div>{{JsSidebar("More")}}</div> + +<p>Le stringhe template sono stringhe letterali che consentono espressioni incorporate. Puoi usare stringhe multi-linea e caratteristiche di interpolazione stringa con esse.</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">`stringa testo` + +`stringa testo linea 1 + stringa testo linea 2` + +`stringa testo ${espressione} stringa testo` + +tag `stringa testo ${espressione} stringa testo` +</pre> + +<h2 id="Descrizione">Descrizione</h2> + +<p>Le stringhe template sono racchiuse dal carattere backtick (` `) (<a href="https://it.wikipedia.org/wiki/Accento_grave">accento grave</a>) invece delle singole o doppie virgolette. Le stringhe template possono contenere segnaposti. Questi sono indicati dal segno del Dollaro e parentesi graffe (<code>${espressione}</code>). Le espressioni nei segnaposti e nel testo compreso vengono passati ad una funzione. La funzione predefinita semplicemente concatena le parti in una stringa. Se c'è un'espressione che precede (<code>tag</code> qui), la stringa template è chiamata "stringa template taggata". In questo caso, l'espressione tag (di solito una funzione) viene chiamata con la stringa template processata, con cui puoi in seguito manipolare prima dell'output.</p> + +<h3 id="Stringhe_multilinea">Stringhe multilinea</h3> + +<p>Ogni carattere di nuova linea inseriti nel sorgente sono parte della stringa template. Usando stringhe normali, potresti usare la seguente sintassi per ottenere stringhe multilinea:</p> + +<pre class="brush: js">console.log("stringa testo linea 1\n"+ +"stringa testo linea 2"); +// "stringa testo linea 1 +// stringa testo linea 2"</pre> + +<p>Per avere lo stesso effetto con le stringhe multilinea, puoi adesso scrivere:</p> + +<pre class="brush: js">console.log(`stringa testo linea 1 +stringa testo linea 2`); +// "stringa testo linea 1 +// stringa testo linea 2"</pre> + +<h3 id="Interpolazione_di_espressioni">Interpolazione di espressioni</h3> + +<p>Per incorporare espressioni dentro normale stringhe, potresti fare uso della seguente sintassi:</p> + +<pre class="brush: js">var a = 5; +var b = 10; +console.log("Quindici è " + (a + b) + " e\nnon " + (2 * a + b) + "."); +// "Quindici è 15 e +// non 20."</pre> + +<p>Adesso, con le stringhe template, puoi fare uso della sintassi ridotta facendo sostituzioni come questa più leggibile:</p> + +<pre class="brush: js">var a = 5; +var b = 10; +console.log(`Quindici è ${a + b} e\nnon ${2 * a + b}.`); +// "Quindici è 15 e +// non 20."</pre> + +<h3 id="Stringhe_template_taggate">Stringhe template taggate</h3> + +<p>Una forma più avanzata di stringhe template sono le stringhe template <em>taggate</em>. Con esse puoi modificare l'output delle stringhe template usando una funzione. Il primo argomento contiene un array di stringhe letterali ("Ciao" e " mondo" in questo esempio). Il secondo, ed ogni argomento dopo il primo, sono i valori delle espressioni di sostituzione ("15" e "50" qui) processate (o a volte detto <em>lavorate</em>). Alla fine, la tua funzione ritorna la stringa manipolata. Non c'è nulla di speciale sul nome tag nel seguente esempio. Il nome della funzione può essere qualsiasi cosa tu voglia.</p> + +<pre class="brush: js">var a = 5; +var b = 10; + +function tag(strings, ...values) { + console.log(strings[0]); // "Ciao " + console.log(strings[1]); // " mondo " + console.log(values[0]); // 15 + console.log(values[1]); // 50 + + return "Bazinga!"; +} + +tag`Ciao ${ a + b } mondo ${ a * b }`; +// "Bazinga!" +</pre> + +<p>Le funzioni Tag non devono per forza ritornare una stringa, come mostrato nel seguente esempio.</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(''); + }); +} + +template`${0}${1}${0}!`('Y', 'A'); // "YAY!" +template`${0} ${'foo'}!`('Ciao', {foo: 'Mondo'}); // "Ciao Mondo!" +</pre> + +<h3 id="Stringhe_grezze">Stringhe grezze</h3> + +<p>La proprietà speciale <code>raw</code>, disponibile sull'argomento della prima funzione delle stringhe template taggate, ti consente di accedere alle stringhe grezze per come sono state inserite.</p> + +<pre class="brush: js">function tag(strings, ...values) { + console.log(strings.raw[0]); + // "stringa testo linea 1 \\n stringa testo linea 2" +} + +tag`stringa testo linea 1 \n stringa testo linea 2`; +</pre> + +<p>In aggiunta, il metodo {{jsxref("String.raw()")}} esiste per creare stringhe grezze proprio come la funzione template predefinita e contatenazione di stringhe potrebbero creare.</p> + +<pre class="brush: js">String.raw`Salve\n${2+3}!`; +// "Salve\n5!"</pre> + +<h2 id="Sicurezza">Sicurezza</h2> + +<p>Le stringhe template <strong>NON DEVONO</strong> essere costruite da utenti non fidati, poichè hanno accesso a variabili e funzioni.</p> + +<pre class="brush: js">`${console.warn("this is",this)}`; // "this is" Window + +let a = 10; +console.warn(`${a+=20}`); // "30" +console.warn(a); // 30 +</pre> + +<h2 id="Specifiche">Specifiche</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('ES6', '#sec-template-literals', 'Template Literals')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definizione iniziale. Definita in molte sezioni della specifica: <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>Definita in molte sezioni della specifica: <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> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatChrome(41)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(28)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto base</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(41)}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(28)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("String.raw()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Grammatica lessica</a></li> + <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Stringhe di tipo template in sintassi compatibile con ES3</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/">"ES6 in profondità: Stringhe template" su hacks.mozilla.org</a></li> +</ul> |