1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
---
title: if...else
slug: Web/JavaScript/Reference/Instructions/if...else
tags:
- JavaScript
- Reference
- Statement
translation_of: Web/JavaScript/Reference/Statements/if...else
---
<div>{{jsSidebar("Statements")}}</div>
<p>L'instruction <strong><code>if</code></strong> exécute une instruction si une condition donnée est vraie ou équivalente à vrai. Si la condition n'est pas vérifiée, il est possible d'utiliser une autre instruction.</p>
<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.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">if (<em>condition</em>)
<em>instruction1</em>
[else
<em>instruction2</em>]
</pre>
<dl>
<dt><code>condition</code></dt>
<dd>Une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Expressions">expression</a> qui est évaluée à <code>true</code> ou <code>false</code>.</dd>
</dl>
<dl>
<dt><code>instruction1</code></dt>
<dd>L'instruction qui est exécutée si la condition est vérifiée (i.e. est évaluée à <code>true</code>). Cette instruction peut être n'importe quelle instruction valide, y compris une imbrication d'autres instructions <code>if</code>. Pour exécuter plusieurs instructions, on pourra utiliser un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} ({ ... }) qui permet de les regrouper. Pour n'exécuter aucune instruction, on pourra utiliser {{jsxref("Instructions/Vide","l'instruction vide","",1)}}.</dd>
</dl>
<dl>
<dt><code>instruction2</code></dt>
<dd>Si la clause <code>else</code> existe, l'instruction qui est exécutée si la <code>condition</code> est évaluée à <code>false</code>. Comme pour la première, cette instruction peut être n'importe quelle instruction valide : une autre instruction <code>if</code> imbriquée, un bloc d'instruction, une instruction vide, etc.</dd>
</dl>
<h2 id="Description">Description</h2>
<p>Plusieurs instructions <code>if...else</code> peuvent être imbriquées afin de créer une structure <code>else if</code> (on notera qu'il n'y a pas de mot-clé <code>elseif</code> en JavaScript).</p>
<pre class="eval">if (<em>condition1</em>)
<em>instruction1</em>
else if (<em>condition2</em>)
<em>instruction2</em>
else if (<em>condition3</em>)
<em>instruction3</em>
...
else
<em>instructionN</em>
</pre>
<p>Si on indente correctement le code, on retrouve la structure exactement équivalente :</p>
<pre class="eval">if (<em>condition1</em>)
<em>instruction1</em>
else
if (<em>condition2</em>)
<em>instruction2</em>
else
if (<em>condition3</em>)
...
</pre>
<p>Afin d'exécuter plusieurs instructions, on utilisera un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} (<code>{ ... }</code>) pour regrouper les instructions souhaitées. Utiliser les blocs d'instructions est une bonne façon d'organiser son code, surtout lorsque celui-ci comporte des instructions conditionnelles imbriquées.</p>
<pre class="eval">if (<em>condition</em>) {
<em>instructions1</em>
} else {
<em>instructions2</em>
}
</pre>
<p>Attention à ne pas confondre les valeurs booléennes « primitives » <code>true</code> et <code>false</code> avec les valeurs true et false d'un objet {{jsxref("Boolean")}}. Toute valeur qui n'est pas <code>false</code>, {{jsxref("undefined")}}, {{jsxref("null")}}, <code>0</code>, <code>-0</code>, {{jsxref("NaN")}} ou la chaîne vide (<code>""</code>), et tout objet, y compris un objet <code>Boolean</code> dont la valeur est <code>false</code>, seront évalués à <code>true</code> lors d'une instruction conditionnelle <code>if</code>. Ainsi :</p>
<pre class="brush: js">var b = new Boolean(false);
if (b) // la condition sera évaluée à true
</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="Utiliser_if...else">Utiliser <code>if...else</code></h3>
<pre class="brush: js">if (cipher_char == from_char) {
result = result + to_char;
x++;
} else {
result = result + clear_char;
}
</pre>
<h3 id="Utiliser_else_if">Utiliser <code>else if</code></h3>
<p>Bien qu'il n'y ait pas de mot-clé elseif dans le langage JavaScript, il est possible d'imbriquer des instructions if...else à la suite les une des autres en plaçant un espace entre else et le début de l'instruction if imbriquée :</p>
<pre class="brush: js">if (x > 50){
// faire quelque chose
} else if (x > 5) {
// faire autre chose
} else {
// faire encore autre chose
}
</pre>
<h3 id="Affectation_de_variable_dans_l'expression_conditionnelle">Affectation de variable dans l'expression conditionnelle</h3>
<p>Il est conseillé de ne pas utiliser d'affectation au sein des expressions conditionnelles. En effet, l'affectation peut être confondue avec un test d'égalité lorsqu'on analyse le code. Il ne faut donc pas utiliser le code suivant (bien qu'il fonctionne) :</p>
<pre class="brush: js example-bad">if (x = y) {
/* exécuter les instructions */
}
</pre>
<p>S'il est nécessaire d'effectuer une telle affectation, une pratique courante consiste à ajouter des parenthèses de cette manière afin d'alerter le lecteur du code (exemple à utiliser) :</p>
<pre class="brush: js example-good">if ((x = y)) {
/* exécuter les instructions */
}</pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ESDraft', '#sec-if-statement', 'instruction if')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-if-statement', 'instruction if')}}</td>
<td>{{Spec2('ES6')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-12.5', 'instruction if')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES3', '#sec-12.5', 'instruction if')}}</td>
<td>{{Spec2('ES3')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES1', '#sec-12.5', 'instruction if')}}</td>
<td>{{Spec2('ES1')}}</td>
<td>Définition initiale</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.statements.if_else")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{jsxref("Instructions/bloc", "bloc")}}</li>
<li>{{jsxref("Instructions/switch", "switch")}}</li>
<li>{{jsxref("Opérateurs/L_opérateur_conditionnel", "L'opérateur conditionnel","",1)}}</li>
</ul>
|
