ES6 Syntaxe, fonctionnalités et ajouts: Guide de référence

En savoir plus sur les nouvelles fonctionnalités, améliorations et raccourcis de l'ES6 introduits dans le langage de programmation JavaScript.

La sixième édition de ECMAScript – la spécification du langage de script par laquelle JavaScript est normalisé – introduit de nombreuses nouvelles fonctionnalités. , mises à niveau et raccourcis vers le langage de programmation JavaScript. Cette version est communément appelée ECMAScript2015 ou ES6 .

Lorsque la version ES6 a été introduite pour la première fois, les fonctionnalités n'étaient pas disponibles sur la grande majorité des navigateurs et il était nécessaire d'utiliser un compilateur comme Babel si vous souhaitez utiliser l’une des fonctionnalités. Il est toujours courant d’utiliser un bundle tel que webpack pour exécuter Babel et compiler le code ES6 en un code que les anciens navigateurs peuvent comprendre, mais selon Can I Use environ 90% des utilisateurs. tous les navigateurs peuvent comprendre la syntaxe ES6 de manière native.

Il est important de noter que ES6 n'est pas une langue différente, mais simplement la prochaine version d'ECMAScript, tout comme HTML5 est la prochaine édition de HTML. Vous pouvez toujours écrire le même code JavaScript des versions précédentes, mais une nouvelle syntaxe et de nouvelles fonctionnalités sont désormais disponibles.

Dans cet article, nous allons passer en revue certaines des fonctionnalités les plus utilisées de ES6.

Let & Const

L'un des ajouts les plus importants d'ES6 sont les déclarations et const .

Auparavant, il n'existait qu'un seul moyen de déclarer une variable en JavaScript: les [19659013] var déclaration.

 var  couleur  =   'blue' 

Vous pouvez également attribuer des valeurs avec soit et const . ].

 const  utilisateur  =   'Nick' 

 let  active  =   true 

Il existe quelques différences importantes entre les nouveaux mots clés et mot-clé var existant auparavant

et const sont tous deux en blocs ce qui signifie t La variable peut être étendue à n’importe quel bloc, tel que si pour ou pendant . A var correspond à une fonction étendue ce qui signifie que seules les fonctions introduiront un nouveau champ d'application.

 // Affectez une variable 
 var  couleur  = [19659016] 'blue' 
 let  animal  =   'lion' 

 if   ( true )   {
     // Réattribuer la variable dans une portée de bloc 
 var  couleur  =   'rouge' 
 let  animal  =   'tigre' 
} 

console .  log  ( couleur )   // rouge 
console .  log  ( animal )   // lion 

Comme vous pouvez le voir dans l'exemple ci-dessus, var a modifié la variable dans la portée globale, alors que ne l'a pas laissé

De plus, ni ni ni const ne peuvent être redéclarés une fois la variable déclarée

 // Ceci est valide 
 var  oiseau  =   'robin' 
 var  oiseau  =   'bluejay' 

 ] // Syntaxe non capturéeError: l'identificateur 'animal' a déjà été déclaré 
 let  animal  =   'loup' 
 let  animal  =   'waswolf' 

La ​​différence entre let et const est que let peut être réaffecté et const ne peut pas. 19659024] // Ceci est valable
let x = 1
x = 2

// VM159: 5 TypeError non capturé: affectation à une variable constante.
const y = 1
y = 2

En fin de compte, cela dépend de la situation d'utilisation de let var ou const mais le point commun convention consiste à utiliser const autant que possible et laisser dans tous les autres cas. La plupart des nouvelles bases de code n'incluent pas var . const sera utilisé par défaut.

String

Modèles de littéraux

