diff options
Diffstat (limited to 'files/pt-br/web/javascript/reference/operators/conditional_operator')
| -rw-r--r-- | files/pt-br/web/javascript/reference/operators/conditional_operator/index.html | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/operators/conditional_operator/index.html b/files/pt-br/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..9b36afca80 --- /dev/null +++ b/files/pt-br/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,171 @@ +--- +title: Operador Condicional Ternário +slug: Web/JavaScript/Reference/Operators/Operador_Condicional +tags: + - JavaScript + - Operadores Condicionais +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<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 > 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">></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">></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">></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 > 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 > 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="Compatibilidade_dos_navegadores_(browser)">Compatibilidade dos navegadores (browser)</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> |