aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/javascript/reference/statements/switch
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-08-03 08:03:23 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-09-03 08:08:25 +0200
commitbf8e099b9c8b3c60d60b3712b4fc97b052c39887 (patch)
treec101746d082c9581c94f5937519c7d0e2f4af8cb /files/fr/web/javascript/reference/statements/switch
parent844f5103992238c0c23203286dad16a466e89c97 (diff)
downloadtranslated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.gz
translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.bz2
translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.zip
convert content to md
Diffstat (limited to 'files/fr/web/javascript/reference/statements/switch')
-rw-r--r--files/fr/web/javascript/reference/statements/switch/index.md326
1 files changed, 142 insertions, 184 deletions
diff --git a/files/fr/web/javascript/reference/statements/switch/index.md b/files/fr/web/javascript/reference/statements/switch/index.md
index 7bf20d5913..98c11927bf 100644
--- a/files/fr/web/javascript/reference/statements/switch/index.md
+++ b/files/fr/web/javascript/reference/statements/switch/index.md
@@ -8,66 +8,65 @@ tags:
translation_of: Web/JavaScript/Reference/Statements/switch
original_slug: Web/JavaScript/Reference/Instructions/switch
---
-<div>{{jsSidebar("Statements")}}</div>
-
-<p>L'instruction <strong><code>switch</code></strong> évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes.</p>
-
-<div>{{EmbedInteractiveExample("pages/js/statement-switch.html")}}</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">switch (expression) {
- case valeur1:
- // Instructions à exécuter lorsque le résultat
- // de l'expression correspond à valeur1
- instructions1;
- [break;]
- case valeur2:
- // Instructions à exécuter lorsque le résultat
- // de l'expression correspond à valeur2
- instructions 2;
- [break;]
- ...
- case valeurN:
- // Instructions à exécuter lorsque le résultat
- // de l'expression à valeurN
- instructionsN;
- [break;]
- [default:
- // Instructions à exécuter lorsqu'aucune des valeurs
- // ne correspond
- instructions_def;
- [break;]]
-}</pre>
-
-<dl>
- <dt><code>expression</code></dt>
- <dd>Une expression à comparer avec chacune des clause <code>case</code>.</dd>
- <dt><code>case expressionN </code> {{optional_inline}}</dt>
- <dd>Une clause qu'on compare avec <code>expression</code>.</dd>
- <dt><code>default </code>{{optional_inline}}</dt>
- <dd>Une clause exécutée si aucune correspondance n'est trouvée avec les clause <code>case</code> (et/ou s'il n'y a pas de <code>break</code> pour les clauses <code>case</code> précédentes).</dd>
- <dt><code>instructionsN</code></dt>
- <dd>Les instructions à exécuter lorsque l'<code>expression</code> correspond au cas présenté pour cette clause.</dd>
- <dt><code>instructions_def</code></dt>
- <dd>Les instructions à exécuter si l'<code>expression</code> ne correspond à aucun cas de figure précédemment décrit.</dd>
-</dl>
-
-<h2 id="Description">Description</h2>
-
-<p>Une instruction <code>switch</code> commence par évaluer l'expression fournie (cette évaluation ne se produit qu'une fois). Si une correspondance est trouvée, le programme exécutera les instructions associées. Si plusieurs cas de figure correspondent, le premier sera sélectionné (même si les cas sont différents les uns des autres).</p>
-
-<p>Le programme recherche tout d'abord une clause <code>case</code> dont l'expression est évaluée avec la même valeur que l'expression d'entrée (au sens de {{jsxref("Opérateurs/Opérateurs_de_comparaison","l'égalité stricte","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)",1)}}. Si une telle clause est trouvée, les instructions associées sont exécutées. Si aucune clause <code>case</code> n'est trouvée, le programme recherche la clause optionnelle <code>default</code> et si elle existe, les instructions correspondantes sont exécutées. Si cette clause optionnelle n'est pas utilisée, le programme continue son exécution après l'instruction <code>switch</code>. Par convention, la clause <code>default</code> est utilisée en dernière mais cela n'est pas nécessaire.</p>
-
-<p>L'instruction {{jsxref("Instructions/break","break")}} peut optionnellement être utilisée pour chaque cas et permet de s'assurer que seules les instructions associées à ce cas seront exécutées. Si <code>break</code> n'est pas utilisé, le programme continuera son exécution avec les instructions suivantes (des autres cas de l'instruction <code>switch</code>).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_switch">Utiliser <code>switch</code></h3>
-
-<p>Dans l'exemple suivant, si l'expression <code>expr</code> vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction <code>break</code> est trouvée, le programme « sort » de l'instruction <code>switch</code> et continue l'exécution avec les instructions  suivantes. Si <code>break</code> n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée.</p>
-
-<pre class="brush: js">switch (expr) {
+{{jsSidebar("Statements")}}
+
+L'instruction **`switch`** évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes.
+
+{{EmbedInteractiveExample("pages/js/statement-switch.html")}}
+
+## Syntaxe
+
+ switch (expression) {
+ case valeur1:
+ // Instructions à exécuter lorsque le résultat
+ // de l'expression correspond à valeur1
+ instructions1;
+ [break;]
+ case valeur2:
+ // Instructions à exécuter lorsque le résultat
+ // de l'expression correspond à valeur2
+ instructions 2;
+ [break;]
+ ...
+ case valeurN:
+ // Instructions à exécuter lorsque le résultat
+ // de l'expression à valeurN
+ instructionsN;
+ [break;]
+ [default:
+ // Instructions à exécuter lorsqu'aucune des valeurs
+ // ne correspond
+ instructions_def;
+ [break;]]
+ }
+
+- `expression`
+ - : Une expression à comparer avec chacune des clause `case`.
+- `case expressionN `{{optional_inline}}
+ - : Une clause qu'on compare avec `expression`.
+- `default `{{optional_inline}}
+ - : Une clause exécutée si aucune correspondance n'est trouvée avec les clause `case` (et/ou s'il n'y a pas de `break` pour les clauses `case` précédentes).
+- `instructionsN`
+ - : Les instructions à exécuter lorsque l'`expression` correspond au cas présenté pour cette clause.
+- `instructions_def`
+ - : Les instructions à exécuter si l'`expression` ne correspond à aucun cas de figure précédemment décrit.
+
+## Description
+
+Une instruction `switch` commence par évaluer l'expression fournie (cette évaluation ne se produit qu'une fois). Si une correspondance est trouvée, le programme exécutera les instructions associées. Si plusieurs cas de figure correspondent, le premier sera sélectionné (même si les cas sont différents les uns des autres).
+
+Le programme recherche tout d'abord une clause `case` dont l'expression est évaluée avec la même valeur que l'expression d'entrée (au sens de {{jsxref("Opérateurs/Opérateurs_de_comparaison","l'égalité stricte","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)",1)}}. Si une telle clause est trouvée, les instructions associées sont exécutées. Si aucune clause `case` n'est trouvée, le programme recherche la clause optionnelle `default` et si elle existe, les instructions correspondantes sont exécutées. Si cette clause optionnelle n'est pas utilisée, le programme continue son exécution après l'instruction `switch`. Par convention, la clause `default` est utilisée en dernière mais cela n'est pas nécessaire.
+
+L'instruction {{jsxref("Instructions/break","break")}} peut optionnellement être utilisée pour chaque cas et permet de s'assurer que seules les instructions associées à ce cas seront exécutées. Si `break` n'est pas utilisé, le programme continuera son exécution 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 exécute l'instruction associée. Lorsque l'instruction `break` est trouvée, le programme « sort » de l'instruction `switch` et continue l'exécution avec les instructions  suivantes. Si `break` n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée.
+
+```js
+switch (expr) {
case "Oranges":
console.log("Oranges : 0.59 € le kilo.");
break;
@@ -89,13 +88,14 @@ original_slug: Web/JavaScript/Reference/Instructions/switch
}
console.log("Autre chose ?");
-</pre>
+```
-<h3 id="Que_se_passe-t-il_si_on_oublie_un_break">Que se passe-t-il si on oublie un <code>break</code> ?</h3>
+### Que se passe-t-il si on oublie un `break` ?
-<p>Si on omet une instruction <code>break</code>, le script exécutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu'à la fin de l'instruction <code>switch</code> ou jusqu'à une instruction <code>break</code>. Par exemple :</p>
+Si on omet une instruction `break`, le script exécutera 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 :
-<pre class="brush: js">var toto = 0;
+```js
+var toto = 0;
switch (toto) {
case -1:
console.log('moins un');
@@ -113,13 +113,15 @@ switch (toto) {
break;
default:
console.log('default');
-}</pre>
+}
+```
-<h3 id="Peut-on_intercaler_la_règle_par_défaut">Peut-on intercaler la règle par défaut ?</h3>
+### Peut-on intercaler la règle par défaut ?
-<p>Oui, il est possible de placer le cas <code>default</code> entre deux autres cas. Ainsi, si on a une valeur qui ne correspond pas aux différents cas, elle passera par le bloc <code>default</code> puis par les autres s'il n'y a pas de <code>break</code>. Par exemple :</p>
+Oui, il est possible de placer le cas `default` entre deux autres cas. Ainsi, si on a une valeur qui ne correspond pas aux différents cas, elle passera par le bloc `default` puis par les autres s'il n'y a pas de `break`. Par exemple :
-<pre class="brush: js">var toto = 5
+```js
+var toto = 5
switch (toto) {
case 2:
console.log(2); // ne sera pas exécuté
@@ -131,19 +133,20 @@ switch (toto) {
// pas de break avant
}
// La console affichera "default" puis "1"
-</pre>
+```
-<h3 id="Méthodes_pour_regrouper_différents_cas">Méthodes pour regrouper différents cas</h3>
+### Méthodes pour regrouper différents cas
-<p>Pour la source depuis laquelle les exemples suivants ont été adaptés, voir <a href="https://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">cette question Stack Overflow</a>.</p>
+Pour la source depuis laquelle les exemples suivants ont été adaptés, voir [cette question Stack Overflow](https://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript).
-<h4 id="Regrouper_différents_cas_pour_exécuter_une_unique_opération">Regrouper différents cas pour exécuter une unique opération</h4>
+#### Regrouper différents cas pour exécuter une unique opération
-<p>Cette méthode utilise le fait que s'il n'y a pas d'instruction {{jsxref("Instructions/break","break")}}, l'exécution se poursuivra avec les instructions des cas suivants (même si les expressions de ces cas ne correspondent pas à la valeur de l'expression d'entrée).</p>
+Cette méthode utilise le fait que s'il n'y a pas d'instruction {{jsxref("Instructions/break","break")}}, l'exécution se poursuivra avec les instructions des cas suivants (même si les expressions de ces cas ne correspondent pas à la valeur de l'expression d'entrée).
-<p>On peut donc regrouper différentes valeurs les unes à la suite des autres pour exécuter des instructions pour ces valeurs :</p>
+On peut donc regrouper différentes valeurs les unes à la suite des autres pour exécuter des instructions pour ces valeurs :
-<pre class="brush: js">var animal = 'girafe';
+```js
+var animal = 'girafe';
switch (animal) {
case 'vache':
case 'girafe':
@@ -154,13 +157,15 @@ switch (animal) {
case 'oiseau':
default:
console.log('Cet animal n\'est pas un mammifère.');
-}</pre>
+}
+```
-<h4 id="Chaîner_des_opérations">Chaîner des opérations</h4>
+#### Chaîner des opérations
-<p>Dans l'exemple qui suit, on illustre comment exécuter une série d'instructions qui varie en fonction du paramètre (ici un entier) fourni. Cela montre que les différents cas sont testés dans l'ordre dans lequel ils sont mis au sein du <code>switch</code> :</p>
+Dans l'exemple qui suit, on illustre comment exécuter une série d'instructions qui varie en fonction du paramètre (ici un entier) fourni. Cela montre que les différents cas sont testés dans l'ordre dans lequel ils sont mis au sein du `switch` :
-<pre class="brush: js">var toto = 1;
+```js
+var toto = 1;
var output = 'Résultat : ';
switch (toto) {
case 0:
@@ -182,54 +187,29 @@ switch (toto) {
break;
default:
console.log('Veuillez choisir un nombre entre 0 et 5 !');
-}</pre>
-
-<p>Selon les valeurs fournies à la variable <code>toto</code>, on aura les résultats suivants :</p>
-
-<table class="standard-table">
- <tbody>
- <tr>
- <th scope="col">Valeur</th>
- <th scope="col">Texte</th>
- </tr>
- <tr>
- <td>toto vaut {{jsxref("NaN")}} ou est différent de 1, 2, 3, 4, 5 ou 0</td>
- <td>Veuillez choisir un nombre entre 0 et 5 !</td>
- </tr>
- <tr>
- <td>0</td>
- <td>Résultat : Donc quel est votre nom ?</td>
- </tr>
- <tr>
- <td>1</td>
- <td>Résultat : quel est votre nom ?</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Résultat : votre nom ?</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Résultat : nom ?</td>
- </tr>
- <tr>
- <td>4</td>
- <td>Résultat : ?</td>
- </tr>
- <tr>
- <td>5</td>
- <td>Résultat : !</td>
- </tr>
- </tbody>
-</table>
-
-<h3 id="switch_et_les_variables_avec_une_portée_de_bloc"><code>switch</code> et les variables avec une portée de bloc</h3>
-
-<p>Avec ECMAScript 2015 (ES6), on peut utiliser les instructions <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> et <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> pour déclarer des variables dont la portée sera celle du bloc englobant.</p>
-
-<p>Prenons cet exemple :</p>
-
-<pre class="brush: js">const action = 'dire_bonjour';
+}
+```
+
+Selon les valeurs fournies à la variable `toto`, on aura les résultats suivants :
+
+| Valeur | Texte |
+| ------------------------------------------------------------------------- | ----------------------------------------- |
+| toto vaut {{jsxref("NaN")}} ou est différent de 1, 2, 3, 4, 5 ou 0 | Veuillez choisir un nombre entre 0 et 5 ! |
+| 0 | Résultat : Donc quel est votre nom ? |
+| 1 | Résultat : quel est votre nom ? |
+| 2 | Résultat : votre nom ? |
+| 3 | Résultat : nom ? |
+| 4 | Résultat : ? |
+| 5 | Résultat : ! |
+
+### `switch` et les variables avec une portée de bloc
+
+Avec ECMAScript 2015 (ES6), on peut utiliser les instructions [`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/en-US/docs/Web/JavaScript/Reference/Statements/const) pour déclarer des variables dont la portée sera celle du bloc englobant.
+
+Prenons cet exemple :
+
+```js
+const action = 'dire_bonjour';
switch (action) {
case 'dire_bonjour':
let message = 'bonjour';
@@ -242,73 +222,51 @@ switch (action) {
default:
console.log('Aucune action reçue.');
break;
-}</pre>
+}
+```
-<p>Si on exécute cet exemple, on aura l'erreur <code>Uncaught SyntaxError: Identifier 'message' has already been declared</code> qui n'est probablement pas le résultat espéré.</p>
+Si on exécute cet exemple, on aura l'erreur `Uncaught SyntaxError: Identifier 'message' has already been declared` qui n'est probablement pas le résultat espéré.
-<p>Cela se produit car la première instruction <code>let message = 'bonjour';</code> entre en conflit avec <code>let message = 'coucou';</code> bien qu'elles soient rattachées à deux instructions <code>case</code> distinctes <code>case 'dire_bonjour':</code> et <code>case 'dire_coucou':</code> mais ces deux instructions s'inscrivent dans le même bloc et on a donc <code>message</code> déclaré deux fois dans le même bloc, soit deux fois dans la même portée.</p>
+Cela se produit car la première instruction `let message = 'bonjour';` entre en conflit avec `let message = 'coucou';` bien qu'elles soient rattachées à deux instructions `case` distinctes `case 'dire_bonjour':` et `case 'dire_coucou':` mais ces deux instructions s'inscrivent dans le même bloc et on a donc `message` déclaré deux fois dans le même bloc, soit deux fois dans la même portée.
-<p>Pour régler ce problème, il suffit de rajouter des accolades pour définir un bloc d'instructions pour chaque <code>case</code> :</p>
+Pour régler ce problème, il suffit de rajouter des accolades pour définir un bloc d'instructions pour chaque `case` :
-<pre class="brush: js">const action = 'dire_bonjour';
+```js
+const action = 'dire_bonjour';
switch (action) {
- case 'dire_bonjour': <strong>{ // accolade ajoutée</strong>
+ case 'dire_bonjour': { // accolade ajoutée
let message = 'bonjour';
console.log(message);
break;
- <strong>} // accolade ajoutée</strong>
- case 'dire_coucou': <strong>{ // accolade ajoutée</strong>
+ } // accolade ajoutée
+ case 'dire_coucou': { // accolade ajoutée
let message = 'coucou';
console.log(message);
break;
- <strong>} // accolade ajoutée</strong>
- default: <strong>{ // accolade ajoutée</strong>
+ } // accolade ajoutée
+ default: { // accolade ajoutée
console.log('Aucune action reçue.');
break;
- <strong>} // accolade ajoutée</strong>
-}</pre>
-
-<p>Cette nouvelle version, exécutée, produira <code>"bonjour"</code> dans la console, sans causer d'erreur.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">État</th>
- <th scope="col">Commentaires</th>
- </tr>
- <tr>
- <td>{{SpecName('ES3')}}</td>
- <td>{{Spec2('ES3')}}</td>
- <td>Définition initiale. Implémentée avec JavaScript 1.2</td>
- </tr>
- <tr>
- <td>{{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}}</td>
- <td>{{Spec2('ES5.1')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}}</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é_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("javascript.statements.switch")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Instructions/if...else","if...else")}}</li>
- <li>{{jsxref("Instructions/break","break")}}</li>
-</ul>
+ } // accolade ajoutée
+}
+```
+
+Cette nouvelle version, exécutée, produira `"bonjour"` dans la console, sans causer d'erreur.
+
+## Spécifications
+
+| Spécification | État | Commentaires |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- |
+| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2 |
+| {{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}} | {{Spec2('ES5.1')}} |   |
+| {{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}} | {{Spec2('ES6')}} |   |
+| {{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}} | {{Spec2('ESDraft')}} |   |
+
+## Compatibilité des navigateurs
+
+{{Compat("javascript.statements.switch")}}
+
+## Voir aussi
+
+- {{jsxref("Instructions/if...else","if...else")}}
+- {{jsxref("Instructions/break","break")}}