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 = 0; 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 = 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. 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. 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
>= 0; 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 >= 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. 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. 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 = 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. 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 = 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. 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 = 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. 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 : 0;
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 1nLigne 2n'"";
// 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