Comment écrire une instruction IF en ligne en JavaScript?

286

Comment puis-je utiliser une ifinstruction inline en JavaScript? Existe-t-il également une elsedéclaration en ligne ?

Quelque chose comme ça:

var a = 2;
var b = 3;

if(a < b) {
    // do something
}
Relax
la source
12
Où est le jQuery ici? Et je ne comprends pas vraiment la question de toute façon.
Marc
la partie jquery peut être comme ceci $ (document) .ready (function () {var a = 2; var b = 3; if (a <b) {// faire quelque chose}});
takeItEasy
c'est aussi une question à
couper le souffle
1
C'est aussi une question angulaire 1 et 2 et tous les autres frameworks js (y compris vanilla.js)
Ben Taliadoros

Réponses:

641

Vous n'avez pas nécessairement besoin de jQuery. Seul JavaScript fera cela.

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

La cvariable sera minorsi la valeur est true, et majorsi 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

MattW
la source
59
Il illustre comment utiliser un IF en ligne, qui répond EXACTEMENT à la question.
MattW
26
Juste pour noter, toutes les parens dans ce cas sont facultatives. C'est souvent le style de préférence / codage personnel qui dicte quand ils sont utilisés.
Will Klein
3
@khany, c'est une question JavaScript. Les expressions peuvent être évaluées différemment dans d'autres langues.
Will Klein
1
@MattW Cela ne montre pas comment utiliser un IF en ligne, il montre comment utiliser un IF ELSE
Finlay Percy
1
@getName pas vraiment, mais vous pouvez utiliser une instruction if si vous le souhaitezif (a < b) c = 'major';
MattW
44

Pour écrire une ifinstruction en ligne, le code qu'il contient ne doit être qu'une seule instruction:

if ( a < b ) // code to be executed without curly braces;
indéfini
la source
43

Il existe un opérateur ternaire, comme celui-ci:

var c = (a < b) ? "a is less than b"  : "a is not less than b";
Mahmoud Gamal
la source
4
Il n'a en fait pas besoin d'être affecté à quoi que ce soit. Les éléments de droite peuvent simplement être des appels de fonction.
jfriend00
7
Ils n'ont même pas besoin d'être des appels de fonction ... 0 < 1 : 5 : 120;est une déclaration parfaitement valable. Un peu inutile, sauf si vous êtes payé par ligne.
Ry-
Ok, @ jfriend00, minitech, merci pour les conseils.
Mahmoud Gamal
@ jfriend00 Je le déconseille cependant dans presque tous les cas. Si vous n'utilisez pas la valeur de l'expression, alors ce que vous voulez vraiment, ce sont des effets secondaires; et les effets secondaires sont ce pour quoi les déclarations sont excellentes. L'utilisation de la vieille ifdéclaration ennuyeuse dans un tel cas rendra probablement votre code beaucoup plus facile à lire et à comprendre, et moins susceptible de rompre avec les modifications ultérieures.
Emil Lundberg
35

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

(a && b) || c

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

a ? b : c

Et bien sûr, à peu près la même chose que:

if ( a ) { b } else { c }

Je dis à peu près parce qu'il y a une différence avec cette approche, en ce que vous devez savoir que la valeur de bsera évaluée comme vraie, sinon vous obtiendrez toujours c. Fondamentalement, vous devez réaliser que la partie qui apparaîtrait if () { here }fait maintenant partie de la condition que vous placez if ( here ) { }.

Ce qui précède est possible en raison du comportement JavaScripts de passer / renvoyer l'une des valeurs d'origine qui ont formé 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 avantage principal, par rapport à une instruction 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 affectation.

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

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

La seule façon d'y parvenir avec une instruction if standard serait de dupliquer l'assignation:

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

Vous pouvez vous demander pourquoi utiliser uniquement des opérateurs logiques au lieu de l' opérateur ternaire , pour des cas simples, vous ne le feriez probablement pas, sauf si vous vouliez vous en assurer aet que les bdeux étaient vrais. Vous pouvez également obtenir des conditions complexes plus rationalisées avec les opérateurs logiques, qui peuvent devenir assez compliqués à l'aide d'opérations ternaires imbriquées ... là encore si vous voulez que votre code soit facilement lisible, ni vraiment intuitif.

Pebbl
la source
32

En clair, la syntaxe expliquait:

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

Peut s'écrire comme:

condition ? do_something_if_condition_is_met : do_something_else_if_condition_is_not_met;
Onimusha
la source
5
Est-il possible de le faire sans l'instruction "else"? iecondition ? true
Devil's Advocate
@ScottBeeson Bien sûr. Cela dépend également de votre utilisation de la condition. true falseet ""devrait tous être bien pour ignorer la partie else.
Onimusha
Alors , 2 == 2 ? doSomething()serait le même que celui if (2 == 2) doSomething()?
Devil's Advocate
1
Oui, mais la partie else ne peut pas être complètement omise. Au bail : falseou : ""devrait être là car javascript s'y attend.
Onimusha
5
Oh. Il n'est donc pas possible de le faire sans l'instruction else.
Devil's Advocate
21
<div id="ABLAHALAHOO">8008</div>
<div id="WABOOLAWADO">1110</div>

parseInt( $( '#ABLAHALAHOO' ).text()) > parseInt( $( '#WABOOLAWADO ).text()) ? alert( 'Eat potato' ) : alert( 'You starve' );
HyderA
la source
48
Je ne sais même pas ce que je viens de lire, mais je ris assez fort.
Jazz
20

Si vous voulez juste un IF en ligne (sans 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.

Nahn
la source
17

Vous pouvez faire ceci en JavaScript:

a < b ? passed() : failed();
Ivar
la source
8

Pour info, vous pouvez composer des 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 prévoyez d'utiliser cette logique plus d'une fois, vous devez l'encapsuler dans une fonction pour garder les choses agréables et SECHES.

alan
la source
6

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 ) );
kurt
la source
4

Pour ajouter à cela, vous pouvez également utiliser inline if 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";
Anoop
la source
0

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 se traduira.

cependant, méfiez-vous de ce qui suit

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

assurez-vous de mettre du code ambigu entre accolades car ce qui précède lèvera une exception (et des permutations similaires produiront un comportement indésirable.)

Jay Edwards
la source
0

en ligne si:

(('hypothesis') ? 'truthy conclusion' : 'falsey conclusion')

conclusion véridique: déclarations exécutées lorsque l'hypothèse est vraie

conclusion de falsey: déclarations exécutées lorsque l'hypothèse est fausse

votre exemple:

var c = ((a < b) ? 'a<b statements' : '!(a<b) statements');
Sammy
la source