path: root/files/it/web/javascript/reference/statements/switch/index.html

---
title: switch
slug: Web/JavaScript/Reference/Statements/switch
tags:
  - JavaScript
  - Reference
  - Statement
  - Web
translation_of: Web/JavaScript/Reference/Statements/switch
---
<div>{{jsSidebar("Statements")}}</div>

<p><span class="seoSummary"><code>Il<strong> comando</strong></code><strong><code>switch</code></strong> valuta un <a href="/it-IT/docs/Web/JavaScript/Guide/Expressions_and_Operators">espressione</a>, confronta il valore dell'espressione con ciascuna delle clausole <code>case</code> ed esegue i <a href="/it-IT/docs/Web/JavaScript/Reference/Statements">comandi</a> (<a href="/en-US/docs/Web/JavaScript/Reference/Statements">statements</a>) associati alla clausola (<code>case</code>) che verifica il confronto.</span></p>

<h2 id="Sintassi">Sintassi</h2>

<pre class="syntaxbox">switch (espressione) {
  case valore1:
    //Comandi eseguiti quando il valore dell'espressione coincide con valore1
    [break;]
  case valore2:
    //Comandi eseguiti quando il valore dell'espressione coincide con valore2
    [break;]
  ...
  case valoreN:
    //Comandi eseguiti quando il valore dell'espressione coincide con valoreN
    [break;]
  default:
    //Comandi eseguiti quando nessuno dei valori coincide col valore dell'epressione
    [break;]
}</pre>

<dl>
 <dt><code>espressione</code></dt>
 <dd>Un'espressione il cui risultato è confrontato con ogni clausola case.</dd>
 <dt><code>case valoreN</code></dt>
 <dd>Clausola case usata nel confronto con l' <code>espressione</code>.</dd>
 <dt><code>default</code></dt>
 <dd>Una clausola <code>default</code> è facoltativa e, se specificata, la clausola viene eseguita se il valore dell'<code>espressione</code> non corrisponde a nessuna clausola <code>case</code>.</dd>
</dl>

<h2 id="Descrizione">Descrizione</h2>

<p>Un comando switch per prima cosa valuta <code>espressione</code>; poi cerca la prima clausola <code>case</code> la cui essa ha lo stesso valore del risultato dell'espressione di <code>switch</code> (utilizzando la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">strict comparison</a>, <code>===</code>); quindi il comando <code>switch</code> trasferisce il controllo alla clausola <code>case</code>, eseguendone i comandi. Se più clausole <code>case</code> sono verificate dal confronto con l'espressione di <code>switch</code>,  viene scelta la prima che verifica il confronto, anche se le clausole non sono uguali. Se nessuna clausola <code>case</code> risulta verificata dal confronto, il programma cerca la clausola facoltativa <code>default</code>, e se la trova, trasferisce il controllo a questa, eseguendone i comandi. Se non viene trovata alcuna clausola <code>default</code>, il programma continua eseguendo il comando successivo alla fine del comando <code>switch</code>. Convenzionalmente, ma non necessariamente, la clausola <code>default</code> è l'ultima clausola.</p>

<p>Il comando facoltativo <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> associato a ciascuna etichetta <code>case</code> assicura che, una volta eseguiti i comandi della clausola che verifica l'espressione di <code>switch</code>, il programma interrompa il comando switch e che continui eseguendo il comando successivo. Se il comando <code>break</code> viene omesso, il programma continua l'esecuzione dal comando successivo all'interno del comando di <code>switch</code>, quindi dal primo della successiva clausola <code>case</code>.</p>

<h2 id="Esempi">Esempi</h2>

<h3 id="Utilizzo_di_switch">Utilizzo di <code>switch</code></h3>

<p>Nell'esempio seguente, se <code>expr</code> vale "Banane", il programma confronta il valore con la clausola "Banane" ed esegue i comandi associati. Quando incontra <code>break</code>, il programma interrompe il comando <code>switch</code> ed esegue il comando successivo a <code>switch</code>. Se <code>break</code> fosse omesso, sarebbero eseguiti anche i comandi della clausola "Ciliegie".</p>

<pre class="brush: js">switch (expr) {
  case "Arance":
    console.log("Le arance costano €1,0 al chilo.");
    break;
  case "Mele":
    console.log("Le mele costano €0.64 al chilo.");
    break;
  case "Banane":
    console.log("Le banane costano €0.92 al chilo.");
    break;
  case "Ciliege":
    console.log("Le ciliegie costano €2.59 al chilo.");
    break;
  case "Manghi":
  case "Papaye":
    console.log("I manghi e le papaye costano €1.79 al chilo.");
    break;
  default:
    console.log("Spiacenti, non abbiamo " + expr + ".");
}

console.log("Desidera qualcos'altro ?");
</pre>

<h3 id="Cosa_accade_se_dimentico_un_break">Cosa accade se dimentico un <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(255, 255, 255, 0.4);">break</span></font>?</h3>

<p>Se vi dimenticate un break, lo script partirà dalla clausola il cui criterio è verificato, e proseguirà con la clausola successiva anche se il criterio non era verifcato. Ecco alcuni esempi:</p>

