aboutsummaryrefslogtreecommitdiff
path: root/files/it/web/javascript/reference/template_literals
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:47:54 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:47:54 +0100
commit30feb96f6084a2fb976a24ac01c1f4a054611b62 (patch)
treed73194ae27b60156ff0ca54013c8c4ad8519f10a /files/it/web/javascript/reference/template_literals
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-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.html210
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>