Les principales nouveautés de JavaScript ES6

juin 28, 2019juin 29, 2022 Amine KOUIS Aucun commentaire

Dans ce tutoriel nous allons découvrir les nouvelles fonctionnalités de l’ES6 avec des exemples. ECMAScript 6, également appelé ECMAScript 2015, est la dernière version du standard ECMAScript. ES6 est une mise à jour importante du langage, et la première mise à jour du langage depuis que ES5 a été normalisé en 2009. L’implémentation de ces fonctionnalités dans les principaux moteurs JavaScript est en cours.

Paramètres par défaut

C’est une pratique assez courante de définir des paramètres par défaut pour remplir automatiquement les valeurs clés d’une fonction, avant l’ES6, l’option n’était pas disponible en JavaScript. Au lieu de cela, vous deviez définir vos propres valeurs par défaut avec une sorte de hack dans la fonction elle-même. Avec ES6, vous avez la possibilité d’ajouter des paramètres par défaut comme vous le feriez dans la plupart des autres langages.

Avant ES6:

function add(a, b){
    var x = a || 2;
    var y = b || 2;

    return x+y;
}

Après ES6:

function add(a=1, b=1){
     return x+y;
}

Chaînes de caractères multilignes

Dans ES6, JavaScript introduit une nouvelle façon de créer des chaînes de caractères en utilisant les littéraux de modèle où vous pouvez également créer des chaînes multilignes.

Pour créer une chaîne multiligne, on utilise l’accent grave `` au lieu des guillemets simples ou doubles.

Avant ES6:

var str = "Lorem ipsum dolor sit amet\n"
+ "consectetur adipiscing elit,\n"
+ "In dictum, quam eget tristique facilisis."

Après ES6:

var str = `Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
In dictum, quam eget tristique facilisis.`

Littéraux de gabarits (template literals)

Les littéraux de gabarits sont une autre fonctionnalité courante dans d’autres langages qui vous permet d’injecter des variables directement dans des chaînes. Avant ES6, vous deviez vous fier à une concaténation de chaînes pour obtenir un effet similaire.

Avant ES6:

var str = "Hi " + firstname + " " + lastname +", Welcome to WayToLearnX!";

Après ES6:

var str = "Hi ${firstname} ${lastname}, Welcome to WayToLearnX!";

Const et let

Les constantes ont une portée de bloc (disponible uniquement en locale). Vous ne pouvez pas réaffecter la valeur d’une variable const, mais les propriétés peuvent être changées, par exemple :

const c = {
   name : "Alex Babtise"
}
// ceci n'est pas autorisé
c = {  
   name : "Yohan Doglas"
}
// ceci est autorisé
c.name = "Yohan Doglas"

Let a également une portée de bloc mais vous pouvez réaffecter la valeur d’une variable let et vous pouvez également changer leur valeur.

Fonctions fléchées

Les fonctions fléchées sont un moyen plus rapide et plus simple d’écrire certaines des fonctions habituelles.

Par exemple pour une fonction anonyme:

Avant ES6:

function(x){ 
     console.log(x)
     return 1
}

Après ES6:

(x) => { 
     console.log(x)
     return 1
}

Classe

Les classes en JavaScript ne sont que des « fonctions spéciales ». Il n’introduit pas un modèle d’héritage. Une Classe donne à votre code une structure agréable. Voir l’exemple ci-dessous :

class Person{
   constructor(name, gender, age){ 
        this.name = name
        this.gender = gender 
        this.age = age
   }
}
const p = new Person("Yohan Doglas", "Male", 22)
console.log(p.name) // Yohan Doglas

Le mot-clé « Extends » est utilisé pour l’héritage.

class Employee extends Person {
     ....
}

QCMs qui pourraient vous intéresser :

Paramètres par défaut

Chaînes de caractères multilignes

Littéraux de gabarits (template literals)

Const et let

Fonctions fléchées

Classe

Vous pourrez aussi aimer

Balise script – JavaScript

Comment changer la classe d’un élément HTML avec JavaScript

Convertir une chaîne de caractère en majuscule en Javascript

Laisser un commentaire Annuler la réponse