Présentation de ECMAScript 6

1. Javascript EcmaScript 6

2. Rapide historique Créé en 1995 sous le nom de Mocha puis LiveScript pour Mosaic HTTP Server Rapidement décliné en version client sous le nom de Javascript (Sun et Netscape étaient partenaires) Proposé à la standardisation à ECMA International en 1996, adopté et publié en 1997 (ECMA-262) Javascript : ES6

3. Rapide historique Implémentation par Microsoft sous le nom de JScript Quelques versions (ES2 et ES3 avec expr. régulières, try/catch, ...) en 98 et 99 … puis 10 ans d’hibernation avec une version 4 abandonnée ... Javascript : ES6

4. Rapide historique 2009, ES5 : JSON, mode strict , reflection, etc. Création (2008) puis normalisation (2009) du TC39, un comité technique formé par les principaux fabricants de navigateurs ES5 est le résultat de nombreux compromis, la wishlist des idées en cours est crée : “Harmony” Javascript : ES6

5. Rapide historique 2011 : Le TC39 commence à écrire la prochaine version 2011-2015 : Ecriture … 2015 : Publication de la première Release Candidate ! Javascript : ES6

6. Alors quoi de neuf dans ES6 ? Javascript : ES6

7. Les déclarations de variables Javascript : ES6

