docjavascript - littérales de chaîne
download 
Plainte Transcription
javascript - littérales de chaîne
Littérales de chaînes J AVA S C R I P T (Programmation Internet) V O L . X X I I Pour Débutants J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga +243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818 [email protected] Les LITTÉRALES DE CHAÎNE : Depuis ECMAScript 2015 (= ES6) existent les « littérales de chaîne » ou « template strings » ou « template literals » ou « modèles de libellés » ou « libellés de chaînes de caractères » ou « gabarits de chaînes de caractères ». Ce sont des chaînes de caractères (strings) qui s’utilisent comme des chaînes ordinaires (celles délimitées par des guillemets [doubles] ou des apostrophes = guillemets simples), mais dans lesquelles on peut utiliser et mélanger librement des guillemets et apostrophes, manipuler des variables, paramètres formels, expressions et formules, appeler des fonctions,… bref tout ce qui retourne une valeur et ce, sans opération de concaténation. Il ne faut pas confondre les « littérales de chaîne » avec la « chaîne de format » des langages C) C’est un peu plus difficile à obtenir que les guillemets et apostrophes, mais il paraît plus logique et plus intéressant de ne plus utiliser que le « ` » comme délimiteurs des chaînes de caractères à la place des guillemets ou apostrophes. Pour saisir un back-tick ou backquotes (accent grave simple) comme tel dans une littérale de chaîne, il faut le précéder d’un caractère d’échappement « \` ». <script> "use strict"; console.log(`Littéral \`de\` chaîne.`); J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII console.log(`Littéral "de" chaîne.`); console.log(`Littéral 'de' chaîne.`); console.log("Chaîne avec `guillemets`."); console.log('Chaîne avec `apostrophes`'); console.log("Chaîne avec \"guillemets\"."); console.log('Chaîne avec \'postrophes\''); </script> Simple littéral de chaîne : <script> "use strict"; console.log(`Littéral de chaîne.`); console.log("Chaîne avec guillemets."); console.log('Chaîne avec apostrophes'); </script> Littéral de chaîne avec variable : <body></body> <script> "use strict"; Littérales de chaînes - 2/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII let v={x:"Ixhe" , y:"Igrec"} console.log( `Une variable dans « ${Object.values(v)} » une chaîne litérale`); </script> Pour éviter les mauvais renvois à la ligne il n’est pas nécessaire de découper les « littérales de chaîne » avec un « backslash ». Le texte à la sortie est automatiquement découpé en fonction des coupures dans le code source, et surtout tous les espaces blancs y compris ceux en début des lignes sont respectés, contrairement à l’HTML qui ne retient que le premier caractère d’espacement. Pour éviter la pléthore d’espaces blancs au début d’une nouvelle ligne, commencez cette nouvelle ligne juste à la marge gauche du code source. <script> "use strict"; console.log( `Une très très longue littérale de chaîne qui doit nécessairement être découpée dans le code source pour la rendre plus facile à lire sans faire défiler la page avec l'ascenseur couché.` ) </script> Littérales de chaînes - 3/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Le « backslash » n’est pas un caractère spécial, n’a pas d’interprétation spéciale et n’introduit pas une séquence d’échappement <script> "use strict"; console.log( `Une autre longue \ littérale de chaîne.` ) </script> Configuration interne d’une « littérale de chaîne » : <body></body> <script> "use strict"; Littérales de chaînes - 4/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII let v={x:"Ixhe" , y:"Igrec" , z:Number(10)}, lc = `${Object.values(v)}` // Configuration interne de la littérale de chaîne "lc" console.log( Object.getOwnPropertyDescriptors(lc) ); // Configuration interne de la littérale d'objet "v" console.log( Object.getOwnPropertyDescriptors(Object.values(v)) ); </script> Même les nombres sont stockés en tant que alpha et non pas en tant que numériques. Voyez même ci-dessous, « 10d » n’est pas en binaire « 1010b ». Littérales de chaînes - 5/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Exemple : Écrire un code qui écrit dans l’élément <body></body> : C’est l’occasion aussi d’illustrer une « littérale de chaîne ». La syntaxe d’une « littérale de chaîne » est la suivante : ${nom_variable | nom_paramètre_formel | expression | fonction}. `` : = paire de back-tick (accent grave simple, <ALT-7>-<Barre d’espacement> ou ASCII 96 ou « ` » ou « 0x60 » ou « ` » ou « CTRL-ALT-7 » avec certains logiciels) introduit la littérale de chaîne (ou template strings). $ : introduit une variable dans la littérale de chaîne, {} : placeholder = espace réservé. Délimitent la chaîne à substituer (interpolation d’expression) qui peut représenter I. le nom d’une variable ou d’un paramètre formel. II. une expression à évaluer. III. un ou plusieurs appels de fonction. Les $ et {} ne sont nécessaires que quand on doit saisir une variable, une expression ou une formule à calculer… Attention, le back-tick (accent grave simple) est une fonctionnalité JavaScript non encore reconnue par HTML/DOM. Littérales de chaînes - 6/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Remplacement de variables [ou de paramètre formel] : <body></body> <script> "use strict"; let f = (nom,matr) => `<div style=background:navy;color:red;font-size:16pt> Notre DIV</div> Bonjour, Mme/Mlle,M. « ${nom} » Matr: « ${matr} ».`; document.body.innerHTML =f("Elaka",2018); </script> Remplacement d’expressions arithmétiques : <script> "use strict"; const x = 3, y = 5; console.log( `(${x} + ${y})² = ${x*x + y*y +2*x*y}` ) // (3 + 5)² = 64 </script> Appel de fonctions : <script> "use strict"; const x = 3, y = 5; console.log( Littérales de chaînes - 7/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII `Racine carrée de (${x} + ${y})² =`, `${Math.sqrt(Math.pow(x,2) + Math.pow(y,2) + 2*x*y)}` ) // Racine carré de (3 + 5)² = 8 </script> La méthode « String . raw ( ) » : Affiche le brut du contenu d'un « template string ». Sans « String . raw ( ) » : <script> "use strict"; console.log( `Un \n caractère \t de contrôle.` ) </script> Avec « String . raw ( ) » : <script> "use strict"; console.log( String.raw`Un \n caractère \t de contrôle.`); </script> La littérale de chaîne permet d’avoir une « template » pour le traitement d’une chaîne utilisée comme argument d’appel d’une fonction. Toute expression ou valeur « x » non contenue dans un formateur « $ { x } » est un Littérales de chaînes - 8/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII élément de l’array du premier paramètre dans la fonction appelée (cidessous le paramètre « stg ») dans l’ordre dans lequel ils sont rencontrés, et tout formateur « $ { x } » est un élément de l’array du paramètre du reste (2è paramètre) dans la fonction appelée. Donc toute chaîne avant le premier « $ { x } » a l’indice 0 dans le premier paramètre de la fonction appelée, donc chaque « $ { x } » incrémente l’indice dans la liste des éléments de l’aray du premier paramètre dans la fonction appelée, même quand deux « $ { x } » ne sont pas séparés d’un espace. <script type="text/javascript"> "use strict"; function diag(stg, ...argum) { return stg[0]+argum[0]+stg[1]+argum[1]+stg[2]; } const stg1 = "voleur"; const stg2 = "volé"; console.log(diag`Un ${stg1} qui s'est fait ${stg2} pleure`); </script> <script type="text/javascript"> `use strict`; const laDate = (txt, ...rParam) => { let data = ''; console.log("txt ",txt) console.log("rParam =",rParam) alert(txt + "\n" + rParam) txt.forEach((e, i) => { if(rParam[i]) data += e + rParam[i]; }); return data; } const j = 27; const m = "novembre"; const a = 2018; const ts = `Jour = ${j} / Mois = ${m} / Année = ${a}`; Littérales de chaînes - 9/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu console.log(laDate`${ts}`); </script> JavaScript Tome-XXII À l’exécution : Notez ceci : La fonction [fléchée] n’est pas appelée avec la liste d’arguments dans une paire de « parenthèses », mais avec une « littérale de chaîne » qui sert de « template ». Voyons comment cette template est configurée et reçue par la fonction appelée « laDate » : Le premier paramètre (celui de gauche = « txt ») reçoit les parties de la template dans une Array. Les parties constituantes de cette Array sont délimitées dans la « littérale de chaîne » par les « place holders » ( $ { } ) dont les contenus sont constitués des variables « j », « m » et « a » définies audessus de l’appel de la fonction. Les 4 éléments de l’Array de notre template sont donc comme indiquée dans le message pop-up et l’affichage dans la console : Littérales de chaînes - 10/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII « 0 : Jour = », « 1 : / Mois = » et « 2 : / Année = » et « Une chaîne vide » qui représentant le reste vide de la littérale de chaîne. Quant au paramètre du reste qui dès le départ est par nature lui aussi une Array, il reçoit ici toutes les 3 variables de la littérale de chaîne envoyée à la fonction appelée : « 27 », « novembre » et « 2018 ». Quant à la méthode « String . forEach » elle a été appelée avec deux paramètres, le « e » et le « i » qui sont aussi des « placeholders » : Le paramètre « e » pour chacun des éléments de l’Array-paramètre ITÉRABLE « txt » (puisque c’est lui « txt » qui figure en préfixe de « . forEach ». Le paramètre factice « i » qui nous servira de compteur qui parcourra automatiquement et à partir de l’indice zéro tous les éléments des deux paramètres-Arrays, comme on peut le voir ci-dessous : <script type="text/javascript"> let arr = [47, 95, 19]; 'use strict'; arr.forEach((x, y) => { console.log(x,y); } ); </script> Littérales de chaînes - 11/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII La fonction fléchée anonyme est un callBack qui sera donc automatiquement appelée pour chacun des éléments de l’Array « i » (qui est égale à « txt »), dans leur ordre d’apparition. Tant qu’il y a encore un élément dans l’array « rParam » (c’est-à-dire Tant que l’élément « rParam[i] » ne sera pas null ou undefined ou en simple tant que « rParam [ i ] » s’assimilera à « true », la chaîne de caractère « data » sera ici concaténée par une autre concaténation celle de l’élément correspondant « txt [ i ] » représentée schématiquement par la variable factice « e », avec l’élément « rParam [ i ] ». L’ensemble de la chaîne « data » sera retournée par la fonction « laDate ». Attention ne confondez pas ici « date » avec « e » et « data » avec « a » sans lien spécifique entre les deux. Ce qu’il faut retenir ici c’est que : 1. Les templates littérales de chaîne sont envoyées en paramètres dans des back-ticks ou backquotes (accents graves simples) à la place des parenthèses, 2. Les variables sont enfermées dans des « $ { } », 3. Les variables sont reçues par le paramètre du reste qui est une Array, 4. Les textes de la template sont reçus par le premier paramètre (celui de gauche) sous forme aussi d’Array. Une application pratique du template de littérale de chaîne : <script> "use strict"; const cl=console.log; const d=new Date(); let prepend = (p1,p2) => { const len=p1.length+p2.length; return p2.padStart(len,p1[0]); }; Littérales de chaînes - 12/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII let postpend = (p1,...p2) => { const len=p1[1].length+p2[0].length; return p2[0].padEnd(len,p1[1]); }; let pend = (p1,...p2) => { const len1=p2[0].length+p2[1].length, len2=len1+p1[2].length; return p2[1].padStart(len1,p2[0]).padEnd(len2,p1[2]); }; const w="www.diasoluka.luy"; const re=prepend`http://${w}`; cl(re); const p="http://"; const ro=postpend`${p}www.diasoluka.luy`; cl(ro); const h="http://",u="www.diasoluka"; const rp=pend`${h}${u}.luy`; cl(rp); cl(`Durée = ${(new Date()-d)/1000} secs.`); </script> Une façon classique de le faire : <script> "use strict"; const cl=console.log; const d=new Date(); let prepend = (p1,p2) => { const len=p1.length+p2.length; return p1.padStart(len,p2); }; Littérales de chaînes - 13/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII let postpend = (p1,p2) => { const len=p1.length+p2.length; return p1.padEnd(len,p2); }; let pend = (p1,p2,p3) => { const len1=p1.length+p2.length, len2=len1+p3.length; return p1.padStart(len1,p2).padEnd(len2,p3); }; const re=prepend("/www.diasoluka.luy",`http:/`); cl(re); const ro=postpend(`http://`,`www.diasoluka.luy`); cl(ro); const rp=pend('www.diasoluka',"http://",`.luy`); cl(rp); cl(`Durée = ${(new Date()-d)/1000} secs.`); </script> De façon plus conventionnelle encore : <script> "use strict"; const cl=console.log; const d=new Date(); let prepend = (p1,p2) => { return p2+p1; }; Littérales de chaînes - 14/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu let postpend = (p1,p2) => { return p1.concat(p2); }; JavaScript Tome-XXII let pend = (p1,p2,p3) => { return (p2+p1).concat(p3); }; const re=prepend("/www.diasoluka.luy",`http:/`); cl(re); const ro=postpend(`http://`,`www.diasoluka.luy`); cl(ro); const rp=pend('www.diasoluka',"http://",`.luy`); cl(rp); cl(`Durée = ${(new Date()-d)/1000} secs.`); </script> Littérales de chaînes - 15/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII Mots-clés : Littérales de chaînes, guillemets, apostrophes, String, gabarits de chaînes de caractères, libellés de chaînes de caractères, modèles de libellés, template literals, template strings, littérales de chaîne, chaîne de format, back-tick, backquotes, accent grave simple, caractère d’échappement, backslash, paramètre formel, String.raw, place holder DIASOLUKA Nz. Luyalu Docteur en Médecine, Chirurgie & Accouchements (1977), CNOM : 0866 - Spécialiste en ophtalmologie (1980) Études humanités : Scientifique - Mathématiques & Physique. Informaticien-amateur, Programmeur et WebMaster. Chercheur indépendant, autonome et autofinancé, bénévole, sans aucun conflit d’intérêt ou liens d'intérêts ou contrainte promotionnelle avec qui qu’il soit ou quelqu’organisme ou institution / organisation que ce soit, étatique, paraétatique ou privé, industriel ou commercial en relation avec le sujet présenté. +243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818 [email protected] Autre Lecture : Littérales de chaînes - 16/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-LaCreation D’autres publications pouvant aussi intéresser : • https://www.scribd.com/document/377036251/LeDosage-Des-Medicaments-en-Cac-Cas • https://www.scribd.com/document/377035454/LeHasard-Des-Thermometres-Non-contact-a-Infrarouge • https://www.scribd.com/document/376222482/PetiteIntroduction-Aux-Fonctions-JavaScript • https://www.scribd.com/document/376221919/La-Foien-Jesus-Christ-Pour-Quoi-Faire • https://www.scribd.com/document/375689778/Lacuitevisuelle-angulaire • https://www.scribd.com/document/375349851/Lavariable-This • https://www.scribd.com/document/375024162/FonctionsImbriquees-en-JS • https://www.scribd.com/document/374789297/FormatInterne-Des-Objets-JavaScript • https://www.scribd.com/document/374788758/Iterationsen-JavaScript • https://www.scribd.com/document/374738470/Le-PlusGrand-Secret-de-La-Creation • https://www.scribd.com/document/374597969/NouvelleFormule-d-IMC-indice-de-doduite-Selon-Dr-Diasoluka Littérales de chaînes - 17/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII • https://www.scribd.com/document/373847209/PropertyDescriptors • https://www.scribd.com/document/373833282/l-ObjetGlobal-Window • https://www.scribd.com/document/372665249/JavascriptTome-II • https://www.scribd.com/document/355291488/motiliteoculaire-2 • https://www.scribd.com/document/355291239/motiliteoculaire-I • https://www.scribd.com/document/355290248/Script-dAnalyses-Des-Reflexes-Pupillomoteurs • https://www.scribd.com/document/321168468/Renseigne ments-Id-et-Anthropometriques • https://www.scribd.com/document/320856721/Emission31-Jul-2016 • https://www.scribd.com/document/318182982/Complicati on-Visuelle-du-Traitement-de-La-Malaria • https://www.scribd.com/document/318180637/RapportEntre-Oxymetrie-Et-Type-Respiration • https://www.scribd.com/document/315746265/Classificati on-Des-Medicaments • https://www.scribd.com/document/315745909/Incongruen Littérales de chaînes - 18/19 - jeudi, 4. avril 2019 (10:48 ) J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-XXII ces-Heresies-et-Heterodoxies-de-la-Notion-deLaboratoire • https://www.scribd.com/document/315745725/RapportEntre-Oxymetrie-Et-Type-Respiration Littérales de chaînes - 19/19 - jeudi, 4. avril 2019 (10:48 )
