Présentation de ECMAScript 6

1,736 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,736
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
78
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Test
  • Présentation de ECMAScript 6

    1. 1. Javascript EcmaScript 6
    2. 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. 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. 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. 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. 6. Alors quoi de neuf dans ES6 ? Javascript : ES6
    7. 7. Les déclarations de variables Javascript : ES6
    8. 8. Jusqu’à ES5, pas de gestion du scope Javascript : ES6 for (var i = 0; i < 10; i++) { // Quelque chose. } console.log(i); // => 10, i est défini dans tout le script/bloc
    9. 9. ES6 → nouvelles déclarations Javascript : ES6 for (let i = 0; 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. 10. ES6 → nouvelles déclarations Javascript : ES6 let i = 'bonjour'; for (let i = 0; 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. 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. 12. La destructuration Javascript : ES6
    13. 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. 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. 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. 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. 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. 18. Les prototypes de fonctions Javascript : ES6
    19. 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. 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. 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. 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. 23. Les fonctions “fléchées” (Arrow functions) Javascript : ES6
    24. 24. Les fonctions fléchées Syntaxes : Javascript : ES6 ([parametre] [, parametre]) => { code } ([parametre] [, parametre]) => valeur ou expression parametre => { code } parametre => valeur ou expression
    25. 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. 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 >= 0; reversed += str[i--]) { } return(reversed); }; console.log(reverse_string('12345')); // => 54321 console.log(reverse_string('Ce mec')); // => cem eC
    27. 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 >= 0; i--) { for (var j = strings[i].length - 1, reversed = ''; j >= 0; reversed += strings[i][j--]) { } result += reversed; } return(result); }; console.log(reverse_strings()); // => '' console.log(reverse_strings('123', '4', '56')); // => 654321
    28. 28. Les fonctions fléchées Avantage #1 : Simplification du code Javascript : ES6 var nums = [0, 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. 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. 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. 31. Les classes Javascript : ES6
    32. 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. 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. 34. Nouveaux littéraux d’objets (Object literals) Javascript : ES6
    35. 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. 36. Nouvelles structures de données (Sets & Maps) Javascript : ES6
    37. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 50. Les symboles Javascript : ES6
    51. 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. 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. 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. 54. Itérateurs & nouvelle structure de boucle Javascript : ES6
    55. 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. 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. 57. Les itérateurs Javascript : ES6 let fibonacciDe10 = { [Symbol.iterator]() { let precedent = 0, actuel = 1, tour = 0; 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. 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. 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. 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. 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. 62. Les générateurs Javascript : ES6
    63. 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. 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. 65. Les générateurs Javascript : ES6 function* fibonacciDe10(){ let precedent = 0, actuel = 1, tour = 0; 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. 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. 67. Les promesses Javascript : ES6
    68. 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. 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. 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. 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. 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. 73. Les modules Javascript : ES6
    74. 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. 75. Les modules Javascript : ES6 // lib/malib.js export const PI = 3.14; export function* fibonacciDe10(){ let precedent = 0, actuel = 1, tour = 0; 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. 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. 77. La gestion des chaînes de caractères Javascript : ES6
    78. 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. 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 : 0; return (this.indexOf(substring) === startingAt); };
    80. 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. 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 1nLigne 2n'""; // Swag ! let new_school = `Ligne 1 Ligne 2'"`;
    82. 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. 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. 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. 85. Merci ! Des question ? Pour me contacter : linkedin.com/in/jucrouzet github.com/jucrouzet twitter.com/c2c

    ×