web-dev-qa-db-fra.com

Comment écrire une déclaration IF intégrée en JavaScript?

Comment utiliser une instruction if inline en JavaScript? Existe-t-il également une instruction else intégrée?

Quelque chose comme ça:

var a = 2;
var b = 3;

if(a < b) {
    // do something
}
javascriptif-statementternary-operatorconditional-operator
254
takeItEasy

Vous n'avez pas nécessairement besoin de jQuery. JavaScript seul le fera.

var a = 2;
var b = 3;    
var c = ((a < b) ? 'minor' : 'major');

La variable c sera minor si la valeur est true, et major si la valeur est false.

C'est ce qu'on appelle un opérateur conditionnel (ternaire).

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator

571
MattW

Pour l'écriture d'une instruction if en ligne, le code qu'il contient ne devrait être qu'une instruction:

if ( a < b ) // code to be executed without curly braces;
42
undefined

Il y a un opérateur ternaire, comme ceci:

var c = (a < b) ? "a is less than b"  : "a is not less than b";
41
Mahmoud Gamal

Vous pouvez également approximer un if/else en utilisant uniquement des opérateurs logiques.

(a && b) || c

Ce qui précède revient à peu près à dire:

a ? b : c

Et bien sûr, à peu près les mêmes que:

if ( a ) { b } else { c }

Je dis en gros, car il y a une différence avec cette approche, en ce sens qu'il faut savoir que la valeur de b sera évaluée comme vraie, sinon vous obtiendrez toujours c. En gros, vous devez comprendre que la partie qui apparaîtrait if () { here } fait désormais partie de la condition dans laquelle vous placez if ( here ) { }.

Ce qui précède est possible en raison du comportement de JavaScripts consistant à transmettre/renvoyer l'une des valeurs d'origine constituant l'expression logique, laquelle dépend du type d'opérateur. Certains autres langages, comme PHP, conservent le résultat réel de l'opération, c'est-à-dire vrai ou faux, ce qui signifie que le résultat est toujours vrai ou faux; par exemple:

14 && 0          /// results as 0,  not false
14 || 0          /// results as 14, not true
1 && 2 && 3 && 4 /// results as 4,  not true
true && ''       /// results as ''
{} || '0'        /// results as {}

Un des principaux avantages, par rapport à une déclaration if normale, est que les deux premières méthodes peuvent fonctionner du côté droit d’un argument, c’est-à-dire dans le cadre d’une cession.

d = (a && b) || c;
d = a ? b : c;

if `a == true` then `d = b` else `d = c`

Le seul moyen d'y parvenir avec une norme si l'instruction est de dupliquer l'assignation:

if ( a ) { d = b } else { d = c }

Vous pouvez demander pourquoi utiliser simplement opérateurs logiques au lieu de opérateur ternaire , pour des cas simples, vous ne le feriez probablement pas, à moins de vouloir vous assurer que a et b étaient tous deux vrais. Vous pouvez également obtenir des conditions complexes plus rationalisées avec les opérateurs logiques, ce qui peut être assez chaotique si vous utilisez des opérations ternaires imbriquées ... Si vous voulez que votre code soit facilement lisible, ni l'une ni l'autre ne sont vraiment intuitives.

32
Pebbl

En clair, la syntaxe expliquée:

if(condition){
    do_something_if_condition_is_met;
}
else{
    do_something_else_if_condition_is_not_met;
}

Peut être écrit comme:

condition ? do_something_if_condition_is_met : do_something_else_if_condition_is_not_met;
30
Onimusha
<div id="ABLAHALAHOO">8008</div>
<div id="WABOOLAWADO">1110</div>

parseInt( $( '#ABLAHALAHOO' ).text()) > parseInt( $( '#WABOOLAWADO ).text()) ? alert( 'Eat potato' ) : alert( 'You starve' );
20
HyderA

Vous pouvez faire comme ceci en JavaScript:

a < b ? passed() : failed();
16
Ivar

Si vous voulez juste un IF en ligne (sans l'ELSE), vous pouvez utiliser l'opérateur logique AND:

(a < b) && /*your code*/;

Si vous avez également besoin d'un ELSE, utilisez l'opération ternaire suggérée par les autres personnes.

14
Nahn

J'ai souvent besoin d'exécuter plus de code par condition, en utilisant: ( , , ) plusieurs éléments de code peuvent exécuter:

var a = 2;
var b = 3;
var c = 0;

( a < b ?  ( alert('hi'), a=3, b=2, c=a*b ) : ( alert('by'), a=4, b=10, c=a/b ) );
6
kurt

Pour votre information, vous pouvez composer opérateurs conditionnels

var a = (truthy) ? 1 : (falsy) ? 2 : 3;

Si votre logique est suffisamment complexe, vous pouvez envisager d'utiliser un IIFE

var a = (function () {
  if (truthy) return 1;
  else if (falsy) return 2;
  return 3;
})();

Bien sûr, si vous envisagez d’utiliser cette logique plus d’une fois, vous devez l’encapsuler dans une fonction permettant de garder les choses sereines et sèches.

5
alan

Pour ajouter à cela, vous pouvez également utiliser inline si la condition avec && et || les opérateurs. Comme ça

var a = 2;
var b = 0;

var c = (a > b || b == 0)? "do something" : "do something else";
4
Anoop

La question n'est-elle pas essentiellement: puis-je écrire ce qui suit?

if (foo)
  console.log(bar)
else
  console.log(foo + bar)

la réponse est oui, ce qui précède va se traduire.

cependant, méfiez-vous de ce qui suit

if (foo)
  if (bar)
    console.log(foo)
  else 
    console.log(bar)
else 
  console.log(foobar)

veillez à entourer les accolades de code ambigu, car ce qui précède génère une exception (et des permutations similaires engendrent un comportement indésirable.)

0
Jay Edwards