<pre class="brush: js">var foo = 0;
switch (foo) {
  case -1:
    console.log('1 negativo');
    break;
  case 0: // foo è 0 quindi il criterio è verificato; questo blocco verrà eseguito
    console.log(0);
    // NOTA: il break dimenticato sarebbe dovuto essere qui
  case 1: // manca il comando break in 'case 0:' quindi anche questo blocco sarà eseguito
    console.log(1);
    break; // incontra questo break così con proseguirà in 'case 2:'
  case 2:
    console.log(2);
    break;
  default:
    console.log('default');
}</pre>

<h3 id="Posso_mettere_un_default_in_mezzo">Posso mettere un <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(255, 255, 255, 0.4);">default</span></font> in mezzo?</h3>

<p>Certo che puoi! JavaScript passerà al default se non troverà nessun criterio corrispondente:</p>

<pre><code>var foo = 5;
switch (foo) {
  case 2:
    console.log(2);
    break; // incontra un break, quindi non procederà automaticamente su "default:"
  default:
    console.log('default')
    // non c'è un break, quindi verrà eseguito anche il contenuto di "case 1:"!
  case 1:
    console.log('1');
}</code></pre>

<p>Funziona anche se metti default prima di ogni altra clausola.</p>

<h3 id="Riscrivere_molteplici_istruzioni_If_con_Switch">Riscrivere molteplici istruzioni If con Switch</h3>

<p>Di seguito viene fornito un esempio:</p>

<pre><code>var a = 100;
var b = NaN;
switch (true) {
  case isNaN(a) || isNaN(b):
    console.log('NaNNaN');
    break;
  case a === b:
    console.log(0);
    break;
  case a &lt; b:
    console.log(-1);
    break;
  default:
    console.log(1);
}</code></pre>



<h3 id="Metodi_per_i_case_con_più_criteri">Metodi per i <code>case</code> con più criteri</h3>

<p>I sorgenti per questa tecnica possono essere scaricati qui:</p>

<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p>

<h4 id="Multi-case_-_operazione_singola">Multi-case - operazione singola</h4>

<p>Questo metodo si avvale del fatto che se non c'è un <code>break</code> break prima di un comando di <code>case</code> continuerà eseguento il successivo comando di <code>case</code> ingnorando se verifica il criterio di esecuzione. Vedi la sezione  "Cosa accade se dimentico un <code>break</code>?"</p>

<p>Questo è un esempio di un comando di switch a singola operazione sequenziale, dove quattro valori diversi realizzano la stessa cosa.</p>

<pre class="brush: js">var Animale = 'Giraffa';
switch (Animale) {
  case 'Mucca':
  case 'Giraffa':
  case 'Cane':
  case 'Maiale':
    console.log('Queso animale anndrà sull'Arca di Noè.');
    break;
  case 'Dinosauro':
  default:
    console.log('Questo animale non andrà.');
}</pre>

<h4 id="Multi-case_-_operazioni_concatenate">Multi-case - operazioni concatenate</h4>

<p>Questo è un esempio di un comando di switch ad operazione multipla sequenziale, dove, a seconda del numero intero fornito, si ricevono diversi output. Mostra come sia possibile sfruttare l'ordine in cui sono scritte le clausole, e come non debbano essere numericamente in sequenza. In JavaScript, si possono anche inserire definizioni di stringhe nei comandi case.</p>

<pre class="brush: js">var foo = 1;
var output = 'Output: ';
switch (foo) {
  case 10:
    output += 'quindi ';
  case 1:
    output += 'quale ';
    output += 'è ';
  case 2:
    output += ' il tuo ';
  case 3:
    output += 'nome';
  case 4:
    output += '?';
    console.log(output);
    break;
  case 5:
    output += '!';
    console.log(output);
    break;
  default:
    console.log('Per favore prendere un numero da 1 a 5 o 10!');
}</pre>

<p>Output per questo esempio:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Valore</th>
   <th scope="col">Testo di log</th>
  </tr>
  <tr>
   <td>foo è diverso da 1, 2, 3, 4, 5 or 10</td>
   <td>Per favore prendere un numero da 1 a 5 o 10!</td>
  </tr>
  <tr>
   <td>10</td>
   <td>Output: quindi quale è il tuo nome?</td>
  </tr>
  <tr>
   <td>1</td>
   <td>Output: quale è il tuo nome?</td>
  </tr>
  <tr>
   <td>2</td>
   <td>Output: il tuo nome?</td>
  </tr>
  <tr>
   <td>3</td>
   <td>Output: nome?</td>
  </tr>
  <tr>
   <td>4</td>
   <td>Output: ?</td>
  </tr>
  <tr>
   <td>5</td>
   <td>Output: !</td>
  </tr>
 </tbody>
</table>

<h2 id="Specifiche">Specifiche</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specifiche</th>
   <th scope="col">Status</th>
   <th scope="col">Commento</th>
  </tr>
  <tr>
   <td>{{SpecName('ES3')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td>Definizione iniziale. Relaizzata in JavaScript 1.2</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.11', 'switch statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</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>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Vedi_anche">Vedi anche</h2>

<ul>
 <li><a href="/it-IT/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li>
</ul>