Les littéraux de modèles parfois appelés modèles de chaînes, constituent un nouveau type de chaînes. syntaxe de chaîne qui permet les expressions incorporées et les chaînes multilignes. Les littéraux de modèle utilisent un backtick (`) au lieu de guillemets doubles ou simples.

Au lieu de concaténer avec l'opérateur de concaténation de chaînes ( + ), vous pouvez incorporer une variable directement dans une chaîne à l'aide de $ {} .

 // ES5 
 const  name  =   'Hal' 
 const  sentence  =   "J'ai bien peur Je ne peux pas faire ça "  +  name  +   '.' 
console .  log  ( sentence )   // "J'ai bien peur de ne pouvoir le faire, Hal." 

 // ES6 
 const  name  =   'Hal' 
 const  sentence  =   `J'ai bien peur de ne pas pouvoir faire cela,  $ { name }  .` 
 console .  log  ( sentence )   // "J'ai bien peur de ne pouvoir le faire , Hal. "

Une chaîne peut également s'étendre sur plusieurs lignes.

 const  haiku  =  ` Au-dessus de l'hiver
    forêt, les vents hurlent de rage
    sans feuillage. »
 
 console .  log  ( haiku ) 
 // En hiver 
 // forêt, vents hurlement de rage 
 // sans feuilles à souffler 

Notez que les espaces, comme avec l'indentation, sont préservés à l'aide de chaînes multilignes.

Méthodes

Plusieurs nouveaux String . ] méthodes ont été ajoutées dans ES6: commence par () se termine par () comprend () et à répétition () . [19659105] String.prototype.startsWith ()

Nous pouvons facilement déterminer si une chaîne commence par une chaîne en utilisant startsWith () .

 const  mot  =   'Disestablishmentarianism' 

mot .  commence par  ( 'Disestablish' )   // true 

String.prototype.endsWith ()

Nous pouvons également déterminer si quelque chose se termine par chaîne utilisant endsWith () .

 const  word  =   'Disestablishmentarianism' 

mot .  se termine par  ( 'ism' )   // true 

String.prototype.includes ()

comprend [19659009] est un ajout particulièrement utile au langage JavaScript et permet de trouver très simplement si une chaîne de caractères contient une valeur particulière en un point quelconque.

 const  word  =   'Disestablishmentarianism '

le mot .  comprend  ( "établissement" )   // true 

String.prototype.repeat ()

La est répétée () [) [19659009] Cette méthode répète et concatène une chaîne.

 const  word  =   'Beetlejuice' 

mot .  répéter  ( 3 )   // "Beetlejuice Beetlejuice Beetlejuice" 

Fonctions

Fonctions de flèche

Une fonction de flèche est une nouvelle façon de créer une expression de fonction en JavaScript.

 // Expression de fonction 
 const   renvoieTrue   =   fonction  ()   {1965 
 return   true 
} 

 // expression de la fonction flèche 
 const   returnTrue   =   ()   => 19659030] {[19659025] return   true 
} 

Les fonctions fléchées n'ont pas leur propre ce et ne peuvent pas être utilisées en tant que constructeur. Toutes les fonctions de flèche sont anonymes, ce qui signifie qu'elles n'ont pas de nom.

Renvois implicites

Les fonctions de flèches ont également la capacité d'utiliser des retours implicites, dans lesquels l'instruction return et le bloc sont est omis et seule la valeur renvoyée suit la flèche.

 const   renvoieTrue   =   ()   =>   true 

Paramètres

Si une flèche la fonction n'ayant qu'un paramètre, les parenthèses peuvent être omises.

 const   square   =  num  =>   {
 return  num  *  num
} 

 square  ( 3 )   // 9 

Toutefois, si vous utilisez plusieurs paramètres, les parenthèses sont à nouveau obligatoires.

 const 


 19659153] add   =   ( x  y )   =>   {
 retour  x  +  y
} 

 ajouter  ( 7   20 )   // 27 

 Paramètres par défaut
 Les fonctions peuvent désormais être initialisées avec des paramètres par défaut .
 

  // ES5 
  function   sum  ( a  b )   {
 b  =  b  ===  undefined ?   2  :  b ;   // option 1 
 b  =   2   ||  b  // option 2 
  retour  a  +  b
 } 
 // ES6 
  function   sum  [ a 
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
 
   
 
Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)
Articles similaires