[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/switch [Back]  [Original]

switch - JavaScript | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

switch

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'instruction switch value une expression et, selon le rsultat obtenu et le cas associ, excute les instructions correspondantes.

Dans cet article

Exemple interactif

const expr = "Papayas";
switch (expr) {
  case "Oranges":
    console.log("Oranges are $0.59 a pound.");
    break;
  case "Mangoes":
  case "Papayas":
    console.log("Mangoes and papayas are $2.79 a pound.");
    // Expected output: "Mangoes and papayas are $2.79 a pound."
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

Syntaxe

js
switch (expression) {
  case valeur1:
    // Instructions  excuter lorsque le rsultat
    // de l'expression correspond  valeur1
    instructions1;
    [break;]
  case valeur2:
    // Instructions  excuter lorsque le rsultat
    // de l'expression correspond  valeur2
    instructions 2;
    [break;]
  
  case valeurN:
    // Instructions  excuter lorsque le rsultat
    // de l'expression  valeurN
    instructionsN;
    [break;]
  [default:
    // Instructions  excuter lorsqu'aucune des valeurs
    // ne correspond
    instructions_def;
    [break;]]
}
expression

Une expression comparer avec chacune des clause case.

case expressionN Facultatif

Une clause qu'on compare avec expression.

default Facultatif

Une clause excute si aucune correspondance n'est trouve avec les clause case (et/ou s'il n'y a pas de break pour les clauses case prcdentes).

instructionsN

Les instructions excuter lorsque l'expression correspond au cas prsent pour cette clause.

instructions_def

Les instructions excuter si l'expression ne correspond aucun cas de figure prcdemment dcrit.

Description

Une instruction switch commence par valuer l'expression fournie (cette valuation ne se produit qu'une fois). Si une correspondance est trouve, le programme excutera les instructions associes. Si plusieurs cas de figure correspondent, le premier sera slectionn (mme si les cas sont diffrents les uns des autres).

Le programme recherche tout d'abord une clause case dont l'expression est value avec la mme valeur que l'expression d'entre (au sens de l'galit stricte. Si une telle clause est trouve, les instructions associes sont excutes. Si aucune clause case n'est trouve, le programme recherche la clause optionnelle default et si elle existe, les instructions correspondantes sont excutes. Si cette clause optionnelle n'est pas utilise, le programme continue son excution aprs l'instruction switch. Par convention, la clause default est utilise en dernire mais cela n'est pas ncessaire.

L'instruction break peut optionnellement tre utilise pour chaque cas et permet de s'assurer que seules les instructions associes ce cas seront excutes. Si break n'est pas utilis, le programme continuera son excution avec les instructions suivantes (des autres cas de l'instruction switch).

Exemples

Utiliser switch

Dans l'exemple suivant, si l'expression expr vaut "Bananes", le programme trouve la correspondance et excute l'instruction associe. Lorsque l'instruction break est trouve, le programme sort de l'instruction switch et continue l'excution avec les instructions suivantes. Si break n'avait pas t utilis, l'instruction du cas "Cerises" aurait galement t excute.

js
switch (expr) {
  case "Oranges":
    console.log("Oranges : 0.59  le kilo.");
    break;
  case "Pommes":
    console.log("Pommes : 0.32  le kilo.");
    break;
  case "Bananes":
    console.log("Bananes : 0.48  le kilo.");
    break;
  case "Cerises":
    console.log("Cerises : 3.00  le kilo.");
    break;
  case "Mangues":
  case "Papayes":
    console.log("Mangues et papayes : 2.79  le kilo.");
    break;
  default:
    console.log("Dsol, nous n'avons plus de " + expr + ".");
}

console.log("Autre chose ?");

Que se passe-t-il si on oublie un break ?

Si on omet une instruction break, le script excutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu' la fin de l'instruction switch ou jusqu' une instruction break. Par exemple :

js
var toto = 0;
switch (toto) {
  case -1:
    console.log("moins un");
    break;
  case 0: // toto vaut 0 donc ce cas correspond
    console.log(0);
  // NOTE : le break aurait du tre plac ici
  case 1: // pas de break pour 'case 0:' les instructions de ce cas sont
    // excutes aussi
    console.log(1);
    break; // on a un break a ce niveau donc les instructions
  // des cas suivants ne seront pas excutes
  case 2:
    console.log(2);
    break;
  default:
    console.log("default");
}

Peut-on intercaler la rgle par dfaut ?

Oui, il est possible de placer le cas default entre deux autres cas. Ainsi, si on a une valeur qui ne correspond pas aux diffrents cas, elle passera par le bloc default puis par les autres s'il n'y a pas de break. Par exemple :

js
var toto = 5;
switch (toto) {
  case 2:
    console.log(2); // ne sera pas excut
    break;
  default:
    console.log("default"); // sera excut
  case 1:
    console.log("1"); // sera excut car il n'y a
  // pas de break avant
}
// La console affichera "default" puis "1"

Mthodes pour regrouper diffrents cas

Pour la source depuis laquelle les exemples suivants ont t adapts, voir cette question Stack Overflow.

Regrouper diffrents cas pour excuter une unique opration

Cette mthode utilise le fait que s'il n'y a pas d'instruction break, l'excution se poursuivra avec les instructions des cas suivants (mme si les expressions de ces cas ne correspondent pas la valeur de l'expression d'entre).

On peut donc regrouper diffrentes valeurs les unes la suite des autres pour excuter des instructions pour ces valeurs :

js
var animal = "girafe";
switch (animal) {
  case "vache":
  case "girafe":
  case "chien":
  case "cochon":
    console.log("Cet animal est un mammifre");
    break;
  case "oiseau":
  default:
    console.log("Cet animal n'est pas un mammifre.");
}

Chaner des oprations

Dans l'exemple qui suit, on illustre comment excuter une srie d'instructions qui varie en fonction du paramtre (ici un entier) fourni. Cela montre que les diffrents cas sont tests dans l'ordre dans lequel ils sont mis au sein du switch :

js
var toto = 1;
var output = "Rsultat : ";
switch (toto) {
  case 0:
    output += "Donc ";
  case 1:
    output += "quel ";
    output += "est ";
  case 2:
    output += "votre ";
  case 3:
    output += "nom ";
  case 4:
    output += "?";
    console.log(output);
    break;
  case 5:
    output += "!";
    console.log(output);
    break;
  default:
    console.log("Veuillez choisir un nombre entre 0 et 5 !");
}

Selon les valeurs fournies la variable toto, on aura les rsultats suivants :

Valeur Texte
toto vaut NaN ou est diffrent de 1, 2, 3, 4, 5 ou 0 Veuillez choisir un nombre entre 0 et 5 !
0 Rsultat : Donc quel est votre nom ?
1 Rsultat : quel est votre nom ?
2 Rsultat : votre nom ?
3 Rsultat : nom ?
4 Rsultat : ?
5 Rsultat : !

switch et les variables avec une porte de bloc

Avec ECMAScript 2015 (ES6), on peut utiliser les instructions let et const pour dclarer des variables dont la porte sera celle du bloc englobant.

Prenons cet exemple :

js
const action = "dire_bonjour";
switch (action) {
  case "dire_bonjour":
    let message = "bonjour";
    console.log(message);
    break;
  case "dire_coucou":
    let message = "coucou";
    console.log(message);
    break;
  default:
    console.log("Aucune action reue.");
    break;
}

Si on excute cet exemple, on aura l'erreur Uncaught SyntaxError: Identifier 'message' has already been declared qui n'est probablement pas le rsultat espr.

Cela se produit car la premire instruction let message = 'bonjour'; entre en conflit avec let message = 'coucou'; bien qu'elles soient rattaches deux instructions case distinctes case 'dire_bonjour': et case 'dire_coucou': mais ces deux instructions s'inscrivent dans le mme bloc et on a donc message dclar deux fois dans le mme bloc, soit deux fois dans la mme porte.

Pour rgler ce problme, il suffit de rajouter des accolades pour dfinir un bloc d'instructions pour chaque case :

js
const action = "dire_bonjour";
switch (action) {
  case "dire_bonjour": {
    // accolade ajoute
    let message = "bonjour";
    console.log(message);
    break;
  } // accolade ajoute
  case "dire_coucou": {
    // accolade ajoute
    let message = "coucou";
    console.log(message);
    break;
  } // accolade ajoute
  default: {
    // accolade ajoute
    console.log("Aucune action reue.");
    break;
  } // accolade ajoute
}

Cette nouvelle version, excute, produira "bonjour" dans la console, sans causer d'erreur.

Spcifications

Spcification
ECMAScript 2027 LanguageSpecification
# sec-switch-statement

Compatibilit des navigateurs

Voir aussi


Web Proxy Viewer  |  New URL  |  Original Page