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
|
---
title: if...else
slug: Web/JavaScript/Reference/Statements/if...else
translation_of: Web/JavaScript/Reference/Statements/if...else
---
<div>{{jsSidebar("Statements")}}</div>
<p>當條件成立的時候會執行 if 陳述式裡的程式，而不成立時則執行另外一個陳述式。</p>
<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div>
<p class="hidden">這個互動式的源碼被放在 GitHub 的 Repository 裡，如果您想對此互動式範例專案提出貢獻的話，請 clone https://github.com/mdn/interactive-examples 並送出 pull request。</p>
<h2 id="語法">語法</h2>
<pre class="syntaxbox notranslate">if (<em>條件式</em>)
<em>statement1</em>
[else
<em>statement2</em>]
</pre>
<dl>
<dt><code>條件式</code></dt>
<dd>一個成立或不成立的<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">運算式</a>。</dd>
</dl>
<dl>
<dt><code>第一個陳述式(statement1)</code></dt>
<dd>如果if中的條件(conditions)為真時執行陳述式(statements)。陳述式可以為任何內容，包含巢狀式(nested)的if陳述。當要執行多行的陳述式(statements)時，使用區塊(block)將所要執行的陳述式包覆。如果不需要執行任何動作時，則不撰寫任何陳述式(empty statement)。</dd>
<dt><code>第二個陳述式(statement2)</code></dt>
</dl>
<dl>
<dd>當件不成立時所執行的部份，當else被撰寫時才會被執行。可以是任何的陳述式，包含使用區塊(block)及巢狀(nested)的陳述。</dd>
<dd></dd>
</dl>
<h2 id="描述">描述</h2>
<p>多重的 <code>if...else</code> 陳述式可以使用 <code>else if</code> 子句來建立一個巢狀結構的句子。要記住，在JavaScript中沒有 <code>elseif</code> (一個單字) 的語法可以用。</p>
<pre class="eval notranslate">if (<em>condition1</em>)
<em>statement1</em>
else if (<em>condition2</em>)
<em>statement2</em>
else if (<em>condition3</em>)
<em>statement3</em>
...
else
<em>statementN</em>
</pre>
<p>將巢狀結構適當的排版後，我們能更了解其背後運作的邏輯：</p>
<pre class="eval notranslate">if (<em>condition1</em>)
<em>statement1</em>
else
if (<em>condition2</em>)
<em>statement2</em>
else
if (<em>condition3</em>)
...
</pre>
<p>如果在一個條件式中有多個陳述要執行，可以使用區塊陳述式(<code>{ ... }</code>) 把所有陳述包在一起。 通常來說，無論如何都使用區塊陳述式是個很好的習慣，尤其是當你使用巢狀結構的 <code>if</code> 陳述式時，這會讓人更容易理解你的程式碼。</p>
<pre class="eval notranslate">if (<em>condition</em>) {
<em>statements1</em>
} else {
<em>statements2</em>
}
</pre>
<p>不要被<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="en/JavaScript/Reference/Global_Objects/Boolean">Boolean</a>物件中，布林值的 <code>true</code> 和 <code>false</code> 給混淆了。任何值只要不是 <code>false</code>、 <code>undefined</code>、 <code>null</code>、 <code>0</code>、 <code>NaN</code>，或者空字串 (<code>""</code>)，並且任何物件，包括其值是 <code>false</code>的布林物件 ，仍然會被條件陳述式視為條件成立。舉例而言：</p>
<pre class="brush: js notranslate">var b = new Boolean(false);
if (b) // this condition is truthy
</pre>
<h2 id="實例">實例</h2>
<h3 id="使用_if...else">使用 <code>if...else</code></h3>
<pre class="brush: js notranslate">if (cipher_char === from_char) {
result = result + to_char;
x++;
} else {
result = result + clear_char;
}
</pre>
<h3 id="使用_else_if">使用 <code>else if</code></h3>
<p>要記得JavaScript沒有 <code>elseif</code> 可以使用。不過，你可以使用 <code>else</code> 和 <code>if</code>中間夾著空白的語法：</p>
<pre class="brush: js notranslate">if (x > 5) {
/* do the right thing */
} else if (x > 50) {
/* do the right thing */
} else {
/* do the right thing */
}</pre>
<h3 id="條件表達式中的賦值">條件表達式中的賦值</h3>
<p>建議不要在條件表達式中直接對物件賦值，因為這會使人在瀏覽程式碼時很容易將賦值( assignment )與相等( equality )混淆。舉例而言，不要使用以下寫法：</p>
<pre class="brush: js example-bad notranslate">if (x = y) {
/* do the right thing */
}
</pre>
<p>如果你必須在條件表達式中使用賦值，最好ˇ的作法是以額外的括號包住賦值語句，如下所示：</p>
<pre class="brush: js example-good notranslate">if ((x = y)) {
/* do the right thing */
}
</pre>
<h2 id="規範">規範</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-if-statement', 'if statement')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td>
<td>{{Spec2('ES6')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td>
<td>{{Spec2('ES3')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td>
<td>{{Spec2('ES1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{Compat("javascript.statements.if_else")}}</p>
<h2 id="參見">參見</h2>
<ul>
<li>{{jsxref("Statements/block", "block")}}</li>
<li>{{jsxref("Statements/switch", "switch")}}</li>
<li>{{jsxref("Operators/conditional_operator", "conditional operator")}}</li>
</ul>
|
