|
16.3 (condition)?(sivrai):(sifaux)... opérateur ternaire |
  copyleftSee You Why? |
Le lecteur qui a quelques notions du langage C ou autre langage sera heureux de retrouver cette structure commune à différents langages. Il s'agit bien d'un opérateur qui teste une condition, puis, selon que la condition se révèle vraie ou fausse, affecte une variable de valeur différente.
Cet opérateur est généralement baptisé l' "opérateur conditionnel" ou encore l' "opérateur ternaire", puisqu'il qu'il utilise trois opérandes. Sa syntaxe est :
condition?resultat1:resultat2
Un premier exemple de l'ordinateur qui délibère seul :
mention = (moyenne<10)?'refusé':'admis';
Donnons-en un deuxième exemple (qui fait appel à l'objet Date() que nous abordons au chapitre 35, mais le lecteur aura vite compris que maintenant sera un objet Date et que gethours() extrait l'heure de cet objet Date) et montrons que cette syntaxe condensée peut toujours s'écrire sous forme d'un IF... ELSE...
var maintenant = new Date();
var salutation = "Bon" + ((maintenant.getHours() > 17) ? "soir." : "jour.");
Cette double instruction affecte "Bonjour." à la variable 'salutation', sauf s'il est 18 heures ou plus, auquel cas la valeur affectée deviendrait "Bonsoir.", ce qui aurait pu s'écrire :
var maintenant = new Date();
if (maintenant.getHours() > 17) {
var salutation = "Bon"+"soir.";
} else {
var salutation = "Bon"+"jour.");
}
Un retour à notre premier exemple, plus simple, affectera la variable 'mention' de la valeur 'réussite' ou 'échec' selon que la moyenne soit ou non supérieure à 10/20...
var moyenne = prompt("Quelle est la moyenne de l'élève ?");
var mention = (moyenne >=10)?"réussite":"échec";
que l'on aurait aussi pu écrire ainsi :
var moyenne = prompt("Quelle est la moyenne de l'élève ?");
if (moyenne >= 10) {
var mention = "réussite";
} else {
var mention = "échec");
}
Dans nos deux exemples précédents, on affectait une variable d'une valeur, selon une condition fixée. Même si certains tutoriels n'en parlent pas et d'autres mentionnent qu'il faut l'éviter, JS permet aussi d'exécuter une instruction unique différente selon la valeur de la condition...
Nous proposons même ici, un moyen de contourner cette instruction unique en créant des fonctions qui regroupent plusieurs instructions ;
nombreux sont ceux qui ont essayé diverses tentatives pour y arriver sur base de la syntaxe de base :
Condition ? Instruction_1 : Instruction_2;
- emploi de l'opérateur && (voir chap. 17, conditions complexes)
Condition ? Instruction_1 && Instruction_2 : Instruction_3 && Instruction_4;
- emploi de parenthèses
Condition ? (Instruction_1; Instruction_2;) : (Instruction_3; Instruction_4);
- emploi de virgules, de crochets, etc.
function casvrai() {
instruction1;
instruction2;
return true;
}
function casfaux() {
instruction3;
instruction4;
return true;
}
Condition ? casvrai() : casfaux();
Nous verrons même que des conditions imbriquées peuvent être utilisées en suivant la syntaxe suivante où vous voyez 3 conditions dans une même instruction :
(cond1 ? (cond2 ? result21 : result22 ) : (cond3 ? result31 : result32 ) );
Nous n'avons trouvé que peu de tutoriels qui prenaient le soin d'expliciter des conditions multiples imbriquées dans une même instruction faisant appel à la procédure '?:' nous allons donc proposer ici un nouvel exemple d'utilisation classique de l'opérateur dit 'ternaire', montrer qu'en une seule ligne d'instruction, il peut se traduire par des conditions IF...ELSE... avant de montrer des exemples d'utilisation de cet opérateur ternaire avec de multiples conditions imbriquées. Ainsi :
if (x == "p") {
a = 22;
} else {
a = 23;
}
peut aussi s'écrire :
a= (x="p")?22:23;
Imaginons un nombre entier tiré au hasard entre 1 et 999. On demande de le situer par rapport au nombre de chiffres. Il s'agit donc de le situer dans l'une de tranches [1,9], [10,99] ou [100,999]... ce qui risque de générer de nombreux tests consécutifs.
On commencera par établir une condition simple... mais extrême...
dans notre cas,
- soit plus petit (strictement) que 10,
- soit plus grand (ou égal) que 100.
On écrira donc
message = (n<10)?"un seul chiffre.":message2;
ou
messagebis = (n>=100)?"trois chiffres.":message2bis;
Les messages non fixés ne le sont pas, car ils dépendent encore d'une condition... toujours aussi simple, mais à peine moins extrême...
dans notre cas,
- message2 variera selon que n soit plus petit que 100 ou non,
- message2bis variera selon que n soit plus grand que 10 ou non.
On écrira donc
message = (n<10)?"un seul chiffre.":(n<100)?"deux chiffres":"trois chiffres";
ou
messagebis = (n>=100)?"trois chiffres.":(n>=10)?"deux chiffres":"un seul chiffre";
Il nous parait évident que les deux méthodes (bis ou non) sont équivalentes... et si la condition par laquelle on commence est la plus sévère... c'est chaque fois l'instruction après le deux-points que l'on développe (en devenant de moins en moins sévère)...
Le lecteur attentif aura compris que si on commence par une condition moins sévère, c'est chaque fois l'instruction avant le deux-points que l'on précise (en devenant de plus en plus sévère)...
On ne s'étonnera pas d'instruction telle que :
frais_transport = (total_commande<1500)?(total_commande<750)?35:25:0;
que l'on pourra mentalement décomposer ainsi, même si JS ne joue pas avec des couleurs :
frais_transport = (total_commande<1500)?(total_commande<750)?35:25:0;
La partie notée en rouge n'étant que l'instruction (elle aussi conditionnelle) à exécuter si la condition (notée en vert) est vérifiée.
Le lecteur attentif aura compris ce que signifie cette ligne unique de code :
var langue = localStorage['langue'] != undefined ? localStorage['langue'] : 'FR';
Non? Un peu d'aide alors. Généralement une contion se note entre parenthèses, donc on lira :
var langue = (localStorage['langue'] != undefined) ? localStorage['langue'] : 'FR';
Ou encore (sans oublier que JS ne connait pas les couleurs) :
var langue = (localStorage['langue'] != undefined) ? localStorage['langue'] : 'FR';
c'est-à-dire :
La variable langue nouvellement déclarée, prendra comme valeur,
* si le tableau localStorage, à l'indice 'langue', n'est pas indéfini,
prendra la valeur définie,
* sinon, le tableau localStorage, à l'indice 'langue'
prendra la valeur 'FR'.
Mais quoi de mieux que de connaitre l'usage des tableaux associatifs... ce sera fait au chapitre 26, ici.
Un autre exemple ? Plus facile semble-t-il...
var txtVedette = (txtSex=="M")?"Monsieur":"Madame";
voir suite >>>
voir suite >>>
voir suite >>>
