files/pt-br/web/javascript/reference/operators/conditional_operator/index.html


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

---
title: Operador Condicional Ternário
slug: Web/JavaScript/Reference/Operators/Conditional_Operator
tags:
  - JavaScript
  - Operadores Condicionais
translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
original_slug: Web/JavaScript/Reference/Operators/Operador_Condicional
---
<div>{{jsSidebar("Operators")}}</div>

<h2 id="Summary" name="Summary">Sumário</h2>

<p>O <strong>operador condicional (ternário)</strong> é o único operador JavaScript que possui três operandos. Este operador é frequentemente usado como um atalho para a instrução <a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if</code></a>.</p>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="syntaxbox"><em>condition</em> ? <em>expr1</em> : <em>expr2</em> </pre>

<h2 id="Parâmetros">Parâmetros</h2>

<dl>
 <dt><code>condition</code></dt>
 <dd>Uma expressão que é avaliada como <code>true</code> ou <code>false</code>.</dd>
</dl>

<dl>
 <dt><code>expr1</code>, <code>expr2</code></dt>
 <dd>Expressões com valores de qualquer tipo.</dd>
</dl>

<h2 id="Descrição">Descrição</h2>

<p>Se <code>condition</code> é <code>true</code>, o operador retornará o valor de <code>expr1</code>; se não, ele retorna o valor de <code>exp2</code>. Por exemplo, para exibir uma mensagem diferente baseada no valor da variável <code>isMember</code>, você poderá utilizar o código (statement) seguinte:</p>

<pre class="brush: js">"The fee is " + (isMember ? "$2.00" : "$10.00")
</pre>

<p>Conforme o resultado da operação, você também poderá atribuir a variáveis:</p>

<pre class="brush: js">var elvisLives = Math.PI &gt; 4 ? "Yep" : "Nope";</pre>

<p>Também são possíveis múltiplas avaliaçãoes ternárias (nota: o operador condicional é associativo a direita):</p>

<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> firstCheck <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span>
    secondCheck <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span>
    access <span class="operator token">=</span> firstCheck <span class="operator token">?</span> <span class="string token">"Access denied"</span> <span class="punctuation token">:</span> secondCheck <span class="operator token">?</span> <span class="string token">"Access denied"</span> <span class="punctuation token">:</span> <span class="string token">"Access granted"</span><span class="punctuation token">;</span>

console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span> access <span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // logs "Access granted"</span></code></pre>

<p>Você também pode usar avaliações ternárias no espaço livre de modo a fazer diferentes operações:</p>

<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> stop <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span> age <span class="operator token">=</span> <span class="number token">16</span><span class="punctuation token">;</span>

age <span class="operator token">&gt;</span> <span class="number token">18</span> <span class="operator token">?</span> location<span class="punctuation token">.</span><span class="function token">assign<span class="punctuation token">(</span></span><span class="string token">"continue.html"</span><span class="punctuation token">)</span> <span class="punctuation token">:</span> stop <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span></code>
</pre>

<p><span id="result_box" lang="pt"><span class="hps">Você também pode fazer</span> <span class="hps">mais do que uma única operação</span><span class="hps"> em cada</span> <span class="hps">caso,</span> <span class="hps">separando-os por</span> <span class="hps">vírgula</span><span>:</span></span></p>

<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> stop <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span> age <span class="operator token">=</span> <span class="number token">23</span><span class="punctuation token">;</span>

age <span class="operator token">&gt;</span> <span class="number token">18</span> <span class="operator token">?</span> <span class="punctuation token">(</span>
    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"OK, you can go."</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
    location<span class="punctuation token">.</span><span class="function token">assign<span class="punctuation token">(</span></span><span class="string token">"continue.html"</span><span class="punctuation token">)</span>
<span class="punctuation token">)</span> <span class="punctuation token">:</span> <span class="punctuation token">(</span>
    stop <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Sorry, you are much too young!"</span><span class="punctuation token">)</span>
<span class="punctuation token">)</span><span class="punctuation token">;</span></code>
</pre>

<p><span id="result_box" lang="pt"><span class="hps">Você também pode fazer</span> <span class="hps">mais de uma operação</span> <span class="hps">durante a</span> <span class="hps">atribuição de</span> <span class="hps">um valor</span></span>. Neste caso, <strong><em><span id="result_box" lang="pt"><span class="hps">o último valor</span> <span class="hps">separado por vírgula</span> dentro <strong><em><span id="result_box" lang="pt"><span class="hps">dos</span> <span class="hps">parênteses </span></span></em></strong><span class="hps">será o</span> <span class="hps">valor a ser atribuído</span></span></em></strong>.</p>

<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> age <span class="operator token">=</span> <span class="number token">16</span><span class="punctuation token">;</span>

<span class="keyword token">var</span> url <span class="operator token">=</span> age <span class="operator token">&gt;</span> <span class="number token">18</span> <span class="operator token">?</span> <span class="punctuation token">(</span>
    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"OK, you can go."</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
   <span class="comment token"> // alert returns "undefined", but it will be ignored because
</span>   <span class="comment token"> // isn't the last comma-separated value of the parenthesis
</span>    <span class="string token">"continue.html"</span><span class="comment token"> // the value to be assigned if age &gt; 18
</span><span class="punctuation token">)</span> <span class="punctuation token">:</span> <span class="punctuation token">(</span>
    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"You are much too young!"</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Sorry :-("</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
   <span class="comment token"> // etc. etc.
</span>    <span class="string token">"stop.html"</span><span class="comment token"> // the value to be assigned if !(age &gt; 18)
</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

location<span class="punctuation token">.</span><span class="function token">assign<span class="punctuation token">(</span></span>url<span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // "stop.html"</span></code></pre>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificações</th>
   <th scope="col">Status</th>
   <th scope="col">Comentários</th>
  </tr>
  <tr>
   <td>ECMAScript 1st Edition.</td>
   <td>Standard</td>
   <td>Definição inicial. Implementado em JavaScript 1.0</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('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">Veja também</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">Operador condicional if</a></li>
</ul>