8. Jusqu’à ES5, pas de gestion du scope Javascript : ES6 for ( var i = ; i < 10 ; i ++ ) { // Quelque chose. } console .log (i); // => 10, i est défini dans tout le script/bloc

9. ES6 → nouvelles déclarations Javascript : ES6 for ( let i = ; i < 10 ; i ++ ) { // Quelque chose. } console .log (i); // => undefined Les déclarations let définissent des variables dont la portée est limité au bloc courant.

10. ES6 → nouvelles déclarations Javascript : ES6 let i = 'bonjour' ; for ( let i = ; i < 10 ; i ++ ) { console .log (i); // 1 2 3 ... 9 } console .log (i); // => bonjour Les déclarations let définissent des variables dont la portée est limité au bloc courant.

11. ES6 → nouvelles déclarations Javascript : ES6 const PI = 3.14 ; console .log (PI); // => 3.14 PI = 'circonférence d’un cercle' ; // Echoue de manière silencieuse. console .log (PI); // => 3.14 Les déclarations const définissent constantes nommées accessible uniquement en lecture. // Avec un objet : const params = { language: "JS" }; // => { language: 'JS' } params. language = "Ruby" ; // Effectue la modification (WTF?) console .log (params); // => { language: 'Ruby' } params = 5 ; // Echoue de manière silencieuse... console .log (params); // => { language: 'Ruby' }

12. La destructuration Javascript : ES6

13. La déstructuration Javascript : ES6 La déstructuration permet de définir des variables depuis un tableau ou un objet en utilisant une correspondance de motif (pattern matching).

14. La déstructuration Javascript : ES6 var mon_array = [ 'un' , 'deux' , 'trois' , 'quatre' ]; var [a, b, c, d] = mon_array; console .log (a, b, c, d); // => un, deux, trois, quatre // => Il est possible de “zapper” un élément var [un, , trois, quatre] = [ 'α' , 'β' , 'γ' , 'δ' ]; console .log (un, trois, quatre); // => α, γ, δ Exemple avec les tableaux :

15. La déstructuration Javascript : ES6 var mon_object = { a: 1 , b: 2 , c: 3 }; var { a: un, b: deux, c: trois} = mon_object; console .log (un, deux, trois); // => 1, 2, 3 // Marche aussi dans des objets imbriqués var mon_object = { a: 1 , b: { sous_b: 2 }, c: 3 }; var { a: un, b: { sous_b: deux}, c: trois} = mon_object; console .log (un, deux, trois); // => 1, 2, 3 Exemple avec les objets :

16. La déstructuration Javascript : ES6 var [a, b, c] = [1, 2]; console .log (a, b, c); // => 1, 2, undefined var [a] = []; console .log (a); // => undefined Gère les erreurs par une assignation à undefined :

17. La déstructuration Javascript : ES6 var [a, b, c = 'Hoy !' ] = [1, 2] ; console .log (a, b, c); // => 1, 2, 'Hoy !' var {a = 'Badger !' } = [] ; console .log (a); // => 'Badger !' … ou par une valeur par défaut spécifiée :

18. Les prototypes de fonctions Javascript : ES6

19. Valeurs par défaut Javascript : ES6 function defaulted (x, y = 'foobar') { console .log ({ x: x, y: y }); } defaulted(); // => { x: undefined, y: 'foobar' } defaulted( 42 ); // => { x: 42, y: 'foobar' } defaulted( 42 , 'es6' ); // => { x: 42, y: 'es6' } Les paramètres de fonctions peuvent avoir une valeur par défaut en cas de non-assignation

20. Les paramètres restants Javascript : ES6 function ma_fonction (arg1, ...leReste) { console .log (leReste); } ma_fonction(); // => [] ma_fonction( 1 ); // => [] ma_fonction( 1 , 2 ); // => [ 2 ] ma_fonction( 1 , 2 , 3 , 4 , 5 ); // => [ 2, 3, 4, 5 ] Les paramètres de fonctions peuvent être de nombre variable grâce à la syntaxe ...rest

21. Les paramètres restants Javascript : ES6 Cette syntaxe est différente par rapport au fait d’exploiter la variable arguments comme en ES5 : On peut exclure les n premiers paramètres (nommés) ...rest est un vrai tableau, plus besoin d’utiliser Array.prototype.slice.call(arguments) pour par exemple utiliser les structures de boucle (forEach, etc.)

22. Les propagation de paramètres Javascript : ES6 function ma_fonction (arg1, arg2, arg3) { console .log (` 1 : $ {arg1}, 2 : $ {arg2}, 3 : $ {arg3} `); } ma_fonction(); // => 1: undefined, 2: undefined, 3: undefined ma_fonction( 'rn' , 'Quizzard' , 'renater' ); // => 1: rn, 2: Quizzard, 3: renater ma_fonction(...[ 'test' , 'nouveautés' , 'es6' ]); // => 1: test, 2: nouveautés, 3: es6 // => Equivalent ES5 : // ma_fonction.apply(undefined, ['test', 'nouveautés', 'es6']); Les paramètres peuvent être passés par un tableau en utilisant une propagation (spread) :

23. Les fonctions “fléchées” (Arrow functions) Javascript : ES6

24. Les fonctions fléchées Syntaxes : Javascript : ES6 ([parametre] [, parametre]) => { code } ([parametre] [, parametre]) => valeur ou expression parametre => { code } parametre => valeur ou expression

25. Les fonctions fléchées Exemples avec simple retour de valeur ou expression : Javascript : ES6 // Un argument parenthèses non nécessaires var est_pair = n => ! (n % 2 ); // Plusieurs arguments parenthèses nécessaires var est_superieur = (i, j) => i > j; console .log (est_pair( 259 )); // false console .log (est_pair( - 6 )); // true console .log (est_superieur( 1000 , 1 )); // true console .log (est_superieur( 5 , 5 )); //false

26. Les fonctions fléchées Exemple avec corps de fonction : Javascript : ES6 var reverse_string = str => { for ( var i = str. length - 1 , reversed = '' ; i >= ; reversed += str[i -- ]) { } return (reversed); }; console .log (reverse_string( '12345' )); // => 54321 console .log (reverse_string( 'Ce mec' )); // => cem eC

27. Les fonctions fléchées Exemple avec corps de fonction et x paramètres : Javascript : ES6 var reverse_strings = (...strings) => { var result = '' ; for ( var i = strings. length - 1 ; i >= ; i -- ) { for ( var j = strings[i]. length - 1 , reversed = '' ; j >= ; reversed += strings[i][j -- ]) { } result += reversed; } return (result); }; console .log (reverse_strings()); // => '' console .log (reverse_strings( '123' , '4' , '56' )); // => 654321

28. Les fonctions fléchées Avantage #1 : Simplification du code Javascript : ES6 var nums = [ , 5 , 6 , 7 , 125 , 9654 ]; // ES5 : console .log (nums.filter( function (n) { return ! (n % 2 ); })); // [ 0, 6, 9654 ] // ES6 : console .log (nums.filter(n => ! (n % 2 ))); // [ 0, 6, 9654 ]

29. Les fonctions fléchées Avantage #2 : Un this lexical et non local En ES5, on rencontre souvent le “problème” de la valeur de this non/mal assignée : Javascript : ES6 //Methode 2 : Utiliser Function.prototype.bind(thisArg) function Voiture () { this .kilometres = 100 ; console .log ( this .kilometres); setTimeout (( function () { this .kilometres += 10 ; console .log ( this .kilometres); }).bind( this ), 2000 ); } new Voiture (); // => 100 ... 110 //Methode 1 : Utiliser une variable "self" ou "that" function Voiture () { var self = this ; self.kilometres = 100 ; console .log (self.kilometres); setTimeout ( function () { self.kilometres += 10 ; console .log (self.kilometres); }, 2000 ); } new Voiture (); // => 100 ... 110

30. Les fonctions fléchées Avantage #2 : Un this lexical et non local Les fonctions fléchées en es6 utilise un this lexical (celui du contexte ou elles sont définies) : Javascript : ES6 function Voiture () { this .kilometres = 100 ; console .log ( this .kilometres); setTimeout (() => { this .kilometres += 10 ; console .log ( this .kilometres); }, 2000 ); } new Voiture (); // => 100 ... 110

31. Les classes Javascript : ES6

32. Les classes Syntaxe : Javascript : ES6 class NomClasse extends ClasseParent { constructor(arguments) { //... } methode(arguments) { //... } get propriete() { return ...; } set propriete(valeur) { this ._propriete = valeur; } static methodeStatique() { //... } let instance = new NomClasse ( 'foobar' ); instance.methode([ 1 , 2 , 3 ]); instance.propriete = 5 ; NomClasse.methodeStatique();

33. Les classes Javascript : ES6 Gestion de l’héritage avec extends et super() class NomClasse extends ClasseParent Gestion des getters et setters avec les mot-clés get et set get propriete() {} Gestion des méthodes statiques avec le mot-clé static static method() {} En plus d’une syntaxe plus proche de la programmation OO, plusieurs avantages :

34. Nouveaux littéraux d’objets (Object literals) Javascript : ES6

35. Nouveaux littéraux d’objets Javascript : ES6 var es6Object = { // Raccourci pour 'propriete': propriete propriete, // Raccourci pour 'toString': function() {} toString () { // Supporte la gestion de l'héritage return "En string ça donne : " + super . toString (); // => “En string ça donne : [Object object] }, // Equivalent de ecole42 : 42 [ 'ecole' + (() => 21 * 2 )() ]: 42 };

36. Nouvelles structures de données (Sets & Maps) Javascript : ES6

37. Sets Javascript : ES6 let set = new Set (); set. add ( 1 ) set.has( 1 ) // => true set. delete ( 1 ) set.has( 1 ) // => false set. add ( 2 ) set. add ( 3 ) set. size // => 2 set. clear (); set. size // => 0

38. Sets Javascript : ES6 Valeurs uniques nativement Améliorations notables par rapport à la gestion en array : let set = new Set (); set. add ( 1 ) set.size // => 1 set. add ( 1 ) set.size // => 1

39. Sets Javascript : ES6 Recherche plus rapide / simple que .indexOf() Améliorations notables par rapport à la gestion en array : let set = new Set (); set. add ( 1 ) set. has (1); // => true let array = [1]; array. indexOf (1) !== -1 // => true

40. Sets Javascript : ES6 Suppression plus rapide / simple que .filter(), etc. Améliorations notables par rapport à la gestion en array : let set = new Set (); set. add ( 1 ) set. delete (1); let array = [1]; array. filter (function(n) { return (n !== 1); });

41. Sets Javascript : ES6 Assurance d’itérer dans l’ordre d’ajout Améliorations notables par rapport à la gestion en array : let set = new Set (); set. add ( 'a' ); set. add ( 'b' ); set. add ( 'c' ); for (let x of set) { console .log (x); } // => 'a', 'b', 'c', ce n’était pas forcément le cas avec ['a', 'b', 'c']

42. Maps Javascript : ES6 let map = new Map (); map. set ( 'foo' , 'bar' ); map. set ( 'réponse' , 42 ); map.has( 'foo' ) // => true map. delete ( 'foo' ) map.has( 'foo' ) // => false map. set ( 42 , 42 ); map. size // => 2 map. clear (); map. size // => 0

43. Maps Javascript : ES6 Les clés ne sont plus forcément des chaînes Améliorations notables par rapport à la gestion en objet : let map = new Map (), key = {}; map. set (key, 1 ); map. set (NaN, 42 ); map.has(key); // => true map.has({}); // => false : {} n’est pas === a key ! (deux objets différents)

44. Maps Javascript : ES6 Plus de risques de télescopage avec des propriété natives : Améliorations notables par rapport à la gestion en objet : let map = new Map (); map.get( 'toString' ); // => undefined map. set ( 'toString' , 42 ); map.get( 'toString' ); // => true var objet = {}; objet.toString; // => [function()] // On peut contourner en testant // objet.hasOwnProperty() objet.toString = 42 ; objet.toString; // => 42

45. WeakSet & WeakMap Javascript : ES6 Structure de données qui ne protège pas ses éléments contre le ramasse-miettes (Garbage Collector) Le Garbage Collector supprimera des éléments quand ils ne seront plus utilisés Protège contre les fuites de mémoires

46. WeakSet Javascript : ES6 let set = new Set (); let myKey = {}; set. add (myKey); ( function () { let myScopedKey = {}; set. add (myScopedKey); // => set contient 2 éléments })(); // => set contient toujours 2 éléments let set = new WeakSet (); let myKey = {}; set. add (myKey, 'Kawai !' ); ( function () { let myScopedKey = {}; set. add (myScopedKey); // => set contient 2 éléments })(); // => set contient 1 élément // => Le GC a néttoyé myScopedKey

47. WeakMap Javascript : ES6 let map = new Map (); let myKey = {}; map.set(myKey, 'Kawai !' ); ( function () { let myScopedKey = {}; map.set(myScopedKey, 42 ); // => map contient 2 éléments })(); // => map contient toujours 2 éléments let map = new WeakMap (); let myKey = {}; map.set(myKey, 'Kawai !' ); ( function () { let myScopedKey = {}; map.set(myScopedKey, 42 ); // => map contient 2 éléments })(); // => map contient 1 élément // => Le GC a néttoyé myScopedKey

48. Limitations de WeakSet & WeakMap Javascript : ES6 La volatilité des structures rend impossible l’itération sur ces objets .size() n’est pas disponible, dû également à la volatilité .clear() n’est pas disponible, c’est au GC de vider l’objet

49. Exemple : Des propriétés “privées” Javascript : ES6 let privates = new WeakMap (); class MaClasseBidon { constructor(foo, bar) { privates.set( this , { foo, bar }); } methodeBidon() { console .log (privates.get( this ).foo); console .log (privates.get( this ).bar); } } let instance = new MaClasseBidon ( 42 , {}); instance.methodeBidon(); // => 42, [Object] console .log ( Object .keys(instance)); // => []

50. Les symboles Javascript : ES6

51. Les symboles Javascript : ES6 Immuables Uniques Symbol( 'bonjours' ) === Symbol( 'bonjours' ); // => false Utilisés comme identifiant des propriétés d’objet obj[Symbol( 'bonjours' )] = 'blah blah' ; let mySymbol = Symbol( 'bonjours' ); let mySymbol2 = Symbol({}); let mySymbol3 = Symbol();

52. Les symboles Javascript : ES6 Permet d’éviter les conflits de noms let toString = Symbol( 'toString' ); let obj = { [toString]() { // The native toString method is not overwritten return ( 'Ok !' ); } }; obj. toString (); // => [object Object] console .log (obj[toString]()); // => “Ok !”

53. Les symboles Javascript : ES6 Assure une “confidentialité” des propriétés var obj = ( function () { let prop = Symbol( 'notYourStuff' ); let returned; returned = { [prop] : 42 }; console .log (returned[prop]); // Dans le scope, on peut accéder à la propriété return (returned); })(); obj[prop]; // => Erreur prop n'est pas définie // Hors du scope, on ne peut PAS accéder à la propriété JSON.stringify(obj); // => {} // La propriété est ignorée par JSON.stringify()

54. Itérateurs & nouvelle structure de boucle Javascript : ES6

55. Les itérateurs Javascript : ES6 Objet pouvant être parcourus (itérés) Implémentent les interfaces Iterable , Iterator et IteratorResult : interface Iterable { [Symbol.iterator](): Iterator } interface Iterator { next(): IteratorResult; } interface IteratorResult { done: boolean ; value: any; }

56. Les itérateurs Javascript : ES6 Lancement de l’itération Iterable. [Symbol.iterator]() => Iterator Iterator.next() => IteratorResult IteratorResult.done ? valeur = IteratorResult.value Fin de l’itération Récupération d’un valeur de l’itération false true

57. Les itérateurs Javascript : ES6 let fibonacciDe10 = { [Symbol.iterator]() { let precedent = , actuel = 1 , tour = ; return { next() { [precedent, actuel] = [actuel, precedent + actuel]; tour ++ ; return { done: tour > 10 , // false, puis true au 10ème tour value: actuel // 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 } } } } }

58. Itérateurs pour les types natifs Javascript : ES6 let monTableau = [ 1 , 2 , 3 ]; console .log (monTableau[ Symbol.iterator ]); // => [function] let iterator = monTableau[Symbol.iterator](); console .log (iterator); // => [object] console .log (iterator. next ); // => [function] console .log (iterator. next (). value ); // => 1 console .log (iterator. next (). value ); // => 2 console .log (iterator. next (). value ); // => 3 console .log (iterator. next (). value ); // => undefined // => Mais .done = true !

59. Boucle pour itérateurs Javascript : ES6 Syntaxe “for…of” : for (variable of iterator) { /*...*/ } Permet de “consommer” les objets itérateurs Itère sur les les valeurs et non les clé (for...in)

60. Boucle pour itérateurs Javascript : ES6 for (let i of fibonacciDe10) { console .log (i); // 1, puis 2, 3, 5, 8, 13, 21, // 34, 55, et enfin 89 }

61. Boucle pour itérateurs Javascript : ES6 let monTableau = [ 1 , 2 , 3 ]; for (let i of monTableau) { console .log (i); // => 1, puis 2, puis 3 } let monObjet = { a: 1 , b: 2 , c: 3 }; for (let i of monObjet) { console .log (i); }

62. Les générateurs Javascript : ES6

63. Les générateurs Javascript : ES6 Les itérateurs sont très utiles mais syntaxe complexe Les générateurs rendent la syntaxe plus simple Nouveaux mots-clés : function* generator(); yield value; yield* secondGenerator();

64. Les générateurs Javascript : ES6 Un générateur est une fonction qui retourne automatiquement un objet Iterable Définis en utilisant la syntaxe function* gen() {} Les valeurs à retourner sont envoyées via yield value;

65. Les générateurs Javascript : ES6 function * fibonacciDe10(){ let precedent = , actuel = 1 , tour = ; while (tour < 10 ) { [precedent, actuel] = [actuel, precedent + actuel]; yield actuel; tour ++ ; } } let iterator = fibonacciDe10(); console .log (iterator[Symbol.iterator]); // [object] console .log (iterator[Symbol.iterator]. next ); // [function] for (let i of fibonacciDe10()) { console .log (i); } // 1, 2, 3, 5, 8, 13, 21, 34, 55, 89

66. Délégation de générateurs Javascript : ES6 function * subGen(){ yield 'c' ; yield 'd' ; } function * gen(){ yield 'a' ; yield 'b' ; yield * subGen(); yield 'e' ; } for (let i of gen()) { console .log (i); } // 'a', 'b', 'c', 'd', 'e'

67. Les promesses Javascript : ES6

68. Les promesses Javascript : ES6 Une promesse représente un objet dont on ne connaît pas encore la valeur Nouvelle façon de gérer les opérations asynchrone Une promesse a 3 états possibles : en cours, puis accomplie _ou_ rejetée Les états accomplie ou rejetée sont alors immuables

69. Les promesses Javascript : ES6 Syntaxe simple : let maPromesse = new Promise ( function (resolve, reject) { // Code resolve(valeur); // _OU_ reject(erreur); } maPromesse() .then( function (valeur) { // ... }) . catch ( function (erreur) { // ... });

70. Les promesses Javascript : ES6 Chaînables et mixables : maPromesse1 () . then ( maPromesse2 ) . then ( maPromesse3 ) . then ( maPromesse4 ) . then ( maPromesse5 ) . catch ( function ( erreur ) { // Une erreur est survenue // dans une des promesses // (rejetée) }) maPromesse1 () . then ( maPromesse2 ) . then ( maPromesse3 ) . then ( function () { // Du code pas asynchrone }) . then ( maPromesse4 ) . then ( maPromesse5 ) . catch ( function ( erreur ) { // ... })

71. Les promesses Javascript : ES6 Asynchrone : let maPromesse = new Promise ( function (resolve, reject) { setTimeout ( function () { console .log ( 'Après 5 secondes' ); resolve(); }, 5000 ); console .log ( 'Dans la promesse' ); }); console .log ( 'Avant la promesse' ); maPromesse().then( function () { console .log ( 'Dans le then()' ); }); console .log ( 'Après la promesse' ); // 'Avant la promesse' // 'Après la promesse' // 'Dans la promesse' // … 5 secondes passent ... // 'Après 5 secondes' // 'Dans le then()'

72. Les promesses Javascript : ES6 get( '/monUrl' , function (data, err) { if (err) { } get( '/monUrl2' , function (data, err) { if (err) { } get( '/monUrl3' , function (data, err) { if (err) { } get( '/monUrl4' , function (data, err) { if (err) { } //... etc }); }); }); }); get( '/monUrl' ) .then(get( '/monUrl2' )) .then(get( '/monUrl3' )) .then(get( '/monUrl4' )) . catch ( function (err) { console .log (err); }); Supprime le “callback hell” ou code pyramidal :

73. Les modules Javascript : ES6

74. Les modules Javascript : ES6 Programmation modulaire permettant d’isoler des composants dans des fichiers Hérite des syntaxes déjà utilisées (AMD, CommonJS) Modèle asynchrone, aucun code n’est exécuté tant que le module n’est pas chargé et exécuté

75. Les modules Javascript : ES6 // lib/malib.js export const PI = 3.14 ; export function * fibonacciDe10(){ let precedent = , actuel = 1 , tour = ; while (tour < 10 ) { [precedent, actuel] = [actuel, precedent + actuel]; yield actuel; tour ++ ; } } // index.js import * as malib from "lib/malib" ; console .log (malib.PI); // 3.14 for (let i of malib.fibonacciDe10()) { // 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 } // index2.js import PI from "lib/malib" ; console .log (PI); // 3.14 // index3.js import {fibonacciDe10 , PI} from "lib/malib" ; // ... Syntaxe :

76. Les modules Javascript : ES6 // lib/otherLib.js export * from 'lib/malib' ; export var maVar = 42 ; // index.js import * from 'lib/otherLib' ; console .log (PI); // 3.14 console .log (maVar); // 42 // lib/otherLib2.js export default function () { console .log ( 'Coucou' ); } var uglyLocalName = 42 ; export { uglyLocalName as foo}; // index.js import * as otherLib from 'lib/otherLib2' ; otherLib.unexistantName(); // 'Coucou' console .log (otherLib.foo); // 42 Délégation d’import / Default / Aliases :

77. La gestion des chaînes de caractères Javascript : ES6

78. La gestion des chaînes de caractères String.prototype.includes(substring, startingAt) String.prototype.startsWith(substring, startingAt) String.prototype.endsWith(substring, endingAt) Javascript : ES6

79. La gestion des chaînes de caractères Javascript : ES6 // String.prototype.includes(substring, startingAt) 'Hello world' .includes( 'wor' ) // true 'Hello world' .includes( 'hell' ) // false, sensible à la casse 'Hello world' .includes( 'Hello' , 1 ) // false, on commence à 1 // String.prototype.startsWith(substring, startingAt) '42, born to code' .startsWith( '42' ) // true '42, born to code' .startsWith( 'foo' ) // false '42, born to code' .startsWith( 42 , 1 ) // false, on commence à 1 // String.prototype.endsWith(substring, endingAt) '42, born to code' .endsWith( 'code' ) // true '42, born to code' .endsWith( 'born' ) // false '42, born to code' .endsWith( 'code' , 5 ) // false, on arrete à 5 // Exemple equivalent es5 String . prototype . startsWith = function (substring, startingAt) { startingAt = (startingAt) ? startingAt : ; return ( this . indexOf (substring) === startingAt); };

80. La gestion des chaînes de caractères Gestion des gabarits de chaînes de caractères : Javascript : ES6 `Simple chaîne` `chaîne avec saut de ligne au milieu` `chaîne avec $ {expression Javascript} évaluée` fonction_tag `chaîne ou $ {expression Javascript}`

81. La gestion des chaînes de caractères Gère les sauts de lignes nativement et protège des erreurs de guillemets : Javascript : ES6 // Avant on devait faire : var old_school = "Ligne 1 \n Ligne 2\n'\"" ; // Swag ! let new_school = `Ligne 1 Ligne 2 '" `;

82. La gestion des chaînes de caractères Gère les interpolation d’expressions Javascript : Javascript : ES6 let ma_variable = "bonjours" ; let ma_string = `Il y a toujours un "s" dans '${ma_variable}' `; // => Il y a toujours un "s" dans 'bonjours' `La variable est de type "${typeof ma_variable}" `; // => La variable est de type "string" `Le type de véhicule est '${vehicule.getType()}' `; // => Le type de véhicule est 'car'

83. La gestion des chaînes de caractères Gère les interpolation d’expressions Javascript … mais ! Javascript : ES6 let ma_variable = 10 ; console .log (`Ma variable = $ {ma_variable ++ }`); // => Ma variable = 10 console .log (ma_variable); // => 11 Attention donc aux appels de méthodes, etc.

84. La gestion des chaînes de caractères Gestion des étiquettes (tags) pour le taint checking, par ex : Javascript : ES6 let a = 2 ; let b = 5 ; console .log (`Normalement $ { a } plus $ { b } = $ {a + b}`); // "Normalement 2 plus 5 = 7" function tag (strings, ...values) { console .log (strings); console .log (values); return "J'ai plus envie de calculer" ; } console .log (tag`Normalement $ { a } plus $ { b } = $ {a + b}`); // ['Normalement ', ' plus ', ' = '] // [2, 3, 5] // "J'ai plus envie de calculer"

85. Merci ! Des question ? Pour me contacter : linkedin.com/in/jucrouzet github.com/jucrouzet twitter.com/c2c