Formatage des chaînes multi-lignes en JavaScript : concaténation vs ligne unique

Question

Deux questions sur cette étape 1 :
J'ai fait 2 codes différents :
Code 1 :
do {
var choix;
choix = Number(prompt("Que souhaitez vous faire ?

1 - Addition
 2 - Multiplication
 3 - Soustraction
 4 - Division
"));
} while (choix 4 || isNaN(choix));
Code 2 :
do {
var choix2;
choix2 = Number(prompt("Que souhaitez vous faire ?

"
+ "1 - Addition
"
+ "2 - Multiplication
"
+ "3 - Soustraction
"
+ "4 - Division
"));
} while (choix2 4 || isNaN(choix2));
Question 1 : pour l'organisation du code et comme je t'ai déjà vu faire sur un exercice, le code 2 semble "plus clair" à voir mais un peu plus "chiant à mettre en place" : de la concaténation pour pouvoir aller à la ligne et "clarifier" ce qu'on fait. Le code 1 plus simple et direct mais moins parlant visuellement. Du coup lequel privilégier ?
Question 2 : je suis parti sur un test avec et > plutôt que de tester 4 choix différents avec != . isNaN(choix2) ou isNaN(choix) selon le code permet d'être sûr que j'ai pas de texte et le Number() être sûr que j'ai bien un nombre. Mon souci c'est qu'avec ça si la personne veut annuler elle peut pas... Bon choix ? Mauvais ? On garde ou faut pouvoir annuler et comment du coup ?

Louis-Nicolas Leuillet · Accepted Answer

Alors, pour ta première question sur le style d'écriture du prompt : honnêtement, les deux sont valides et c'est vraiment une question de préférence. Le code 2 avec la concaténation est effectivement plus lisible quand tu relis ton code, surtout si le message s'allonge.
Mais bon, pour un petit prompt comme ça, le code 1 fait très bien l'affaire. ;)
En pratique, tu verras souvent les développeurs utiliser les template literals (avec les backticks - on voit ça dans la suite dans cette formation) qui permettent d'écrire directement sur plusieurs lignes sans concaténation :
choix = Number(prompt(`Que souhaitez-vous faire ?
1 - Addition
2 - Multiplication
3 - Soustraction
4 - Division`));
C'est le meilleur des deux mondes : lisible dans le code ET simple à écrire.
Pour ta deuxième question, ton raisonnement avec < et > est top, c'est plus maintenable que de tester chaque valeur individuellement. Par contre, pour le isNaN() , petite subtilité : si l'utilisateur clique sur "Annuler", prompt() renvoie null , et Number(null) donne 0 . Donc ton isNaN() ne le détecte pas, mais ton choix < 1 oui ! Du coup la boucle continue, ce qui empêche effectivement d'annuler.
Dans une vraie application, tu voudrais probablement permettre l'annulation. Tu pourrais capturer le résultat du prompt() avant le Number() et vérifier si c'est null :
var saisie = prompt("...");
if (saisie === null) {
// L'utilisateur a annulé
}
var choix = Number(saisie);

René Barousse · Answer

Du coup, là, je suis bon ?
// Étape 1
do {
var choix;
choix = prompt("Que souhaitez-vous faire ?

1 - Addition
 2 - Multiplication
 3 - Soustraction
 4 - Division
");
// Test pour savoir si on clique sur annuler --> si oui, boîte alert et sortie de la boucle
if (choix === null) {
alert("Vous avez annulé.");
break;
}
// Boucle si choix est plus grand que 4 ou petit que 1 ou du texte
} while (choix < 1 || choix > 4 || isNaN(choix));
alert("OK, on passe à l'étape 2");

Louis-Nicolas Leuillet · Answer

Oui, c'est bon ! Ton code gère bien le cas de l'annulation avec le break , et ta condition dans le while couvre les cas où le choix est hors bornes ou invalide.
Juste une petite remarque : comme tu n'as plus le Number() autour du prompt() , ta variable choix est une chaîne de caractères. Ça fonctionne quand même grâce à la coercition de type en JavaScript (il convertit automatiquement "2" en 2 pour les comparaisons), mais c'est un peu "magique".
Pour être plus explicite, tu peux soit remettre le Number() après ton test de null , soit convertir au moment de la condition :
do {
var choix = prompt("Que souhaitez vous faire ?

1 - Addition
 2 - Multiplication
 3 - Soustraction
 4 - Division
");
if (choix === null) {
alert("Vous avez annulé");
break;
}
choix = Number(choix);
} while (choix < 1 || choix > 4 || isNaN(choix));
Sinon tu vas comparer des chaînes au lieu de nombres et ça peut te jouer des tours plus tard.

René Barousse · Answer

OK, merci.

René Barousse · Answer

Le if a pris du temps à intégrer, et j'en ai oublié de reconvertir avec Number :p

Louis-Nicolas Leuillet · Answer

Ahah, c'est classique ça ! On se concentre sur un problème mais on oublie un détail qu'on avait avant

Formatage des chaînes multi-lignes en JavaScript : concaténation vs ligne unique

Formation JavaScript (legacy)