diff options
Diffstat (limited to 'files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html')
| -rw-r--r-- | files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html new file mode 100644 index 0000000000..c2357f8e93 --- /dev/null +++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html @@ -0,0 +1,152 @@ +--- +title: L'opérateur conditionnel +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel +tags: + - JavaScript + - Opérateur +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>L'<strong>opérateur (ternaire) conditionnel</strong> est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>condition</em> ? <em>exprSiVrai</em> : <em>exprSiFaux</em> </pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>condition</code></dt> + <dd>Une expression qui est évaluée en un booléen (<code>true</code> ou <code>false</code>).</dd> +</dl> + +<dl> + <dt><code>exprSiVrai</code></dt> + <dd>Une expression qui est évaluée si la condition est équivalente à <code>true</code> (<em>truthy</em>)</dd> + <dt><code>exprSiFaux</code></dt> + <dd>Une expression qui est évaluée si la condition est équivalente à <code>false</code> (<em>falsy</em>).</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>SI <code>condition</code> vaut <code>true</code>, l'opérateur renverra la valeur d'<code>exprSiVrai;</code> dans le cas contraire, il renverra la valeur de <code>exprSiFaux</code>. Par exemple, on peut afficher un message différent en fonction d'une variable <code>estMembre</code> avec cette déclaration :</p> + +<pre class="brush: js">"Le prix est : " + (estMembre ? "15 €" : "30 €") +</pre> + +<p>On peut également affecter des variables dont la valeur dépendra du test :</p> + +<pre class="brush: js">var elvisLives = Math.PI > 4 ? "Yep" : "Nope";</pre> + +<p>On peut enchaîner plusieurs évaluations ternaires l'une à la suite de l'autre (cet opérateur se propage de la gauche vers la droite) :</p> + +<pre class="brush: js">var premierControle = false, + secondControle = false, + acces = premierControle ? "Accès refusé" : secondControle ? "Accès refusé" : "Accès autorisé"; + +console.log(acces); // "Accès autorisé"</pre> + +<p>Il est également possible d'utiliser cet opérateur pour effectuer l'une ou l'autre expression selon le cas de figure qui se présente :</p> + +<pre class="brush: js">var stop = false, age = 16; + +age > 18 ? location.assign("continue.html") : stop = true; +</pre> + +<p>en utilisant l'{{jsxref("Opérateurs/L_opérateur_virgule","opérateur virgule")}}, on peut même y placer plusieurs instructions (attention toutefois à la lisibilité et à se demander si un {{jsxref("Instructions/if...else","if...else")}} n'est pas plus approprié).</p> + +<pre class="brush: js">var stop = false, age = 23; + +age > 18 ? ( + console.log("OK, accès autorisé."), + location.assign("continue.html") +) : ( + stop = true, + console.log("Accès refusé !") +); +</pre> + +<p>De la même façon, on peut effectuer plusieurs opérations, encadrées par des parenthèses, avant d'affecter le résultat de l'opérateur à une variable. Conformément à l'opérateur virgule, ce sera <strong><em>la dernière valeur qui sera affectée</em></strong>. Ici aussi, attention à la lisibilité du code relativement à un <code>if...else</code>.</p> + +<pre class="brush: js">var age = 16; + +var url = age > 18 ? ( + console.log("Accès autorisé."), + // console.log renvoie "undefined", mais cela importe peu car + // ce n'est pas le dernier élément de l'expression + "continue.html" // la valeur à affecter si âge > 18 +) : ( + console.log("Accès refusé !"), + // etc. + "stop.html" // la valeur à affecter si âge <= 18 +); + +location.assign(url); // "stop.html"</pre> + +<h3 id="Utiliser_l'opérateur_ternaire_dans_la_valeur_de_retour">Utiliser l'opérateur ternaire dans la valeur de retour</h3> + +<p>On peut utiliser l'opérateur ternaire (voire une imbrication de celui-ci) pour remplacer certaines formulations avec <code>if...else</code> où <code>return</code> est la seule instruction utilisée :</p> + +<pre class="brush: js">var func1 = function( .. ) { + if (condition1) { return valeur1 } + else if (condition2) { return valeur2 } + else if (condition3) { return valeur3 } + else { return value4 } +} + +var func2 = function( .. ) { + return condition1 ? valeur1 + : condition2 ? valeur2 + : condition3 ? valeur3 + : valeur4 +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale, implémentée avec JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.conditional")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'instruction {{jsxref("Instructions/if...else","if...else")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Le chaînage optionnel</a></li> +</ul> |