diff options
author | julieng <julien.gattelier@gmail.com> | 2021-08-03 08:03:23 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-03 08:08:25 +0200 |
commit | bf8e099b9c8b3c60d60b3712b4fc97b052c39887 (patch) | |
tree | c101746d082c9581c94f5937519c7d0e2f4af8cb /files/fr/web/javascript/guide | |
parent | 844f5103992238c0c23203286dad16a466e89c97 (diff) | |
download | translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.gz translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.bz2 translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.zip |
convert content to md
Diffstat (limited to 'files/fr/web/javascript/guide')
23 files changed, 5495 insertions, 5024 deletions
diff --git a/files/fr/web/javascript/guide/control_flow_and_error_handling/index.md b/files/fr/web/javascript/guide/control_flow_and_error_handling/index.md index 59ec009395..8e9f0a7d3a 100644 --- a/files/fr/web/javascript/guide/control_flow_and_error_handling/index.md +++ b/files/fr/web/javascript/guide/control_flow_and_error_handling/index.md @@ -15,68 +15,75 @@ tags: translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling original_slug: Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}} -<p>JavaScript supporte nativement un ensemble d'instructions. Ces instructions permettent de définir les logiques des algorithmes, le flux des informations, etc. Ce chapitre fournit un aperçu sur le fonctionnement de ces différentes instructions JavaScript.</p> +JavaScript supporte nativement un ensemble d'instructions. Ces instructions permettent de définir les logiques des algorithmes, le flux des informations, etc. Ce chapitre fournit un aperçu sur le fonctionnement de ces différentes instructions JavaScript. -<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Statements">Références de JavaScript</a> contiennent plus de détails sur les différentes instructions décrites dans ce chapitre.</p> +Les [Références de JavaScript](/fr/docs/Web/JavaScript/Reference/Statements) contiennent plus de détails sur les différentes instructions décrites dans ce chapitre. -<p>Toute expression est une instruction, voir la page <a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions et opérateurs</a> pour plus d'informations sur les expressions. En JavaScript, le point-virgule (<code>;</code>) est utilisé afin de séparer des instructions dans le code.</p> +Toute expression est une instruction, voir la page [Expressions et opérateurs](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators) pour plus d'informations sur les expressions. En JavaScript, le point-virgule (`;`) est utilisé afin de séparer des instructions dans le code. -<h2 id="block_statement">Les blocs d'instruction</h2> +## Les blocs d'instruction -<p>L'instruction la plus simple est l'instruction de bloc qui permet de regrouper des instructions. Un bloc est délimité par une paire d'accolades :</p> +L'instruction la plus simple est l'instruction de bloc qui permet de regrouper des instructions. Un bloc est délimité par une paire d'accolades : -<pre class="brush: js">{ +```js +{ instruction_1; instruction_2; ⋮ instruction_n; -}</pre> +} +``` -<h3 id="example">Exemple</h3> +### Exemple -<p>Les instructions de blocs sont souvent utilisées avec les instructions conditionnelles et itératives telles que <code>if</code>, <code>for</code>, <code>while</code>.</p> +Les instructions de blocs sont souvent utilisées avec les instructions conditionnelles et itératives telles que `if`, `for`, `while`. -<pre class="brush: js">while (x < 10) { +```js +while (x < 10) { x++; -}</pre> - -<p>Ici, <code>{ x++; }</code> représente le bloc.</p> - -<div class="note"> - <p><strong>Note :</strong> En JavaScript, avant ECMAScript 2015 (aussi appelé ES6), les blocs <strong>n'introduisaient pas de nouvelles portées</strong>. Les variables introduites dans le bloc avec l'instruction <code>var</code> font partie de la portée de la fonction englobante ou du script. Les effets de leur définition persistent en dehors du bloc. Les blocs seuls utilisés avec <code>var</code> (et non <code>let</code>) pourront laisser penser que ce bloc se comportera comme en C ou en Java. Par exemple :</p> - - <pre class="brush: js">var x = 1; -{ - var x = 2; } -console.log(x); // affichera 2</pre> +``` - <p>Cella affichera 2 car l'instruction <code>var x</code> contenue dans le bloc fait partie de la même portée que l'instruction <code>var x</code> écrite avant le bloc. En C ou en Java, le code équivalent à cet exemple aurait produit 1.</p> +Ici, `{ x++; }` représente le bloc. - <p>Cela a évolué avec ECMAScript 2015 (ES6). Les instructions <code>let</code>et <code>const</code> permettent de déclarer des variables dont la portée est celle du bloc courant. Voir les pages des références <a href="/fr/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a>.</p> -</div> +> **Note :** En JavaScript, avant ECMAScript 2015 (aussi appelé ES6), les blocs **n'introduisaient pas de nouvelles portées**. Les variables introduites dans le bloc avec l'instruction `var` font partie de la portée de la fonction englobante ou du script. Les effets de leur définition persistent en dehors du bloc. Les blocs seuls utilisés avec `var` (et non `let`) pourront laisser penser que ce bloc se comportera comme en C ou en Java. Par exemple : +> +> ```js +> var x = 1; +> { +> var x = 2; +> } +> console.log(x); // affichera 2 +> ``` +> +> Cella affichera 2 car l'instruction `var x` contenue dans le bloc fait partie de la même portée que l'instruction `var x` écrite avant le bloc. En C ou en Java, le code équivalent à cet exemple aurait produit 1. +> +> Cela a évolué avec ECMAScript 2015 (ES6). Les instructions `let`et `const` permettent de déclarer des variables dont la portée est celle du bloc courant. Voir les pages des références [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const). -<h2 id="conditional_statements">Les instructions conditionnelles</h2> +## Les instructions conditionnelles -<p>Une instruction conditionnelle est un ensemble de commandes qui s'exécutent si une condition donnée est vérifiée. JavaScript possède deux instructions conditionnelles : <code>if...else</code> et <code>switch</code>.</p> +Une instruction conditionnelle est un ensemble de commandes qui s'exécutent si une condition donnée est vérifiée. JavaScript possède deux instructions conditionnelles : `if...else` et `switch`. -<h3 id="if...else_statement">Instruction <code>if...else</code></h3> +### Instruction `if...else` -<p>On utilise l'instruction <code>if</code> lorsqu'on souhaite exécuter une instruction si une condition logique est vérifiée (vraie). La clause <code>else</code> est optionnelle et permet de préciser les instructions à exécuter si la condition logique n'est pas vérifiée (l'assertion est fausse). Voici un exemple qui illustre l'utilisation de l'instruction <code>if</code> :</p> +On utilise l'instruction `if` lorsqu'on souhaite exécuter une instruction si une condition logique est vérifiée (vraie). La clause `else` est optionnelle et permet de préciser les instructions à exécuter si la condition logique n'est pas vérifiée (l'assertion est fausse). Voici un exemple qui illustre l'utilisation de l'instruction `if` : -<pre class="brush: js">if (condition) { +```js +if (condition) { instruction_1; } else { instruction_2; -}</pre> +} +``` -<p><code>condition</code> peut correspondre à n'importe quelle expression qui est évaluée à <code>true</code> (vrai) ou <code>false</code> (faux). Voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean#description">booléens</a> pour plus d'informations sur les évaluations qui fournissent les valeurs <code>true</code> ou <code>false</code>. Si la <code>condition</code> vaut <code>true</code>, <code>instruction_1</code> est exécutée, sinon <code>instruction_2</code> sera exécutée. <code>instruction_1</code> et <code>instruction_2</code> peuvent correspondre à n'importe quelle instruction, y compris d'autres instructions <code>if</code>.</p> +`condition` peut correspondre à n'importe quelle expression qui est évaluée à `true` (vrai) ou `false` (faux). Voir la page sur les [booléens](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean#description) pour plus d'informations sur les évaluations qui fournissent les valeurs `true` ou `false`. Si la `condition` vaut `true`, `instruction_1` est exécutée, sinon `instruction_2` sera exécutée. `instruction_1` et `instruction_2` peuvent correspondre à n'importe quelle instruction, y compris d'autres instructions `if`. -<p>Si on doit tester différentes conditions les unes à la suite des autres, il est possible d'utiliser <code>else if</code> pour lier les différents tests. On l'utilise de la façon suivante :</p> +Si on doit tester différentes conditions les unes à la suite des autres, il est possible d'utiliser `else if` pour lier les différents tests. On l'utilise de la façon suivante : -<pre class="brush: js">if (condition_1) { +```js +if (condition_1) { instruction_1; } else if (condition_2) { instruction_2; @@ -84,66 +91,72 @@ console.log(x); // affichera 2</pre> instruction_n; } else { dernière_instruction; -}</pre> +} +``` -<p>Afin d'exécuter plusieurs instructions, on peut les regrouper grâce aux blocs (<code>{ ... }</code>) vus précédemment. C'est une bonne pratique que de les utiliser, surtout si on imbrique plusieurs instructions <code>if</code> les unes dans les autres:</p> +Afin d'exécuter plusieurs instructions, on peut les regrouper grâce aux blocs (`{ ... }`) vus précédemment. C'est une bonne pratique que de les utiliser, surtout si on imbrique plusieurs instructions `if` les unes dans les autres: -<h4 id="best_practice">Meilleure pratique</h4> +#### Meilleure pratique -<p>En général, il est bon de toujours utiliser des instructions de type bloc —<em>surtout</em> lorsqu'on imbrique des instructions <code>if</code> :</p> +En général, il est bon de toujours utiliser des instructions de type bloc —_surtout_ lorsqu'on imbrique des instructions `if` : -<pre class="brush: js">if (condition) { +```js +if (condition) { instruction_1_exécutée_si_condition_vraie; instruction_2_exécutée_si_condition_vraie; } else { instruction_3_exécutée_si_condition_fausse; instruction_4_exécutée_si_condition_fausse; -}</pre> +} +``` -<p>Attention à ne pas utiliser des instructions d'affectation dans les expressions conditionnelles. On peut, en effet, très facilement confondre l'affectation et le test d'égalité en lisant le code.</p> +Attention à ne pas utiliser des instructions d'affectation dans les expressions conditionnelles. On peut, en effet, très facilement confondre l'affectation et le test d'égalité en lisant le code. -<p>Voici un exemple de ce qu'il ne faut <strong>pas</strong> faire :</p> +Voici un exemple de ce qu'il ne faut **pas** faire : -<pre class="example-bad brush: js">if (x = y) { +```js example-bad +if (x = y) { /* exécuter des instructions */ -}</pre> +} +``` -<p>Ici, on ne teste pas si x vaut y, on affecte la valeur de y à x ! Si vous devez à tout prix utiliser une affectation dans une expression conditionnelle, une bonne pratique sera d'ajouter des parenthèses en plus autour de l'affectation. Par exemple :</p> +Ici, on ne teste pas si x vaut y, on affecte la valeur de y à x ! Si vous devez à tout prix utiliser une affectation dans une expression conditionnelle, une bonne pratique sera d'ajouter des parenthèses en plus autour de l'affectation. Par exemple : -<pre class="example-good brush: js">if ((x = y)) { +```js example-good +if ((x = y)) { /* exécuter des instructions */ } -</pre> +``` -<h4 id="falsy_values">Valeurs équivalentes à false dans un contexte booléen (<em>falsy</em> values)</h4> +#### Valeurs équivalentes à false dans un contexte booléen (_falsy_ values) -<p>Les valeurs suivantes sont évaluées à <code>false</code> (également connues sous le nom de <a href="/fr/docs/Glossary/Falsy">valeurs Falsy</a>) :</p> +Les valeurs suivantes sont évaluées à `false` (également connues sous le nom de [valeurs Falsy](/fr/docs/Glossary/Falsy)) : -<ul> - <li><code>false</code></li> - <li><code>undefined</code></li> - <li><code>null</code></li> - <li><code>0</code></li> - <li><code>NaN</code></li> - <li>la chaîne de caractères vide (<code>""</code>)</li> -</ul> +- `false` +- `undefined` +- `null` +- `0` +- `NaN` +- la chaîne de caractères vide (`""`) -<p>Les autres valeurs, y compris les objets, seront équivalents à <code>true</code>.</p> +Les autres valeurs, y compris les objets, seront équivalents à `true`. -<div class="warning"> - <p><strong>Attention :</strong> Ne pas confondre les valeurs booléennes « primitives » <code>true</code> et <code>false</code> avec les valeurs créées grâce à un objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a>.</p> - <p>Par exemple, on aura :</p> - - <pre class="brush: js">var b = new Boolean(false); - if (b) // cette condition est bien vérifiée ! - if (b === true) // cette condition n'est pas vérifiée !</pre> -</div> +> **Attention :** Ne pas confondre les valeurs booléennes « primitives » `true` et `false` avec les valeurs créées grâce à un objet [`Boolean`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Boolean). +> +> Par exemple, on aura : +> +> ```js +> var b = new Boolean(false); +> if (b) // cette condition est bien vérifiée ! +> if (b === true) // cette condition n'est pas vérifiée ! +> ``` -<h4 id="example_2">Exemple</h4> +#### Exemple -<p>Dans l'exemple qui suit, la fonction<code> checkData </code>renvoie <code>true</code> si une chaîne de caractères mesure trois caractères. Sinon, elle affiche une alerte et renvoie <code>false</code>.</p> +Dans l'exemple qui suit, la fonction` checkData `renvoie `true` si une chaîne de caractères mesure trois caractères. Sinon, elle affiche une alerte et renvoie `false`. -<pre class="brush: js">function checkData(maChaîne) { +```js +function checkData(maChaîne) { if (maChaîne.length == 3) { return true; } else { @@ -151,15 +164,17 @@ console.log(x); // affichera 2</pre> maChaîne + " n'est pas valide."); return false; } -}</pre> +} +``` -<h3 id="switch_statement">L'instruction <code>switch</code></h3> +### L'instruction `switch` -<p>L'instruction <code>switch</code> permet à un programme d'évaluer une expression et d'effectuer des instructions en fonction des différents cas de figures correspondants aux différentes valeurs. Si un cas correspond au résultat de l'évaluation, le programme exécute l'instruction associée.</p> +L'instruction `switch` permet à un programme d'évaluer une expression et d'effectuer des instructions en fonction des différents cas de figures correspondants aux différentes valeurs. Si un cas correspond au résultat de l'évaluation, le programme exécute l'instruction associée. -<p>Voici un exemple utilisant une instruction <code>switch</code> :</p> +Voici un exemple utilisant une instruction `switch` : -<pre class="brush: js">switch (expression) { +```js +switch (expression) { case label_1: instructions_1 [break;] @@ -171,30 +186,27 @@ console.log(x); // affichera 2</pre> instructions_par_defaut [break;] } -</pre> +``` -<p>JavaScript évalue l'instruction de commutation ci-dessus comme suit :</p> +JavaScript évalue l'instruction de commutation ci-dessus comme suit : -<ul> - <li>Le programme recherche d'abord une clause <code>case</code> dont l'étiquette correspond à la valeur de l'expression, puis il transfère le contrôle à cette clause, en exécutant les instructions associées.</li> - <li>Si aucune étiquette correspondante n'est trouvée, le programme recherche la clause optionnelle <code>default</code> : - <ul> - <li>Si une clause <code>default</code> est trouvée, le programme transfère le contrôle à cette clause, exécutant les déclarations associées.</li> - <li>Si aucune clause <code>default</code> n'est trouvée, le programme reprend l'exécution à l'instruction qui suit la fin de <code>switch</code>.</li> - <li>(Par convention, la clause <code>default</code> est écrite comme la dernière clause, mais il n'est pas nécessaire que ce soit le cas).</li> - </ul> - </li> -</ul> +- Le programme recherche d'abord une clause `case` dont l'étiquette correspond à la valeur de l'expression, puis il transfère le contrôle à cette clause, en exécutant les instructions associées. +- Si aucune étiquette correspondante n'est trouvée, le programme recherche la clause optionnelle `default` : -<h4 id="break_statements">L'instruction break</h4> + - Si une clause `default` est trouvée, le programme transfère le contrôle à cette clause, exécutant les déclarations associées. + - Si aucune clause `default` n'est trouvée, le programme reprend l'exécution à l'instruction qui suit la fin de `switch`. + - (Par convention, la clause `default` est écrite comme la dernière clause, mais il n'est pas nécessaire que ce soit le cas). -<p>L'instruction optionnelle <code>break</code>, éventuellement contenue pour chaque clause <code>case</code>, permet de ne pas exécuter les instructions pour les cas suivants. Si <code>break</code> n'est pas utilisé, le programme continuera son exécution avec les autres instructions contenues dans l'instruction <code>switch</code>.</p> +#### L'instruction break -<h5 id="example_3">Exemple</h5> +L'instruction optionnelle `break`, éventuellement contenue pour chaque clause `case`, permet de ne pas exécuter les instructions pour les cas suivants. Si `break` n'est pas utilisé, le programme continuera son exécution avec les autres instructions contenues dans l'instruction `switch`. -<p>Dans l'exemple suivant, si <code>fruit</code> vaut "Banane", le programme exécutera les instructions associées. Quand <code>break</code> est rencontré, le programme passe aux instructions décrites après <code>switch</code>. Ici, si <code>break</code> n'était pas présent, les instructions pour le cas "Cerise" auraient également été exécutées.</p> +##### Exemple -<pre class="brush: js">switch (fruit) { +Dans l'exemple suivant, si `fruit` vaut "Banane", le programme exécutera les instructions associées. Quand `break` est rencontré, le programme passe aux instructions décrites après `switch`. Ici, si `break` n'était pas présent, les instructions pour le cas "Cerise" auraient également été exécutées. + +```js +switch (fruit) { case "Orange": console.log("Les oranges sont à 60 centimes le kilo."); break; @@ -213,45 +225,44 @@ console.log(x); // affichera 2</pre> default: console.log("Désolé, nous n'avons pas de " + fruittype + "."); } -console.log("Souhaitez-vous autre chose ?");</pre> +console.log("Souhaitez-vous autre chose ?"); +``` -<h2 id="exception_handling_statements">Les instructions pour gérer les exceptions</h2> +## Les instructions pour gérer les exceptions -<p>Il est possible de lever des exceptions avec l'instruction <code>throw</code> et de les gérer (les intercepter) avec des instructions <code>try...catch</code>.</p> +Il est possible de lever des exceptions avec l'instruction `throw` et de les gérer (les intercepter) avec des instructions `try...catch`. -<ul> - <li><a href="#throw_statement">L'instruction throw</a></li> - <li><a href="#try...catch_statement">L'instruction <code>try...catch</code></a></li> -</ul> +- [L'instruction throw](#throw_statement) +- [L'instruction `try...catch`](#try...catch_statement) -<h3 id="exception_types">Les types d'exception</h3> +### Les types d'exception -<p>En JavaScript, n'importe quel objet peut être signalé comme une exception. Cependant, afin de respecter certaines conventions et de bénéficier de certaines informations, on pourra utiliser les types destinés à cet effet :</p> +En JavaScript, n'importe quel objet peut être signalé comme une exception. Cependant, afin de respecter certaines conventions et de bénéficier de certaines informations, on pourra utiliser les types destinés à cet effet : -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Error#error_types">Les exceptions ECMAScript</a></li> - <li><a href="/fr/docs/Web/API/DOMException"><code>DOMException</code></a> et <a href="/fr/docs/Web/API/DOMError"><code>DOMError</code></a></li> -</ul> +- [Les exceptions ECMAScript](/fr/docs/Web/JavaScript/Reference/Global_Objects/Error#error_types) +- [`DOMException`](/fr/docs/Web/API/DOMException) et [`DOMError`](/fr/docs/Web/API/DOMError) -<h3 id="throw_statement">L'instruction <code>throw</code></h3> +### L'instruction `throw` -<p>L'instruction <code>throw</code> est utilisée afin de signaler une exception. Lorsqu'on signale une exception, on définit une expression qui contient la valeur à renvoyer pour l'exception :</p> +L'instruction `throw` est utilisée afin de signaler une exception. Lorsqu'on signale une exception, on définit une expression qui contient la valeur à renvoyer pour l'exception : -<pre class="brush: js">throw expression;</pre> +```js +throw expression; +``` -<p>Il est possible d'utiliser n'importe quelle expression, sans restriction de type. Le fragment de code qui suit illustre les différentes possibilités :</p> +Il est possible d'utiliser n'importe quelle expression, sans restriction de type. Le fragment de code qui suit illustre les différentes possibilités : -<pre class="brush: js">throw "Erreur2"; //type String +```js +throw "Erreur2"; //type String throw 42; //type Number throw true; //type Boolean throw {toString: function () { return "je suis un objet !"; } }; -</pre> +``` -<div class="note"> - <p><strong>Note :</strong> Vous pouvez spécifier un objet lorsque vous lancez une exception. Vous pouvez alors faire référence aux propriétés de l'objet dans le bloc <code>catch</code>.</p> -</div> +> **Note :** Vous pouvez spécifier un objet lorsque vous lancez une exception. Vous pouvez alors faire référence aux propriétés de l'objet dans le bloc `catch`. -<pre class="brush: js">// On crée le constructeur pour cet objet +```js +// On crée le constructeur pour cet objet function ExceptionUtilisateur(message) { this.message = message; this.name = "ExceptionUtilisateur"; @@ -265,19 +276,21 @@ ExceptionUtilisateur.prototype.toString = function() { // On crée une instance pour ce type d'objet // et on renvoie une exception avec cette instance -throw new ExceptionUtilisateur("La valeur fournie est trop élevée.");</pre> +throw new ExceptionUtilisateur("La valeur fournie est trop élevée."); +``` -<h3 id="try...catch_statement">L'instruction <code>try...catch</code></h3> +### L'instruction `try...catch` -<p>L'instruction <code>try...catch</code> permet de définir un bloc d'instructions qu'on essaye (<em>try</em> en anglais) d'exécuter, ainsi qu'une ou plusieurs instructions à utiliser en cas d'erreur lorsqu'une exception se produit. Si une exception est signalée, l'instruction <code>try...catch</code> permettra de l' « attraper » (<em>catch</em> en anglais) et de définir ce qui se passe dans ce cas.</p> +L'instruction `try...catch` permet de définir un bloc d'instructions qu'on essaye (_try_ en anglais) d'exécuter, ainsi qu'une ou plusieurs instructions à utiliser en cas d'erreur lorsqu'une exception se produit. Si une exception est signalée, l'instruction `try...catch` permettra de l' « attraper » (_catch_ en anglais) et de définir ce qui se passe dans ce cas. -<p>L'instruction <code>try...catch</code> se compose d'un bloc <code>try</code> qui contient une ou plusieurs instructions et blocs <code>catch</code> qui contiennent les instructions à exécuter lorsqu'une exception se produit dans le bloc <code>try</code>.</p> +L'instruction `try...catch` se compose d'un bloc `try` qui contient une ou plusieurs instructions et blocs `catch` qui contiennent les instructions à exécuter lorsqu'une exception se produit dans le bloc `try`. -<p>Autrement dit, dans la plupart des cas pour le programme, on veut que les instructions du bloc <code>try</code> se déroulent normalement et en cas de problème, on passe le contrôle au bloc <code>catch</code>. Si une instruction contenue dans le bloc <code>try</code> renvoie une exception, le contrôle sera immédiatement transféré au bloc <code>catch</code>. Si aucune exception n'est signalée au sein du bloc <code>try</code>, le bloc <code>catch</code> ne sera pas utilisé. Cette instruction peut comporter un bloc <code>finally</code> qui s'exécute après les blocs <code>try</code> et <code>catch</code> mais avant les instructions suivant l'instruction <code>try...catch</code>.</p> +Autrement dit, dans la plupart des cas pour le programme, on veut que les instructions du bloc `try` se déroulent normalement et en cas de problème, on passe le contrôle au bloc `catch`. Si une instruction contenue dans le bloc `try` renvoie une exception, le contrôle sera immédiatement transféré au bloc `catch`. Si aucune exception n'est signalée au sein du bloc `try`, le bloc `catch` ne sera pas utilisé. Cette instruction peut comporter un bloc `finally` qui s'exécute après les blocs `try` et `catch` mais avant les instructions suivant l'instruction `try...catch`. -<p>Dans l'exemple qui suit, on utilise une instruction <code>try...catch</code>. On définit une fonction qui prend un nombre et renvoie le nom du mois correspondant à ce nombre. Si la valeur fournie n'est pas comprise entre 1 et 12, on signale une exception avec la valeur <code>"NuméroMoisInvalide"</code>. Lorsque cette exception est gérée dans le bloc <code>catch</code>, la variable <code>nomMois</code> recevra la valeur <code>"inconnu"</code>.</p> +Dans l'exemple qui suit, on utilise une instruction `try...catch`. On définit une fonction qui prend un nombre et renvoie le nom du mois correspondant à ce nombre. Si la valeur fournie n'est pas comprise entre 1 et 12, on signale une exception avec la valeur `"NuméroMoisInvalide"`. Lorsque cette exception est gérée dans le bloc `catch`, la variable `nomMois` recevra la valeur `"inconnu"`. -<pre class="brush: js">function getNomMois(numMois) { +```js +function getNomMois(numMois) { numMois = numMois - 1; // On décale de 1 car les indices du tableaux commencent à 0 var mois = ["Janvier", "Février", "Mars", "Avril" ,"Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"]; @@ -293,44 +306,48 @@ try { // les instructions à essayer si tout se passe bien } catch (e) { nomMois = "inconnu"; gestionErreurLog(e); // on gère l'erreur avec une fonction -}</pre> +} +``` -<h4 id="the_catch_block">Le bloc <code>catch</code></h4> +#### Le bloc `catch` -<p>Un bloc <code>catch</code> peut être utilisé afin de gérer les exceptions pouvant être générées par les instructions du bloc <code>try</code>.</p> +Un bloc `catch` peut être utilisé afin de gérer les exceptions pouvant être générées par les instructions du bloc `try`. -<pre class="brush: js">catch (ident) { +```js +catch (ident) { statements -}</pre> +} +``` -<p>Le bloc <code>catch</code> définit un identifiant (<code>ident</code> dans le fragment de code précédent) qui contiendra la valeur passée par l'instruction <code>throw</code>. Cet identifiant peut être utilisé afin de récupérer des informations sur l'exception qui a été signalée.</p> +Le bloc `catch` définit un identifiant (`ident` dans le fragment de code précédent) qui contiendra la valeur passée par l'instruction `throw`. Cet identifiant peut être utilisé afin de récupérer des informations sur l'exception qui a été signalée. -<p>JavaScript crée cet identifiant lorsque le contrôle passe au bloc <code>catch</code>. L'identifiant ne « vit » qu'à l'intérieur du bloc <code>catch</code> et une fois que l'exécution du bloc <code>catch</code> est terminée, l'identifiant n'est plus disponible.</p> +JavaScript crée cet identifiant lorsque le contrôle passe au bloc `catch`. L'identifiant ne « vit » qu'à l'intérieur du bloc `catch` et une fois que l'exécution du bloc `catch` est terminée, l'identifiant n'est plus disponible. -<p>Dans l'exemple suivant, le code renvoie une exception. Lorsque celle-ci est signalée, le contrôle passe au bloc <code>catch</code>.</p> +Dans l'exemple suivant, le code renvoie une exception. Lorsque celle-ci est signalée, le contrôle passe au bloc `catch`. -<pre class="brush: js">try { +```js +try { throw "monException"; // on génère une exception } catch (e) { // les instructions utilisées pour gérer les exceptions enregistrerErreurs(e); // on passe l'objet représentant l'exception à une fonction utilisée pour gérer les erreurs -}</pre> +} +``` -<div class="note"> - <p><strong>Note :</strong> Quand on souhaite afficher des erreurs dans la console, on privilégiera <a href="/fr/docs/Web/API/Console/error"><code>console.error()</code></a> plutôt que <a href="/fr/docs/Web/API/Console/log"><code>console.log()</code></a>. En effet, cette première méthode est plus adaptée et indiquera plus d'informations.</p> -</div> +> **Note :** Quand on souhaite afficher des erreurs dans la console, on privilégiera [`console.error()`](/fr/docs/Web/API/Console/error) plutôt que [`console.log()`](/fr/docs/Web/API/Console/log). En effet, cette première méthode est plus adaptée et indiquera plus d'informations. -<h4 id="the_finally_block">Le bloc <code>finally</code></h4> +#### Le bloc `finally` -<p>Le bloc <code>finally</code> contient les instructions à exécuter après les blocs <code>try</code> et <code>catch</code> mais avant l'instruction suivant le <code>try...catch...finally</code>.</p> +Le bloc `finally` contient les instructions à exécuter après les blocs `try` et `catch` mais avant l'instruction suivant le `try...catch...finally`. -<p>Le bloc <code>finally</code> est exécuté dans tous les cas, <strong>qu'une exception ait été levée ou non</strong>. Si une exception est signalée et qu'il n'y a pas de bloc <code>catch</code> pour la gérer, les instructions du bloc <code>finally</code> seront tout de même exécutées.</p> +Le bloc `finally` est exécuté dans tous les cas, **qu'une exception ait été levée ou non**. Si une exception est signalée et qu'il n'y a pas de bloc `catch` pour la gérer, les instructions du bloc `finally` seront tout de même exécutées. -<p>Le bloc <code>finally</code> peut être utilisé afin de finir proprement l'exécution malgré une exception. On peut, par exemple, devoir libérer une ressource, ou fermer un flux, etc.</p> +Le bloc `finally` peut être utilisé afin de finir proprement l'exécution malgré une exception. On peut, par exemple, devoir libérer une ressource, ou fermer un flux, etc. -<p>Dans l'exemple suivant, on écrit dans un fichier, si une exception se produit lors de l'écriture, on utilisera le bloc <code>finally</code> afin de bien fermer le flux vers le fichier avant la fin du script.</p> +Dans l'exemple suivant, on écrit dans un fichier, si une exception se produit lors de l'écriture, on utilisera le bloc `finally` afin de bien fermer le flux vers le fichier avant la fin du script. -<pre class="brush: js">ouvrirFichier(); +```js +ouvrirFichier(); try { écrireFichier(données); // Une erreur peut se produire } catch(e) { @@ -338,11 +355,12 @@ try { } finally { fermerFichier(); // On n'oublie jamais de fermer le flux. } -</pre> +``` -<p>Si le bloc <code>finally</code> renvoie une valeur, cette valeur sera considérée comme la valeur de retour pour tout l'ensemble <code>try-catch-finally</code>, quelles que soient les instructions <code>return</code> éventuellement utilisées dans les blocs <code>try</code> et <code>catch</code> :</p> +Si le bloc `finally` renvoie une valeur, cette valeur sera considérée comme la valeur de retour pour tout l'ensemble `try-catch-finally`, quelles que soient les instructions `return` éventuellement utilisées dans les blocs `try` et `catch` : -<pre class="brush: js">function f() { +```js +function f() { try { console.log(0); throw "bug"; @@ -360,11 +378,12 @@ try { console.log(5); // Ne pourra jamais être exécuté } f(); // affiche 0, 1, 3 puis renvoie false -</pre> +``` -<p>Lorsqu'on surcharge les valeurs de retour avec le bloc <code>finally</code>, cela s'applique également aux exceptions qui sont levées (ou retransmises) au sein du bloc <code>catch</code> :</p> +Lorsqu'on surcharge les valeurs de retour avec le bloc `finally`, cela s'applique également aux exceptions qui sont levées (ou retransmises) au sein du bloc `catch` : -<pre class="brush: js">function f() { +```js +function f() { try { throw "problème"; } catch(e) { @@ -387,32 +406,32 @@ try { } // Sortie -// "problème" interne attrapé</pre> +// "problème" interne attrapé +``` -<h4 id="nesting_try...catch_statements">Imbriquer des instructions <code>try...catch</code></h4> +#### Imbriquer des instructions `try...catch` -<p>Il est possible d'imbriquer une ou plusieurs instructions <code>try...catch</code>.</p> +Il est possible d'imbriquer une ou plusieurs instructions `try...catch`. -<p>Si un bloc <code>try</code> interne n'a <em>pas</em> de bloc <code>catch</code> correspondant :</p> +Si un bloc `try` interne n'a _pas_ de bloc `catch` correspondant : -<ol> - <li>il <em>doit</em> contenir un bloc <code>finally</code>, et</li> - <li>le bloc <code>try...catch</code> de l'instruction <code>catch</code> englobante est vérifié pour une correspondance.</li> -</ol> +1. il _doit_ contenir un bloc `finally`, et +2. le bloc `try...catch` de l'instruction `catch` englobante est vérifié pour une correspondance. -<p>Pour plus d'informations, voir <a href="/fr/docs/Web/JavaScript/Référence/Statements/try...catch#nested_try-blocks">nested try-blocks</a> sur la page de référence <code><a href="/fr/docs/Web/JavaScript/Référence/Statements/try...catch">try...catch</a></code>.</p> +Pour plus d'informations, voir [nested try-blocks](/fr/docs/Web/JavaScript/Référence/Statements/try...catch#nested_try-blocks) sur la page de référence [`try...catch`](/fr/docs/Web/JavaScript/Référence/Statements/try...catch). -<h3 id="utilizing_error_objects">Utiliser les objets d'erreur</h3> +### Utiliser les objets d'erreur -<p>En fonction du type d'erreur qui est créée, on pourra utiliser les propriétés <code>name</code> et <code>message</code> afin d'obtenir plus d'informations.</p> +En fonction du type d'erreur qui est créée, on pourra utiliser les propriétés `name` et `message` afin d'obtenir plus d'informations. -<p>Généralement on a <code>name</code> qui fournit le type d'erreur rencontrée (ex : <code>DOMException</code> ou <code>Error</code>). La propriété <code>message</code>, quant à elle fournit un message descriptif de l'erreur (qu'on utilisera généralement lorsqu'on voudra convertir/afficher le texte correspondant à une erreur).</p> +Généralement on a `name` qui fournit le type d'erreur rencontrée (ex : `DOMException` ou `Error`). La propriété `message`, quant à elle fournit un message descriptif de l'erreur (qu'on utilisera généralement lorsqu'on voudra convertir/afficher le texte correspondant à une erreur). -<p>Si vous construisez des erreurs, vous pouvez utiliser le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a> afin de disposer de ces propriétés.</p> +Si vous construisez des erreurs, vous pouvez utiliser le constructeur [`Error`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Error) afin de disposer de ces propriétés. -<p>Ainsi, on pourra avoir :</p> +Ainsi, on pourra avoir : -<pre class="brush: js">function causerErreurs() { +```js +function causerErreurs() { if (toutEstSourceDErreurs()) { throw (new Error('mon message')); } else { @@ -425,6 +444,7 @@ try { } catch (e) { console.error(e.name);// affiche 'Error' console.error(e.message); // affiche 'mon message' ou un message d'erreur JavaScript -}</pre> +} +``` -<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> +{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}} diff --git a/files/fr/web/javascript/guide/details_of_the_object_model/index.md b/files/fr/web/javascript/guide/details_of_the_object_model/index.md index 8cf9bf50ff..0176da2600 100644 --- a/files/fr/web/javascript/guide/details_of_the_object_model/index.md +++ b/files/fr/web/javascript/guide/details_of_the_object_model/index.md @@ -9,53 +9,50 @@ tags: translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model original_slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}} -<p>JavaScript est un langage orienté objet basé sur des prototypes, plutôt que sur des classes. En raison de cette base différente, il peut être moins évident de comprendre comment JavaScript vous permet de créer des hiérarchies d'objets et d'avoir un héritage des propriétés et de leurs valeurs. Ce chapitre tente de clarifier la situation.</p> +JavaScript est un langage orienté objet basé sur des prototypes, plutôt que sur des classes. En raison de cette base différente, il peut être moins évident de comprendre comment JavaScript vous permet de créer des hiérarchies d'objets et d'avoir un héritage des propriétés et de leurs valeurs. Ce chapitre tente de clarifier la situation. -<p>Ce chapitre part du principe que vous avez déjà une certaine connaissance de JavaScript et que vous avez utilisé des fonctions JavaScript pour créer des objets simples.</p> +Ce chapitre part du principe que vous avez déjà une certaine connaissance de JavaScript et que vous avez utilisé des fonctions JavaScript pour créer des objets simples. -<h2 id="class-based_vs._prototype-based_languages">Langages basés sur des classes ou des prototypes</h2> +## Langages basés sur des classes ou des prototypes -<p>Les langages orientés objets, basés sur des classes, tels que Java et C++, sont fondés sur le concept de deux entités distinctes : les classes et les instances.</p> +Les langages orientés objets, basés sur des classes, tels que Java et C++, sont fondés sur le concept de deux entités distinctes : les classes et les instances. -<ul> - <li>Une <em>classe</em> définit toutes les propriétés qui caractérisent un certain ensemble d'objets (en considérant les méthodes et les champs en Java, ou les membres en C++, comme des propriétés). Une classe est abstraite par opposition à un membre particulier d'un ensemble d'objets qu'elle décrit. Par exemple, la classe <code>Employee</code> pourrait représenter l'ensemble de tous les employés.</li> - <li>Une <em>instance</em>, par contre, est l'instanciation d'une classe. Par exemple, <code>Victoria</code> pourrait être une instance de la classe <code>Employee</code>, représentant un individu particulier en tant qu'employé. Une instance possède exactement les mêmes propriétés que sa classe parente (ni plus, ni moins).</li> -</ul> +- Une _classe_ définit toutes les propriétés qui caractérisent un certain ensemble d'objets (en considérant les méthodes et les champs en Java, ou les membres en C++, comme des propriétés). Une classe est abstraite par opposition à un membre particulier d'un ensemble d'objets qu'elle décrit. Par exemple, la classe `Employee` pourrait représenter l'ensemble de tous les employés. +- Une _instance_, par contre, est l'instanciation d'une classe. Par exemple, `Victoria` pourrait être une instance de la classe `Employee`, représentant un individu particulier en tant qu'employé. Une instance possède exactement les mêmes propriétés que sa classe parente (ni plus, ni moins). -<p>Un langage basé sur des prototypes, tel que JavaScript, ne fait pas cette distinction : il a des objets. Un langage basé sur des prototypes possède la notion d'un <em>objet prototypique</em>, un objet utilisé comme modèle à partir duquel on peut obtenir les propriétés initiales d'un nouvel objet. Tout objet peut spécifier ses propres propriétés, soit lors de sa création, soit au moment de l'exécution. En outre, tout objet peut être associé en tant que <em>prototype</em> d'un autre objet, permettant au second objet de partager les propriétés du premier.</p> +Un langage basé sur des prototypes, tel que JavaScript, ne fait pas cette distinction : il a des objets. Un langage basé sur des prototypes possède la notion d'un _objet prototypique_, un objet utilisé comme modèle à partir duquel on peut obtenir les propriétés initiales d'un nouvel objet. Tout objet peut spécifier ses propres propriétés, soit lors de sa création, soit au moment de l'exécution. En outre, tout objet peut être associé en tant que _prototype_ d'un autre objet, permettant au second objet de partager les propriétés du premier. -<h3 id="defining_a_class">La définition d'une classe</h3> +### La définition d'une classe -<p>Dans les langages basés sur les classes, vous définissez une classe en utilisant une <em>définition de classe</em> distincte. Dans cette définition, vous pouvez spécifier des méthodes spéciales, appelées <em>constructeur</em> (et écrites « constructor »), pour créer des instances de la classe. Une méthode constructrice peut spécifier des valeurs initiales pour les propriétés de l'instance et effectuer d'autres traitements appropriés au moment de la création. Vous utilisez l'opérateur <code>new</code> en association avec la méthode constructrice pour créer des instances de la classe.</p> +Dans les langages basés sur les classes, vous définissez une classe en utilisant une _définition de classe_ distincte. Dans cette définition, vous pouvez spécifier des méthodes spéciales, appelées _constructeur_ (et écrites « constructor »), pour créer des instances de la classe. Une méthode constructrice peut spécifier des valeurs initiales pour les propriétés de l'instance et effectuer d'autres traitements appropriés au moment de la création. Vous utilisez l'opérateur `new` en association avec la méthode constructrice pour créer des instances de la classe. -<p>JavaScript suit un modèle similaire, mais ne dispose pas d'une définition de classe distincte de celle du constructeur. Au lieu de cela, vous définissez une fonction de construction pour créer des objets avec un ensemble initial particulier de propriétés et de valeurs. Toute fonction JavaScript peut être utilisée comme constructeur. Vous utilisez l'opérateur <code>new</code> avec une fonction « constructor » pour créer un nouvel objet.</p> +JavaScript suit un modèle similaire, mais ne dispose pas d'une définition de classe distincte de celle du constructeur. Au lieu de cela, vous définissez une fonction de construction pour créer des objets avec un ensemble initial particulier de propriétés et de valeurs. Toute fonction JavaScript peut être utilisée comme constructeur. Vous utilisez l'opérateur `new` avec une fonction « constructor » pour créer un nouvel objet. -<div class="note"> - <p><strong>Note :</strong> ECMAScript 2015 introduit une <a href="/fr/docs/Web/JavaScript/Reference/Classes">déclaration de classe</a> :</p> - - <blockquote> - <p>Les classes JavaScript, introduites dans ECMAScript 2015, sont principalement un enrichissement syntaxique de l'héritage basé sur les prototypes existant dans JavaScript. La syntaxe des classes n'introduit pas un nouveau modèle d'héritage orienté objet dans JavaScript.</p> - </blockquote> -</div> +> **Note :** ECMAScript 2015 introduit une [déclaration de classe](/fr/docs/Web/JavaScript/Reference/Classes) : +> +> > Les classes JavaScript, introduites dans ECMAScript 2015, sont principalement un enrichissement syntaxique de l'héritage basé sur les prototypes existant dans JavaScript. La syntaxe des classes n'introduit pas un nouveau modèle d'héritage orienté objet dans JavaScript. -<h3 id="subclasses_and_inheritance">Classes enfants et héritage</h3> +### Classes enfants et héritage -<p>Dans un langage basé sur les classes, vous créez une hiérarchie de classes par le biais des définitions de classes. Dans une définition de classe, vous pouvez spécifier que la nouvelle classe est une <em>classe enfant</em> d'une classe déjà existante. La classe enfant hérite de toutes les propriétés de la classe parente et peut en plus ajouter de nouvelles propriétés ou modifier celles héritées. Par exemple, supposons que la classe <code>Employee</code> ne comprend que les propriétés <code>name</code> (« nom ») et <code>dept</code> (« département »), et que <code>Manager</code> est une classe enfant de <code>Employee</code> qui ajoute la propriété <code>reports</code> (« rapports »). Dans ce cas, une instance de la classe <code>Manager</code> aurait les trois propriétés : <code>name</code>, <code>dept</code>, et <code>reports</code>.</p> +Dans un langage basé sur les classes, vous créez une hiérarchie de classes par le biais des définitions de classes. Dans une définition de classe, vous pouvez spécifier que la nouvelle classe est une _classe enfant_ d'une classe déjà existante. La classe enfant hérite de toutes les propriétés de la classe parente et peut en plus ajouter de nouvelles propriétés ou modifier celles héritées. Par exemple, supposons que la classe `Employee` ne comprend que les propriétés `name` (« nom ») et `dept` (« département »), et que `Manager` est une classe enfant de `Employee` qui ajoute la propriété `reports` (« rapports »). Dans ce cas, une instance de la classe `Manager` aurait les trois propriétés : `name`, `dept`, et `reports`. -<p>JavaScript met en œuvre l'héritage en vous permettant d'associer un objet prototypique à n'importe quelle fonction de construction. Ainsi, vous pouvez créer exactement l'exemple <code>Employee</code> — <code>Manager</code>, mais vous utilisez une terminologie légèrement différente. D'abord, vous définissez la fonction du constructeur <code>Employee</code>, en spécifiant les propriétés <code>name</code> et <code>dept</code>. Ensuite, vous définissez la fonction du constructeur <code>Manager</code>, en appelant le constructeur <code>Employee</code> et en spécifiant la propriété <code>reports</code>. Enfin, vous attribuez un nouvel objet dérivé de <code>Employee.prototype</code> comme <code>prototype</code> pour la fonction du constructeur <code>Manager</code>. Ensuite, lorsque vous créez un nouveau <code>Manager</code>, il hérite des propriétés <code>name</code> et <code>dept</code> de l'objet <code>Employee</code>.</p> +JavaScript met en œuvre l'héritage en vous permettant d'associer un objet prototypique à n'importe quelle fonction de construction. Ainsi, vous pouvez créer exactement l'exemple `Employee` — `Manager`, mais vous utilisez une terminologie légèrement différente. D'abord, vous définissez la fonction du constructeur `Employee`, en spécifiant les propriétés `name` et `dept`. Ensuite, vous définissez la fonction du constructeur `Manager`, en appelant le constructeur `Employee` et en spécifiant la propriété `reports`. Enfin, vous attribuez un nouvel objet dérivé de `Employee.prototype` comme `prototype` pour la fonction du constructeur `Manager`. Ensuite, lorsque vous créez un nouveau `Manager`, il hérite des propriétés `name` et `dept` de l'objet `Employee`. -<h3 id="adding_and_removing_properties">Ajouter ou retirer des propriétés</h3> +### Ajouter ou retirer des propriétés -<p>Dans les langages basés sur les classes, vous créez généralement une classe au moment de la compilation, puis vous instanciez, des instances de la classe, soit au moment de la compilation, soit au moment de l'exécution. Vous ne pouvez pas modifier le nombre ou le type de propriétés d'une classe après avoir défini cette dernière. En JavaScript, cependant, au moment de l'exécution, vous pouvez ajouter ou supprimer des propriétés de tout objet. Si vous ajoutez une propriété à un objet qui est utilisé comme prototype pour un ensemble d'objets, les objets dont il est le prototype obtiennent également la nouvelle propriété.</p> +Dans les langages basés sur les classes, vous créez généralement une classe au moment de la compilation, puis vous instanciez, des instances de la classe, soit au moment de la compilation, soit au moment de l'exécution. Vous ne pouvez pas modifier le nombre ou le type de propriétés d'une classe après avoir défini cette dernière. En JavaScript, cependant, au moment de l'exécution, vous pouvez ajouter ou supprimer des propriétés de tout objet. Si vous ajoutez une propriété à un objet qui est utilisé comme prototype pour un ensemble d'objets, les objets dont il est le prototype obtiennent également la nouvelle propriété. -<h3 id="summary_of_differences">Résumé des différences</h3> +### Résumé des différences -<p>Le tableau suivant donne un bref résumé de certaines de ces différences. Le reste de ce chapitre décrit les détails de l'utilisation des constructeurs et prototypes JavaScript pour créer une hiérarchie d'objets et les compare à la façon dont vous le feriez en Java.</p> +Le tableau suivant donne un bref résumé de certaines de ces différences. Le reste de ce chapitre décrit les détails de l'utilisation des constructeurs et prototypes JavaScript pour créer une hiérarchie d'objets et les compare à la façon dont vous le feriez en Java. <table class="standard-table"> - <caption>Comparaison des systèmes d'objets basés sur des classes (Java) et des prototypes (JavaScript)</caption> + <caption> + Comparaison des systèmes d'objets basés sur des classes (Java) et des + prototypes (JavaScript) + </caption> <thead> <tr> <th scope="row">Catégorie</th> @@ -71,8 +68,14 @@ original_slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails </tr> <tr> <th scope="row">Définition</th> - <td>Définir une classe avec une définition de classe ; instancier une classe avec des méthodes de construction.</td> - <td>Définir et créer un ensemble d'objets avec des fonctions de construction.</td> + <td> + Définir une classe avec une définition de classe ; instancier une classe + avec des méthodes de construction. + </td> + <td> + Définir et créer un ensemble d'objets avec des fonctions de + construction. + </td> </tr> <tr> <th scope="row">Création d'un nouvel objet</th> @@ -81,8 +84,14 @@ original_slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails </tr> <tr> <th scope="row">Construction de la hiérarchie des objets</th> - <td>Construire une hiérarchie d'objets en utilisant des définitions de classes pour définir des classes enfants à partir de classes existantes.</td> - <td>Construire une hiérarchie d'objets en assignant un objet comme prototype associé à une fonction de construction.</td> + <td> + Construire une hiérarchie d'objets en utilisant des définitions de + classes pour définir des classes enfants à partir de classes existantes. + </td> + <td> + Construire une hiérarchie d'objets en assignant un objet comme prototype + associé à une fonction de construction. + </td> </tr> <tr> <th scope="row">Modèle d'héritage</th> @@ -91,66 +100,80 @@ original_slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails </tr> <tr> <th scope="row">Extension des propriétés</th> - <td>La définition de la classe spécifie <em>toutes</em> les propriétés de toutes les instances d'une classe. Impossible d'ajouter des propriétés dynamiquement au moment de l'exécution.</td> - <td>La fonction ou le prototype du constructeur spécifie un <em>ensemble initial</em> de propriétés. On peut ajouter ou supprimer dynamiquement des propriétés à des objets individuels ou à l'ensemble des objets.</td> + <td> + La définition de la classe spécifie <em>toutes</em> les propriétés de + toutes les instances d'une classe. Impossible d'ajouter des propriétés + dynamiquement au moment de l'exécution. + </td> + <td> + La fonction ou le prototype du constructeur spécifie un + <em>ensemble initial</em> de propriétés. On peut ajouter ou supprimer + dynamiquement des propriétés à des objets individuels ou à l'ensemble + des objets. + </td> </tr> </tbody> </table> -<h2 id="the_employee_example">L'exemple de l'employé</h2> +## L'exemple de l'employé -<p>Le reste de ce chapitre utilise la hiérarchie des employés présentée dans la figure suivante.</p> +Le reste de ce chapitre utilise la hiérarchie des employés présentée dans la figure suivante. -<p><img alt="" src="figure8.1.png"></p> + -<p>Cela montre une hiérarchie d'objets avec les objets suivants :</p> +Cela montre une hiérarchie d'objets avec les objets suivants : -<ul> - <li><code>Employee</code> possède les propriétés <code>name</code> (« le nom » dont la valeur par défaut est la chaîne de caractères vide) et <code>dept</code> (« le département » dont la valeur par défaut est « général »).</li> - <li><code>Manager</code> est basé sur <code>Employee</code>. Il ajoute la propriété <code>reports</code> (« les rapports » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau d'objets <code>Employee</code>).</li> - <li><code>WorkerBee</code> est également basé sur <code>Employee</code>. Il ajoute la propriété <code>projects</code> (« les projets » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau de chaînes de caractères).</li> - <li><code>SalesPerson</code> est basé sur <code>WorkerBee</code>. Il ajoute la propriété <code>quota</code> (dont la valeur par défaut est 100). Il surcharge la propriété <code>dept</code> avec la valeur « ventes », indiquant que tous les vendeurs sont dans le même département.</li> - <li><code>Engineer</code> est basé sur <code>WorkerBee</code>. Il ajoute la propriété <code>machine</code> (dont la valeur par défaut est une chaîne de caractères vide) et surcharge également la propriété <code>dept</code> avec la valeur « ingénierie ».</li> -</ul> +- `Employee` possède les propriétés `name` (« le nom » dont la valeur par défaut est la chaîne de caractères vide) et `dept` (« le département » dont la valeur par défaut est « général »). +- `Manager` est basé sur `Employee`. Il ajoute la propriété `reports` (« les rapports » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau d'objets `Employee`). +- `WorkerBee` est également basé sur `Employee`. Il ajoute la propriété `projects` (« les projets » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau de chaînes de caractères). +- `SalesPerson` est basé sur `WorkerBee`. Il ajoute la propriété `quota` (dont la valeur par défaut est 100). Il surcharge la propriété `dept` avec la valeur « ventes », indiquant que tous les vendeurs sont dans le même département. +- `Engineer` est basé sur `WorkerBee`. Il ajoute la propriété `machine` (dont la valeur par défaut est une chaîne de caractères vide) et surcharge également la propriété `dept` avec la valeur « ingénierie ». -<h2 id="creating_the_hierarchy">La création de la hiérarchie</h2> +## La création de la hiérarchie -<p>Il existe plusieurs façons de définir des fonctions constructrices appropriées pour mettre en œuvre la hiérarchie des employés. La façon dont vous choisissez de les définir dépend en grande partie de ce que vous voulez être en mesure de faire dans votre application.</p> +Il existe plusieurs façons de définir des fonctions constructrices appropriées pour mettre en œuvre la hiérarchie des employés. La façon dont vous choisissez de les définir dépend en grande partie de ce que vous voulez être en mesure de faire dans votre application. -<p>Cette section montre comment utiliser des définitions très simples (et comparativement peu flexibles) pour démontrer comment faire fonctionner l'héritage. Dans ces définitions, vous ne pouvez spécifier aucune valeur de propriété lorsque vous créez un objet. L'objet nouvellement créé reçoit les valeurs par défaut, que vous pouvez modifier ultérieurement.</p> +Cette section montre comment utiliser des définitions très simples (et comparativement peu flexibles) pour démontrer comment faire fonctionner l'héritage. Dans ces définitions, vous ne pouvez spécifier aucune valeur de propriété lorsque vous créez un objet. L'objet nouvellement créé reçoit les valeurs par défaut, que vous pouvez modifier ultérieurement. -<p>Dans une application réelle, vous définiriez probablement des constructeurs qui vous permettent de fournir des valeurs de propriété au moment de la création de l'objet (voir <a href="#more_flexible_constructors">Des constructeurs plus flexibles</a> pour plus d'informations). Pour l'instant, ces définitions simples démontrent comment l'héritage se produit.</p> +Dans une application réelle, vous définiriez probablement des constructeurs qui vous permettent de fournir des valeurs de propriété au moment de la création de l'objet (voir [Des constructeurs plus flexibles](#more_flexible_constructors) pour plus d'informations). Pour l'instant, ces définitions simples démontrent comment l'héritage se produit. -<p>Les définitions suivantes en Java et en JavaScript de <code>Employee</code> sont similaires. La seule différence est que vous devez spécifier le type de chaque propriété en Java mais pas en JavaScript (ceci est dû au fait que Java est un <a href="https://en.wikipedia.org/wiki/Strong_and_weak_typing">langage fortement typé</a> <small>(en anglais)</small> alors que JavaScript est un langage faiblement typé).</p> +Les définitions suivantes en Java et en JavaScript de `Employee` sont similaires. La seule différence est que vous devez spécifier le type de chaque propriété en Java mais pas en JavaScript (ceci est dû au fait que Java est un [langage fortement typé](https://en.wikipedia.org/wiki/Strong_and_weak_typing) (en anglais) alors que JavaScript est un langage faiblement typé). -<h4 id="javascript_using_this_may_cause_an_error_for_the_following_examples">JavaScript (l'utilisation de cette option peut provoquer une erreur pour les exemples suivants)</h4> +#### JavaScript (l'utilisation de cette option peut provoquer une erreur pour les exemples suivants) -<pre class="brush: js">class Employee { +```js +class Employee { constructor() { this.name = ''; this.dept = 'général'; } -}</pre> +} +``` -<h4 id="javascript_**_use_this_instead">JavaScript ** (utilisez plutôt ceci)</h4> +#### JavaScript \*\* (utilisez plutôt ceci) -<pre class="brush: js">function Employee() { +```js +function Employee() { this.name = ''; this.dept = 'général'; -}</pre> +} +``` -<h4 id="java">Java</h4> +#### Java -<pre class="brush: java">public class Employee { +```java +public class Employee { public String name = ""; public String dept = "général"; -}</pre> +} +``` -<p>Les définitions de <code>Manager</code> et de <code>WorkerBee</code> montrent la différence dans la façon de spécifier l'objet immédiatement supérieur dans la chaîne d'héritage. En JavaScript, vous ajoutez une instance prototypique comme valeur de la propriété <code>prototype</code> de la fonction du constructeur, puis vous surchargez le <code>prototype.constructor</code> de la fonction du constructeur. Vous pouvez le faire à tout moment après avoir défini le constructeur. En Java, vous spécifiez la superclasse dans la définition de la classe. Vous ne pouvez pas modifier la superclasse en dehors de la définition de la classe.</p> +Les définitions de `Manager` et de `WorkerBee` montrent la différence dans la façon de spécifier l'objet immédiatement supérieur dans la chaîne d'héritage. En JavaScript, vous ajoutez une instance prototypique comme valeur de la propriété `prototype` de la fonction du constructeur, puis vous surchargez le `prototype.constructor` de la fonction du constructeur. Vous pouvez le faire à tout moment après avoir défini le constructeur. En Java, vous spécifiez la superclasse dans la définition de la classe. Vous ne pouvez pas modifier la superclasse en dehors de la définition de la classe. -<h4 id="javascript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">function Manager() { +```js +function Manager() { Employee.call(this); // On étend l'objet parent this.reports = []; // On définit une propriété unique à Manager } @@ -163,11 +186,12 @@ function WorkerBee() { } WorkerBee.prototype = Object.create(Employee.prototype); // On définit le constructeur dans prototype WorkerBee.prototype.constructor = WorkerBee; // On surchage le constructeur -</pre> +``` -<h4 id="java_2">Java</h4> +#### Java -<pre class="brush: java">// La classe Manager étend la classe parente Employee +```java +// La classe Manager étend la classe parente Employee public class Manager extends Employee { public Employee[] reports = new Employee[0]; // On définit une propriété unique à Manager } @@ -176,13 +200,14 @@ public class Manager extends Employee { public class WorkerBee extends Employee { public String[] projects = new String[0]; // On définit une propriété unique à WorkerBee } -</pre> +``` -<p>Les définitions <code>Engineer</code> et <code>SalesPerson</code> créent des objets qui descendent de <code>WorkerBee</code> et donc de <code>Employee</code>. Un objet de ces types possède les propriétés de tous les objets situés au-dessus de lui dans la hiérarchie. En outre, ces définitions remplacent la valeur héritée de la propriété <code>dept</code> par de nouvelles valeurs spécifiques à ces objets.</p> +Les définitions `Engineer` et `SalesPerson` créent des objets qui descendent de `WorkerBee` et donc de `Employee`. Un objet de ces types possède les propriétés de tous les objets situés au-dessus de lui dans la hiérarchie. En outre, ces définitions remplacent la valeur héritée de la propriété `dept` par de nouvelles valeurs spécifiques à ces objets. -<h4 id="javascript_2">JavaScript</h4> +#### JavaScript -<pre class="brush: js">function SalesPerson() { +```js +function SalesPerson() { WorkerBee.call(this); // On étend l'objet WorkerBee this.dept = 'ventes'; // On réécrit la valeur de « dept » this.quota = 100; // On ajoute une propriété unique à SalesPerson @@ -196,11 +221,13 @@ function Engineer() { this.machine = ''; // On ajoute une propriété unique à Engineer } Engineer.prototype = Object.create(WorkerBee.prototype); -Engineer.prototype.constructor = Engineer;</pre> +Engineer.prototype.constructor = Engineer; +``` -<h4 id="java_3">Java</h4> +#### Java -<pre class="brush: java">// La classe a pour classe parente WorkerBee +```java +// La classe a pour classe parente WorkerBee public class SalesPerson extends WorkerBee { public String dept = "ventes"; // On réécrit la valeur de « dept » public double quota = 100.0; // On ajoute une propriété unique à SalesPerson @@ -210,25 +237,25 @@ public class SalesPerson extends WorkerBee { public class Engineer extends WorkerBee { public String dept = "ingénierie"; // On réécrit la valeur de « dept » public String machine = ""; // On ajoute une propriété unique à Engineer -}</pre> +} +``` -<p>À l'aide de ces définitions, vous pouvez créer des instances de ces objets qui obtiennent les valeurs par défaut de leurs propriétés. La figure suivante illustre l'utilisation de ces définitions JavaScript pour créer de nouveaux objets et montre les valeurs des propriétés de ces nouveaux objets.</p> +À l'aide de ces définitions, vous pouvez créer des instances de ces objets qui obtiennent les valeurs par défaut de leurs propriétés. La figure suivante illustre l'utilisation de ces définitions JavaScript pour créer de nouveaux objets et montre les valeurs des propriétés de ces nouveaux objets. -<div class="note"> - <p><strong>Note :</strong> Le terme <em>instance</em> a une signification technique spécifique dans les langages basés sur les classes. Dans ces langages, une instance est une instanciation individuelle d'une classe et est fondamentalement différente d'une classe. En JavaScript, « instance » n'a pas cette signification technique car JavaScript ne fait pas cette différence entre classes et instances. Toutefois, en parlant de JavaScript, le terme « instance » peut être utilisé de manière informelle pour désigner un objet créé à l'aide d'une fonction de construction particulière. Ainsi, dans cet exemple, vous pourriez dire de manière informelle que <code>jane</code> est une instance de <code>Engineer</code>. De même, bien que les termes <i>parent</i> (« Parent »), <i>child</i> (« Enfant »), <i>ancestor</i> (« Ancêtre ») et <i>descendant</i> (« Descendant ») n'aient pas de signification formelle en JavaScript ; vous pouvez les utiliser de manière informelle pour vous référer à des objets supérieurs ou inférieurs dans la chaîne des prototypes.</p> -</div> +> **Note :** Le terme _instance_ a une signification technique spécifique dans les langages basés sur les classes. Dans ces langages, une instance est une instanciation individuelle d'une classe et est fondamentalement différente d'une classe. En JavaScript, « instance » n'a pas cette signification technique car JavaScript ne fait pas cette différence entre classes et instances. Toutefois, en parlant de JavaScript, le terme « instance » peut être utilisé de manière informelle pour désigner un objet créé à l'aide d'une fonction de construction particulière. Ainsi, dans cet exemple, vous pourriez dire de manière informelle que `jane` est une instance de `Engineer`. De même, bien que les termes _parent_ (« Parent »), _child_ (« Enfant »), _ancestor_ (« Ancêtre ») et _descendant_ (« Descendant ») n'aient pas de signification formelle en JavaScript ; vous pouvez les utiliser de manière informelle pour vous référer à des objets supérieurs ou inférieurs dans la chaîne des prototypes. -<h3 id="creating_objects_with_simple_definitions">Création d'objets avec des définitions simples</h3> +### Création d'objets avec des définitions simples -<h4 id="object_hierarchy">Hiérarchie des objets</h4> +#### Hiérarchie des objets -<p>La hiérarchie suivante est créée à l'aide du code situé ci-dessous.</p> +La hiérarchie suivante est créée à l'aide du code situé ci-dessous. -<p><img src="figure8.3.png"></p> + -<h4 id="individual_objects_jim_sally_mark_fred_jane_etc._instances_created_from_constructor">Objets individuels = Jim, Sally, Mark, Fred, Jane, etc.<br>« Instances » créées à partir du constructeur</h4> +#### Objets individuels = Jim, Sally, Mark, Fred, Jane, etc.<br>« Instances » créées à partir du constructeur -<pre class="brush: js">let jim = new Employee; +```js +let jim = new Employee; // Les parenthèses peuvent être omises si // le constructeur ne prend pas d'arguments. // jim.name correspond à '' @@ -255,65 +282,78 @@ let jane = new Engineer; // jane.dept correspond à 'ingénierie' // jane.projects correspond à [] // jane.machine correspond à '' -</pre> +``` -<h2 id="object_properties">Les propriétés d'un objet</h2> +## Les propriétés d'un objet -<p>Cette section explique comment les objets héritent des propriétés d'autres objets dans la chaîne des prototypes et ce qui se passe lorsque vous ajoutez une propriété au moment de l'exécution.</p> +Cette section explique comment les objets héritent des propriétés d'autres objets dans la chaîne des prototypes et ce qui se passe lorsque vous ajoutez une propriété au moment de l'exécution. -<h3 id="inheriting_properties">L'héritage de propriétés</h3> +### L'héritage de propriétés -<p>Supposons que vous créez l'objet <code>mark</code> comme un <code>WorkerBee</code> avec l'instruction suivante :</p> +Supposons que vous créez l'objet `mark` comme un `WorkerBee` avec l'instruction suivante : -<pre class="brush: js">let mark = new WorkerBee;</pre> +```js +let mark = new WorkerBee; +``` -<p>Lorsque JavaScript voit l'opérateur <code>new</code>, il crée un nouvel objet générique et définit implicitement la valeur de la propriété interne [[Prototype]] à la valeur de <code>WorkerBee.prototype</code> et passe ce nouvel objet comme valeur du mot-clé <em><code>this</code></em> à la fonction du constructeur <code>WorkerBee</code>. La propriété interne [[Prototype]] détermine la chaîne de prototypes utilisée pour retourner les valeurs des propriétés. Une fois ces propriétés définies, JavaScript renvoie le nouvel objet et l'instruction d'affectation définit la variable <code>mark</code> à cet objet.</p> +Lorsque JavaScript voit l'opérateur `new`, il crée un nouvel objet générique et définit implicitement la valeur de la propriété interne \[\[Prototype]] à la valeur de `WorkerBee.prototype` et passe ce nouvel objet comme valeur du mot-clé _`this`_ à la fonction du constructeur `WorkerBee`. La propriété interne \[\[Prototype]] détermine la chaîne de prototypes utilisée pour retourner les valeurs des propriétés. Une fois ces propriétés définies, JavaScript renvoie le nouvel objet et l'instruction d'affectation définit la variable `mark` à cet objet. -<p>Ce processus ne met pas explicitement des valeurs dans l'objet <code>mark</code> (valeurs <em>locales</em>) pour les propriétés que <code>mark</code> hérite de la chaîne de prototypes. Lorsque vous demandez la valeur d'une propriété, JavaScript vérifie d'abord si la valeur existe dans cet objet. Si c'est le cas, cette valeur est retournée. Si la valeur n'existe pas localement, JavaScript vérifie la chaîne des prototypes (en utilisant la propriété interne [[Prototype]]). Si un objet de la chaîne des prototypes possède une valeur pour la propriété, cette valeur est renvoyée. Si aucune propriété de ce type n'est trouvée, JavaScript indique que l'objet ne possède pas la propriété. Ainsi, l'objet <code>mark</code> possède les propriétés et valeurs suivantes :</p> +Ce processus ne met pas explicitement des valeurs dans l'objet `mark` (valeurs _locales_) pour les propriétés que `mark` hérite de la chaîne de prototypes. Lorsque vous demandez la valeur d'une propriété, JavaScript vérifie d'abord si la valeur existe dans cet objet. Si c'est le cas, cette valeur est retournée. Si la valeur n'existe pas localement, JavaScript vérifie la chaîne des prototypes (en utilisant la propriété interne \[\[Prototype]]). Si un objet de la chaîne des prototypes possède une valeur pour la propriété, cette valeur est renvoyée. Si aucune propriété de ce type n'est trouvée, JavaScript indique que l'objet ne possède pas la propriété. Ainsi, l'objet `mark` possède les propriétés et valeurs suivantes : -<pre class="brush: js">mark.name = ''; +```js +mark.name = ''; mark.dept = 'général'; -mark.projects = [];</pre> +mark.projects = []; +``` -<p>L'objet <code>mark</code> se voit attribuer des valeurs locales pour les propriétés <code>name</code> et <code>dept</code> par le constructeur <code>Employee</code>. Une valeur locale lui est attribuée pour la propriété <code>projects</code> par le constructeur <code>WorkerBee</code>. On obtient ainsi l'héritage des propriétés et de leurs valeurs en JavaScript. Certaines subtilités de ce processus sont abordées dans <a href="#property_inheritance_revisited">L'héritage des propriétés, revisité</a>.</p> +L'objet `mark` se voit attribuer des valeurs locales pour les propriétés `name` et `dept` par le constructeur `Employee`. Une valeur locale lui est attribuée pour la propriété `projects` par le constructeur `WorkerBee`. On obtient ainsi l'héritage des propriétés et de leurs valeurs en JavaScript. Certaines subtilités de ce processus sont abordées dans [L'héritage des propriétés, revisité](#property_inheritance_revisited). -<p>Comme ces constructeurs ne vous permettent pas de fournir des valeurs spécifiques à une instance, ces informations sont génériques. Les valeurs des propriétés sont celles par défaut partagées par tous les nouveaux objets créés à partir de <code>WorkerBee</code>. Vous pouvez, bien sûr, modifier les valeurs de n'importe laquelle de ces propriétés. Ainsi, vous pourriez donner des informations spécifiques pour <code>mark</code> comme suit :</p> +Comme ces constructeurs ne vous permettent pas de fournir des valeurs spécifiques à une instance, ces informations sont génériques. Les valeurs des propriétés sont celles par défaut partagées par tous les nouveaux objets créés à partir de `WorkerBee`. Vous pouvez, bien sûr, modifier les valeurs de n'importe laquelle de ces propriétés. Ainsi, vous pourriez donner des informations spécifiques pour `mark` comme suit : -<pre class="brush: js">mark.name = 'Mark Eting'; +```js +mark.name = 'Mark Eting'; mark.dept = 'admin'; -mark.projects = ['navigateur'];</pre> +mark.projects = ['navigateur']; +``` -<h3 id="adding_properties">L'ajout de propriétés</h3> +### L'ajout de propriétés -<p>En JavaScript, vous pouvez ajouter des propriétés à tout objet au moment de l'exécution. Vous n'êtes pas contraint d'utiliser uniquement les propriétés fournies par la fonction du constructeur. Pour ajouter une propriété spécifique à un seul objet, vous attribuez une valeur à l'objet, comme suit :</p> +En JavaScript, vous pouvez ajouter des propriétés à tout objet au moment de l'exécution. Vous n'êtes pas contraint d'utiliser uniquement les propriétés fournies par la fonction du constructeur. Pour ajouter une propriété spécifique à un seul objet, vous attribuez une valeur à l'objet, comme suit : -<pre class="brush: js">mark.bonus = 3000;</pre> +```js +mark.bonus = 3000; +``` -<p>Maintenant, l'objet <code>mark</code> possède une propriété <code>bonus</code>, mais aucun autre objet <code>WorkerBee</code> ne possède cette propriété.</p> +Maintenant, l'objet `mark` possède une propriété `bonus`, mais aucun autre objet `WorkerBee` ne possède cette propriété. -<p>Si vous ajoutez une nouvelle propriété à un objet qui est utilisé comme prototype pour une fonction du constructeur, vous ajoutez cette propriété à tous les objets qui héritent des propriétés du prototype. Par exemple, vous pouvez ajouter une propriété <code>specialty</code> à tous les employés avec l'instruction suivante :</p> +Si vous ajoutez une nouvelle propriété à un objet qui est utilisé comme prototype pour une fonction du constructeur, vous ajoutez cette propriété à tous les objets qui héritent des propriétés du prototype. Par exemple, vous pouvez ajouter une propriété `specialty` à tous les employés avec l'instruction suivante : -<pre class="brush: js">Employee.prototype.specialty = 'aucune';</pre> +```js +Employee.prototype.specialty = 'aucune'; +``` -<p>Dès que JavaScript exécute cette instruction, l'objet <code>mark</code> possède également la propriété <code>specialty</code> avec la valeur <code>"aucune"</code>. La figure suivante montre l'effet de l'ajout de cette propriété au prototype <code>Employee</code>, puis de sa surcharge pour le prototype <code>Engineer</code>.</p> +Dès que JavaScript exécute cette instruction, l'objet `mark` possède également la propriété `specialty` avec la valeur `"aucune"`. La figure suivante montre l'effet de l'ajout de cette propriété au prototype `Employee`, puis de sa surcharge pour le prototype `Engineer`. -<p><img alt="Ajout de propriétés" src="figure8.4.png"></p> + -<h2 id="more_flexible_constructors">Des constructeurs plus flexibles</h2> +## Des constructeurs plus flexibles -<p>Les fonctions correctrices présentées jusqu'à présent ne vous permettent pas de spécifier les valeurs des propriétés lorsque vous créez une instance. Comme avec Java, vous pouvez fournir des arguments aux constructeurs pour initialiser les valeurs des propriétés des instances. La figure suivante montre une façon de le faire.</p> +Les fonctions correctrices présentées jusqu'à présent ne vous permettent pas de spécifier les valeurs des propriétés lorsque vous créez une instance. Comme avec Java, vous pouvez fournir des arguments aux constructeurs pour initialiser les valeurs des propriétés des instances. La figure suivante montre une façon de le faire. -<p><img alt="Spécifier des propriétés dans un constructeur, prise 1" src="figure8.5.png"></p> + -<p>Les paires d'exemples suivantes montrent les définitions Java et JavaScript de ces objets.</p> +Les paires d'exemples suivantes montrent les définitions Java et JavaScript de ces objets. -<pre class="brush: js">// JavaScript +```js +// JavaScript function Employee(name, dept) { this.name = name || ''; // L'argument donné OU la valeur par défaut this.dept = dept || 'général'; // L'argument donné OU la valeur par défaut -}</pre> +} +``` -<pre class="brush: java">// Java +```java +// Java public class Employee { public String name; public String dept; @@ -330,15 +370,19 @@ public class Employee { this.name = name; this.dept = dept; } -}</pre> +} +``` -<pre class="brush: js">// JavaScript +```js +// JavaScript function WorkerBee(projs) { this.projects = projs || []; // L'argument donné OU la valeur par défaut } -WorkerBee.prototype = new Employee;</pre> +WorkerBee.prototype = new Employee; +``` -<pre class="brush: java">// Java +```java +// Java public class WorkerBee extends Employee { public String[] projects; // On assigne une valeur par défaut à la propriété @@ -349,16 +393,20 @@ public class WorkerBee extends Employee { public WorkerBee (String[] projs) { projects = projs; } -}</pre> +} +``` -<pre class="brush: js">// JavaScript +```js +// JavaScript function Engineer(mach) { this.dept = 'engineering'; // On réécrit la valeur de « dept » this.machine = mach || ''; // L'argument donné OU la valeur par défaut } -Engineer.prototype = new WorkerBee;</pre> +Engineer.prototype = new WorkerBee; +``` -<pre class="brush: java">// Java +```java +// Java public class Engineer extends WorkerBee { public String machine; public Engineer () { @@ -369,74 +417,83 @@ public class Engineer extends WorkerBee { dept = "engineering"; // On réécrit la valeur de « dept » machine = mach; // On assigne l'argument donné à la propriété } -}</pre> +} +``` -<p>Ces définitions JavaScript utilisent un idiome spécial pour définir les valeurs par défaut :</p> +Ces définitions JavaScript utilisent un idiome spécial pour définir les valeurs par défaut : -<pre class="brush: js">this.nom = nom || "";</pre> +```js +this.nom = nom || ""; +``` -<p>L'opérateur logique OU de JavaScript (<code>||</code>) évalue son premier argument. Si cet argument se transforme en vrai, l'opérateur le retourne. Sinon, l'opérateur renvoie la valeur du deuxième argument. Par conséquent, cette ligne de code teste pour voir si <code>name</code> a une valeur utile pour la propriété <code>name</code>. Si c'est le cas, elle définit <code>this.name</code> à cette valeur. Sinon, elle définit <code>this.name</code> à la chaîne de caractères vide. Ce chapitre utilise cet idiome par souci de concision ; cependant, il peut être déroutant au premier abord.</p> +L'opérateur logique OU de JavaScript (`||`) évalue son premier argument. Si cet argument se transforme en vrai, l'opérateur le retourne. Sinon, l'opérateur renvoie la valeur du deuxième argument. Par conséquent, cette ligne de code teste pour voir si `name` a une valeur utile pour la propriété `name`. Si c'est le cas, elle définit `this.name` à cette valeur. Sinon, elle définit `this.name` à la chaîne de caractères vide. Ce chapitre utilise cet idiome par souci de concision ; cependant, il peut être déroutant au premier abord. -<div class="note"> - <p><strong>Note :</strong> Cela peut ne pas fonctionner comme prévu si la fonction du constructeur est appelée avec des arguments qui se convertissent en <code>false</code> (comme <code>0</code> (zéro) et la chaîne vide (<code>""</code>)). Dans ce cas, la valeur par défaut sera choisie.</p> -</div> +> **Note :** Cela peut ne pas fonctionner comme prévu si la fonction du constructeur est appelée avec des arguments qui se convertissent en `false` (comme `0` (zéro) et la chaîne vide (`""`)). Dans ce cas, la valeur par défaut sera choisie. -<p>Avec ces définitions, lorsque vous créez une instance d'un objet, vous pouvez spécifier des valeurs pour les propriétés définies localement. Vous pouvez utiliser l'instruction suivante pour créer un nouvel <code>Engineer</code> :</p> +Avec ces définitions, lorsque vous créez une instance d'un objet, vous pouvez spécifier des valeurs pour les propriétés définies localement. Vous pouvez utiliser l'instruction suivante pour créer un nouvel `Engineer` : -<pre class="brush: js">let jane = new Engineer('belau');</pre> +```js +let jane = new Engineer('belau'); +``` -<p>Les propriétés de <code>Jane</code> sont maintenant :</p> +Les propriétés de `Jane` sont maintenant : -<pre class="brush: js">jane.name == ''; +```js +jane.name == ''; jane.dept == 'engineering'; jane.projects == []; -jane.machine == 'belau';</pre> +jane.machine == 'belau'; +``` -<p>Remarquez qu'avec ces définitions, vous ne pouvez pas spécifier une valeur initiale pour une propriété héritée telle que <code>name</code>. Si vous voulez spécifier une valeur initiale pour les propriétés héritées en JavaScript, vous devez ajouter du code supplémentaire à la fonction du constructeur.</p> +Remarquez qu'avec ces définitions, vous ne pouvez pas spécifier une valeur initiale pour une propriété héritée telle que `name`. Si vous voulez spécifier une valeur initiale pour les propriétés héritées en JavaScript, vous devez ajouter du code supplémentaire à la fonction du constructeur. -<p>Jusqu'à présent, la fonction du constructeur a créé un objet générique, puis a spécifié les propriétés et valeurs locales du nouvel objet. Vous pouvez demander au constructeur d'ajouter d'autres propriétés en appelant directement la fonction du constructeur d'un objet situé plus haut dans la chaîne des prototypes. La figure suivante montre ces nouvelles définitions.</p> +Jusqu'à présent, la fonction du constructeur a créé un objet générique, puis a spécifié les propriétés et valeurs locales du nouvel objet. Vous pouvez demander au constructeur d'ajouter d'autres propriétés en appelant directement la fonction du constructeur d'un objet situé plus haut dans la chaîne des prototypes. La figure suivante montre ces nouvelles définitions. -<p><img alt="Spécifier des propriétés dans un constructeur, prise 2" src="figure8.6.png"></p> + -<p>Examinons l'une de ces définitions en détails. Voici la nouvelle définition pour le constructeur <code>Engineer</code> :</p> +Examinons l'une de ces définitions en détails. Voici la nouvelle définition pour le constructeur `Engineer` : -<pre class="brush: js">function Engineer(name, projs, mach) { +```js +function Engineer(name, projs, mach) { this.base = WorkerBee; this.base(name, 'ingénierie', projs); this.machine = mach || ''; -}</pre> +} +``` -<p>Supposons que vous créez un nouvel objet <code>Engineer</code> comme suit :</p> +Supposons que vous créez un nouvel objet `Engineer` comme suit : -<pre class="brush: js">let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau'); -</pre> +```js +let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau'); +``` -<p>JavaScript suit les étapes suivantes :</p> +JavaScript suit les étapes suivantes : -<ol> - <li>L'opérateur <code>new</code> crée un objet générique et définit sa propriété <code>__proto__</code> à <code>Engineer.prototype</code>.</li> - <li>L'opérateur <code>new</code> transmet le nouvel objet au constructeur <code>Engineer</code> comme valeur du mot clé <code>this</code>.</li> - <li>Le constructeur crée une nouvelle propriété appelée <code>base</code> pour cet objet et affecte la valeur du constructeur <code>WorkerBee</code> à la propriété <code>base</code>. Cela fait du constructeur <code>WorkerBee</code> une méthode de l'objet <code>Engineer</code>. Le nom de la propriété <code>base</code> n'est pas spécial. Vous pouvez utiliser n'importe quel nom de propriété légal ; <code>base</code> est évocateur de son but.</li> - <li>Le constructeur appelle la méthode <code>base</code>, en passant comme arguments deux des arguments passés au constructeur (<code>"Jane Dupont"</code> et <code>["navigateur", "javascript"]</code>) et également la chaîne <code>"ingénierie"</code>. L'utilisation explicite de <code>"ingénierie"</code> dans le constructeur indique que tous les objets <code>Engineer</code> ont la même valeur pour la propriété <code>dept</code> héritée, et cette valeur remplace la valeur héritée de <code>Employee</code>.</li> - <li>Parce que <code>base</code> est une méthode de <code>Engineer</code>, dans l'appel à <code>base</code>, JavaScript lie le mot-clé <code>this</code> à l'objet créé à l'étape 1. Ainsi, la fonction <code>WorkerBee</code> transmet à son tour les arguments <code>"Jane Dupont"</code> et <code>"ingénierie"</code> à la fonction du constructeur <code>Employee</code>. Au retour de la fonction du constructeur <code>Employee</code>, la fonction <code>WorkerBee</code> utilise l'argument restant pour définir la propriété <code>projects</code>.</li> - <li>Au retour de la méthode <code>base</code>, le constructeur <code>Engineer</code> initialise la propriété <code>machine</code> de l'objet à <code>"belau"</code>.</li> - <li>Au retour du constructeur, JavaScript affecte le nouvel objet à la variable <code>jane</code>.</li> -</ol> +1. L'opérateur `new` crée un objet générique et définit sa propriété `__proto__` à `Engineer.prototype`. +2. L'opérateur `new` transmet le nouvel objet au constructeur `Engineer` comme valeur du mot clé `this`. +3. Le constructeur crée une nouvelle propriété appelée `base` pour cet objet et affecte la valeur du constructeur `WorkerBee` à la propriété `base`. Cela fait du constructeur `WorkerBee` une méthode de l'objet `Engineer`. Le nom de la propriété `base` n'est pas spécial. Vous pouvez utiliser n'importe quel nom de propriété légal ; `base` est évocateur de son but. +4. Le constructeur appelle la méthode `base`, en passant comme arguments deux des arguments passés au constructeur (`"Jane Dupont"` et `["navigateur", "javascript"]`) et également la chaîne `"ingénierie"`. L'utilisation explicite de `"ingénierie"` dans le constructeur indique que tous les objets `Engineer` ont la même valeur pour la propriété `dept` héritée, et cette valeur remplace la valeur héritée de `Employee`. +5. Parce que `base` est une méthode de `Engineer`, dans l'appel à `base`, JavaScript lie le mot-clé `this` à l'objet créé à l'étape 1. Ainsi, la fonction `WorkerBee` transmet à son tour les arguments `"Jane Dupont"` et `"ingénierie"` à la fonction du constructeur `Employee`. Au retour de la fonction du constructeur `Employee`, la fonction `WorkerBee` utilise l'argument restant pour définir la propriété `projects`. +6. Au retour de la méthode `base`, le constructeur `Engineer` initialise la propriété `machine` de l'objet à `"belau"`. +7. Au retour du constructeur, JavaScript affecte le nouvel objet à la variable `jane`. -<p>Vous pourriez penser que, ayant appelé le constructeur <code>WorkerBee</code> à partir de l'intérieur du constructeur <code>Engineer</code>, vous avez mis en place l'héritage de manière appropriée pour les objets <code>Engineer</code>. Ce n'est pas le cas. L'appel du constructeur <code>WorkerBee</code> garantit qu'un objet <code>Engineer</code> commence avec les propriétés spécifiées dans toutes les fonctions des constructeurs qui sont appelées. Cependant, si vous ajoutez ultérieurement des propriétés aux prototypes <code>Employee</code> ou <code>WorkerBee</code>, ces propriétés ne sont pas héritées par l'objet <code>Engineer</code>. Par exemple, supposons que vous ayez les déclarations suivantes :</p> +Vous pourriez penser que, ayant appelé le constructeur `WorkerBee` à partir de l'intérieur du constructeur `Engineer`, vous avez mis en place l'héritage de manière appropriée pour les objets `Engineer`. Ce n'est pas le cas. L'appel du constructeur `WorkerBee` garantit qu'un objet `Engineer` commence avec les propriétés spécifiées dans toutes les fonctions des constructeurs qui sont appelées. Cependant, si vous ajoutez ultérieurement des propriétés aux prototypes `Employee` ou `WorkerBee`, ces propriétés ne sont pas héritées par l'objet `Engineer`. Par exemple, supposons que vous ayez les déclarations suivantes : -<pre class="brush: js">function Engineer(name, projs, mach) { +```js +function Engineer(name, projs, mach) { this.base = WorkerBee; this.base(name, 'ingénierie', projs); this.machine = mach || ''; } let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau'); -Employee.prototype.specialty = 'aucune';</pre> +Employee.prototype.specialty = 'aucune'; +``` -<p>L'objet <code>jane</code> n'hérite pas de la propriété <code>specialty</code>. Vous devez encore configurer explicitement le prototype pour assurer un héritage dynamique. Supposons plutôt que vous ayez ces déclarations :</p> +L'objet `jane` n'hérite pas de la propriété `specialty`. Vous devez encore configurer explicitement le prototype pour assurer un héritage dynamique. Supposons plutôt que vous ayez ces déclarations : -<pre class="brush: js">function Engineer(name, projs, mach) { +```js +function Engineer(name, projs, mach) { this.base = WorkerBee; this.base(name, 'ingénierie', projs); this.machine = mach || ''; @@ -444,43 +501,47 @@ Employee.prototype.specialty = 'aucune';</pre> Engineer.prototype = new WorkerBee; let jane = new Engineer('Jane Dupont', ['navigateur', 'javascript'], 'belau'); -Employee.prototype.specialty = 'aucune';</pre> +Employee.prototype.specialty = 'aucune'; +``` -<p>Maintenant la valeur de la propriété <code>jane</code> de l'objet <code>specialty</code> est « aucune ».</p> +Maintenant la valeur de la propriété `jane` de l'objet `specialty` est « aucune ». -<p>Une autre façon d'hériter est d'utiliser les méthodes <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> / <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"><code>apply()</code></a>. Les méthodes ci-dessous sont équivalentes :</p> +Une autre façon d'hériter est d'utiliser les méthodes [`call()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call) / [`apply()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/apply). Les méthodes ci-dessous sont équivalentes : -<pre class="brush: js">function Engineer(name, projs, mach) { +```js +function Engineer(name, projs, mach) { this.base = WorkerBee; this.base(name, 'ingénierie', projs); this.machine = mach || ''; -}</pre> +} +``` -<pre class="brush: js">function Engineer(name, projs, mach) { +```js +function Engineer(name, projs, mach) { WorkerBee.call(this, name, 'ingénierie', projs); this.machine = mach || ''; -}</pre> +} +``` -<p>L'utilisation de la méthode JavaScript <code>call()</code> rend une implémentation plus propre car <code>base</code> n'est plus nécessaire.</p> +L'utilisation de la méthode JavaScript `call()` rend une implémentation plus propre car `base` n'est plus nécessaire. -<h2 id="property_inheritance_revisited">L'héritage des propriétés, revisité</h2> +## L'héritage des propriétés, revisité -<p>Les sections précédentes ont décrit comment les constructeurs et prototypes JavaScript fournissent des hiérarchies et de l'héritage. Cette section aborde certaines subtilités qui n'étaient pas nécessairement apparentes dans les discussions précédentes.</p> +Les sections précédentes ont décrit comment les constructeurs et prototypes JavaScript fournissent des hiérarchies et de l'héritage. Cette section aborde certaines subtilités qui n'étaient pas nécessairement apparentes dans les discussions précédentes. -<h3 id="local_versus_inherited_values">Valeurs locales et valeurs héritées</h3> +### Valeurs locales et valeurs héritées -<p>Lorsque vous accédez à une propriété d'objet, JavaScript effectue les étapes suivantes, comme décrit précédemment dans ce chapitre :</p> +Lorsque vous accédez à une propriété d'objet, JavaScript effectue les étapes suivantes, comme décrit précédemment dans ce chapitre : -<ol> - <li>Vérifiez si la valeur existe localement. Si c'est le cas, elle est retournée.</li> - <li>S'il n'y a pas de valeur locale, vérifiez la chaîne de prototypes (en utilisant la propriété <code>__proto__</code>).</li> - <li>Si un objet de la chaîne de prototypes possède une valeur pour la propriété spécifiée, renvoyer cette valeur.</li> - <li>Si aucune propriété de ce type n'est trouvée, l'objet ne possède pas cette propriété.</li> -</ol> +1. Vérifiez si la valeur existe localement. Si c'est le cas, elle est retournée. +2. S'il n'y a pas de valeur locale, vérifiez la chaîne de prototypes (en utilisant la propriété `__proto__`). +3. Si un objet de la chaîne de prototypes possède une valeur pour la propriété spécifiée, renvoyer cette valeur. +4. Si aucune propriété de ce type n'est trouvée, l'objet ne possède pas cette propriété. -<p>Le résultat de ces étapes dépend de la façon dont vous définissez les choses en cours de route. L'exemple original avait ces définitions :</p> +Le résultat de ces étapes dépend de la façon dont vous définissez les choses en cours de route. L'exemple original avait ces définitions : -<pre class="brush: js">function Employee() { +```js +function Employee() { this.name = ''; this.dept = 'général'; } @@ -488,29 +549,37 @@ Employee.prototype.specialty = 'aucune';</pre> function WorkerBee() { this.projects = []; } -WorkerBee.prototype = new Employee;</pre> +WorkerBee.prototype = new Employee; +``` -<p>Avec ces définitions, supposons que vous créez <code>amy</code> comme une instance de <code>WorkerBee</code> avec l'instruction suivante :</p> +Avec ces définitions, supposons que vous créez `amy` comme une instance de `WorkerBee` avec l'instruction suivante : -<pre class="brush: js">let amy = new WorkerBee;</pre> +```js +let amy = new WorkerBee; +``` -<p>L'objet <code>amy</code> possède une propriété locale, <code>projects</code>. Les valeurs des propriétés <code>name</code> et <code>dept</code> ne sont pas locales à <code>amy</code> et héritent donc dans la propriété <code>amy</code> de l'objet <code>__proto__</code>. Ainsi, <code>amy</code> possède ces valeurs de propriétés :</p> +L'objet `amy` possède une propriété locale, `projects`. Les valeurs des propriétés `name` et `dept` ne sont pas locales à `amy` et héritent donc dans la propriété `amy` de l'objet `__proto__`. Ainsi, `amy` possède ces valeurs de propriétés : -<pre class="brush: js">amy.name == ''; +```js +amy.name == ''; amy.dept == 'général'; -amy.projects == [];</pre> +amy.projects == []; +``` -<p>Supposons maintenant que vous modifiez la valeur de la propriété <code>name</code> dans le prototype associé à <code>Employee</code> :</p> +Supposons maintenant que vous modifiez la valeur de la propriété `name` dans le prototype associé à `Employee` : -<pre class="brush: js">Employee.prototype.name = 'Inconnu·e';</pre> +```js +Employee.prototype.name = 'Inconnu·e'; +``` -<p>À première vue, on pourrait s'attendre à ce que cette nouvelle valeur se propage vers le bas à toutes les instances de <code>Employee</code>. Cependant, ce n'est pas le cas.</p> +À première vue, on pourrait s'attendre à ce que cette nouvelle valeur se propage vers le bas à toutes les instances de `Employee`. Cependant, ce n'est pas le cas. -<p>Lorsque vous créez <em>n'importe quelle</em> instance de l'objet <code>Employee</code>, cette instance obtient une <strong>valeur locale</strong> pour la propriété <code>name</code> (la chaîne de caractères vide). Cela signifie que lorsque vous définissez le prototype de <code>WorkerBee</code> en créant un nouvel objet <code>Employee</code>, <code>WorkerBee.prototype</code> a une valeur locale pour la propriété <code>name</code>. Par conséquent, lorsque JavaScript recherche la propriété <code>name</code> de l'objet <code>amy</code> (une instance de <code>WorkerBee</code>), JavaScript trouve la valeur locale de cette propriété dans <code>WorkerBee.prototype</code>. Il ne cherche donc pas plus haut dans la chaîne jusqu'à <code>Employee.prototype</code>.</p> +Lorsque vous créez _n'importe quelle_ instance de l'objet `Employee`, cette instance obtient une **valeur locale** pour la propriété `name` (la chaîne de caractères vide). Cela signifie que lorsque vous définissez le prototype de `WorkerBee` en créant un nouvel objet `Employee`, `WorkerBee.prototype` a une valeur locale pour la propriété `name`. Par conséquent, lorsque JavaScript recherche la propriété `name` de l'objet `amy` (une instance de `WorkerBee`), JavaScript trouve la valeur locale de cette propriété dans `WorkerBee.prototype`. Il ne cherche donc pas plus haut dans la chaîne jusqu'à `Employee.prototype`. -<p>Si vous souhaitez modifier la valeur d'une propriété d'un objet au moment de l'exécution et que la nouvelle valeur soit héritée par tous les descendants de l'objet, vous ne pouvez pas définir la propriété dans la fonction du constructeur de l'objet. Vous devez plutôt l'ajouter au prototype associé au constructeur. Par exemple, supposons que vous remplaciez le code précédent par le suivant :</p> +Si vous souhaitez modifier la valeur d'une propriété d'un objet au moment de l'exécution et que la nouvelle valeur soit héritée par tous les descendants de l'objet, vous ne pouvez pas définir la propriété dans la fonction du constructeur de l'objet. Vous devez plutôt l'ajouter au prototype associé au constructeur. Par exemple, supposons que vous remplaciez le code précédent par le suivant : -<pre class="brush: js">function Employee() { +```js +function Employee() { this.dept = 'général'; // Notez que this.name (une variable locale) n'apparaît pas ici } Employee.prototype.name = ''; // Un seul exemplaire @@ -522,38 +591,46 @@ WorkerBee.prototype = new Employee; let amy = new WorkerBee; -Employee.prototype.name = 'Inconnu·e';</pre> +Employee.prototype.name = 'Inconnu·e'; +``` + +Dans ce cas, la propriété `name` de `amy` devient « Inconnu·e ». + +Comme le montrent ces exemples, si vous souhaitez définir des valeurs par défaut pour les propriétés d'un objet et que vous voulez pouvoir modifier ces valeurs au moment de l'exécution, vous devez définir les propriétés dans le prototype du constructeur, et non dans la fonction du constructeur elle-même. -<p>Dans ce cas, la propriété <code>name</code> de <code>amy</code> devient « Inconnu·e ».</p> +### Déterminer les relations entre les instances -<p>Comme le montrent ces exemples, si vous souhaitez définir des valeurs par défaut pour les propriétés d'un objet et que vous voulez pouvoir modifier ces valeurs au moment de l'exécution, vous devez définir les propriétés dans le prototype du constructeur, et non dans la fonction du constructeur elle-même.</p> +La recherche de propriétés en JavaScript s'effectue dans les propriétés propres d'un objet et, si le nom de la propriété n'est pas trouvé, elle s'effectue dans la propriété spéciale de l'objet `__proto__`. Cette opération se poursuit de manière récursive ; le processus est appelé « recherche dans la chaîne des prototypes ». -<h3 id="determining_instance_relationships">Déterminer les relations entre les instances</h3> +La propriété spéciale `__proto__` est définie lorsqu'un objet est construit ; elle prend la valeur de la propriété `prototype` du constructeur. Ainsi, l'expression `new Riri()` crée un objet avec `__proto__ == Riri.prototype`. Par conséquent, les modifications apportées aux propriétés de `Riri.prototype` modifient la recherche de propriétés pour tous les objets qui ont été créés par `new Riri()`. -<p>La recherche de propriétés en JavaScript s'effectue dans les propriétés propres d'un objet et, si le nom de la propriété n'est pas trouvé, elle s'effectue dans la propriété spéciale de l'objet <code>__proto__</code>. Cette opération se poursuit de manière récursive ; le processus est appelé « recherche dans la chaîne des prototypes ».</p> +Chaque objet a une propriété `__proto__` (sauf `Object`) ; chaque fonction a une propriété `prototype`. Les objets peuvent donc être liés par « héritage de prototype » à d'autres objets. Vous pouvez tester l'héritage en comparant le `__proto__` d'un objet avec l'objet `prototype` d'une fonction. JavaScript fournit un raccourci : l'opérateur `instanceof` teste un objet par rapport à une fonction et renvoie vrai si l'objet hérite du prototype de la fonction. Par exemple, -<p>La propriété spéciale <code>__proto__</code> est définie lorsqu'un objet est construit ; elle prend la valeur de la propriété <code>prototype</code> du constructeur. Ainsi, l'expression <code>new Riri()</code> crée un objet avec <code>__proto__ == Riri.prototype</code>. Par conséquent, les modifications apportées aux propriétés de <code>Riri.prototype</code> modifient la recherche de propriétés pour tous les objets qui ont été créés par <code>new Riri()</code>.</p> +```js +let f = new Riri(); +let isTrue = (f instanceof Riri); +``` -<p>Chaque objet a une propriété <code>__proto__</code> (sauf <code>Object</code>) ; chaque fonction a une propriété <code>prototype</code>. Les objets peuvent donc être liés par « héritage de prototype » à d'autres objets. Vous pouvez tester l'héritage en comparant le <code>__proto__</code> d'un objet avec l'objet <code>prototype</code> d'une fonction. JavaScript fournit un raccourci : l'opérateur <code>instanceof</code> teste un objet par rapport à une fonction et renvoie vrai si l'objet hérite du prototype de la fonction. Par exemple,</p> +Pour un exemple plus détaillé, supposons que vous ayez le même ensemble de définitions que celui présenté dans [Héritage des propriétés](#inheriting_properties). Créez un objet `Engineer` comme suit : -<pre class="brush: js">let f = new Riri(); -let isTrue = (f instanceof Riri);</pre> - -<p>Pour un exemple plus détaillé, supposons que vous ayez le même ensemble de définitions que celui présenté dans <a href="#inheriting_properties">Héritage des propriétés</a>. Créez un objet <code>Engineer</code> comme suit :</p> - -<pre class="brush: js">let chris = new Engineer('Chris Anthème', ['jsd'], 'fiji');</pre> +```js +let chris = new Engineer('Chris Anthème', ['jsd'], 'fiji'); +``` -<p>Avec cet objet, les affirmations suivantes sont toutes vraies :</p> +Avec cet objet, les affirmations suivantes sont toutes vraies : -<pre class="brush: js">chris.__proto__ == Engineer.prototype; +```js +chris.__proto__ == Engineer.prototype; chris.__proto__.__proto__ == WorkerBee.prototype; chris.__proto__.__proto__.__proto__ == Employee.prototype; chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype; -chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;</pre> +chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null; +``` -<p>Compte tenu de cela, vous pourriez écrire une fonction <code>instanceOf</code> comme suit :</p> +Compte tenu de cela, vous pourriez écrire une fonction `instanceOf` comme suit : -<pre class="brush: js">function instanceOf(object, constructor) { +```js +function instanceOf(object, constructor) { object = object.__proto__; while (object != null) { if (object == constructor.prototype) @@ -564,43 +641,51 @@ chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;</pre> object = object.__proto__; } return false; -}</pre> +} +``` -<div class="note"> - <p><strong>Note :</strong> L'implémentation ci-dessus vérifie le type de l'objet par rapport à « xml » afin de contourner une bizarrerie de la façon dont les objets XML sont représentés dans les versions récentes de JavaScript. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=634150">bug 634150</a> si vous voulez connaître les détails.</p> -</div> +> **Note :** L'implémentation ci-dessus vérifie le type de l'objet par rapport à « xml » afin de contourner une bizarrerie de la façon dont les objets XML sont représentés dans les versions récentes de JavaScript. Voir [bug 634150](https://bugzilla.mozilla.org/show_bug.cgi?id=634150) si vous voulez connaître les détails. -<p>En utilisant la fonction <code>instanceOf</code> définie ci-dessus, ces expressions sont vraies :</p> +En utilisant la fonction `instanceOf` définie ci-dessus, ces expressions sont vraies : -<pre class="brush: js">instanceOf(chris, Engineer) +```js +instanceOf(chris, Engineer) instanceOf(chris, WorkerBee) instanceOf(chris, Employee) -instanceOf(chris, Object)</pre> +instanceOf(chris, Object) +``` -<p>Mais l'expression suivante est fausse :</p> +Mais l'expression suivante est fausse : -<pre class="brush: js">instanceOf(chris, SalesPerson)</pre> +```js +instanceOf(chris, SalesPerson) +``` -<h3 id="global_information_in_constructors">Les informations globales dans les constructeurs</h3> +### Les informations globales dans les constructeurs -<p>Lorsque vous créez des constructeurs, vous devez faire attention si vous définissez des informations globales dans le constructeur. Par exemple, supposons que vous souhaitez qu'un identifiant unique soit automatiquement attribué à chaque nouvel employé. Vous pourriez utiliser la définition suivante pour <code>Employee</code> :</p> +Lorsque vous créez des constructeurs, vous devez faire attention si vous définissez des informations globales dans le constructeur. Par exemple, supposons que vous souhaitez qu'un identifiant unique soit automatiquement attribué à chaque nouvel employé. Vous pourriez utiliser la définition suivante pour `Employee` : -<pre class="brush: js">let idCounter = 1; // On définit un compteur d'identifiant +```js +let idCounter = 1; // On définit un compteur d'identifiant function Employee(name, dept) { this.name = name || ''; this.dept = dept || 'général'; this.id = idCounter++; // On assigne la valeur et on incrémente le compteur -}</pre> +} +``` -<p>Avec cette définition, lorsque vous créez un nouvel <code>Employee</code>, le constructeur lui attribue l'ID suivant dans la séquence, puis incrémente le compteur d'ID global. Ainsi, si votre déclaration est la suivante, <code>victoria.id</code> vaut 1 et <code>harry.id</code> vaut 2 :</p> +Avec cette définition, lorsque vous créez un nouvel `Employee`, le constructeur lui attribue l'ID suivant dans la séquence, puis incrémente le compteur d'ID global. Ainsi, si votre déclaration est la suivante, `victoria.id` vaut 1 et `harry.id` vaut 2 : -<pre class="brush: js">let victoria = new Employee('Victoria Lamar', 'pubs'); -let harry = new Employee('Harry Stocrate', 'ventes');</pre> +```js +let victoria = new Employee('Victoria Lamar', 'pubs'); +let harry = new Employee('Harry Stocrate', 'ventes'); +``` -<p>À première vue, cela semble correct. Cependant, <code>idCounter</code> est incrémenté à chaque fois qu'un objet <code>Employee</code> est créé, pour quelque raison que ce soit. Si vous créez toute la hiérarchie <code>Employee</code> présentée dans ce chapitre, le constructeur <code>Employee</code> est appelé chaque fois que vous mettez en place un prototype. Supposons que vous ayez le code suivant :</p> +À première vue, cela semble correct. Cependant, `idCounter` est incrémenté à chaque fois qu'un objet `Employee` est créé, pour quelque raison que ce soit. Si vous créez toute la hiérarchie `Employee` présentée dans ce chapitre, le constructeur `Employee` est appelé chaque fois que vous mettez en place un prototype. Supposons que vous ayez le code suivant : -<pre class="brush: js">let idCounter = 1; +```js +let idCounter = 1; function Employee(name, dept) { this.name = name || ''; @@ -620,13 +705,15 @@ Engineer.prototype = new WorkerBee; function SalesPerson(name, projs, quota) {...} SalesPerson.prototype = new WorkerBee; -let mac = new Engineer('Mac Fly');</pre> +let mac = new Engineer('Mac Fly'); +``` -<p>Supposons en outre que les définitions omises ici possèdent la propriété <code>base</code> et appellent le constructeur situé au-dessus d'elles dans la chaîne des prototypes. Dans ce cas, au moment où l'objet <code>mac</code> est créé, <code>mac.id</code> est 5.</p> +Supposons en outre que les définitions omises ici possèdent la propriété `base` et appellent le constructeur situé au-dessus d'elles dans la chaîne des prototypes. Dans ce cas, au moment où l'objet `mac` est créé, `mac.id` est 5. -<p>Selon l'application, il peut être important ou non que le compteur ait été incrémenté ces fois supplémentaires. Si vous vous souciez de la valeur exacte de ce compteur, une solution possible consiste à utiliser plutôt le constructeur suivant :</p> +Selon l'application, il peut être important ou non que le compteur ait été incrémenté ces fois supplémentaires. Si vous vous souciez de la valeur exacte de ce compteur, une solution possible consiste à utiliser plutôt le constructeur suivant : -<pre class="brush: js">function Employee(name, dept) { +```js +function Employee(name, dept) { this.name = name || ''; this.dept = dept || 'general'; // Ceci est une écriture raccourcie de l'opérateur if @@ -635,24 +722,27 @@ let mac = new Engineer('Mac Fly');</pre> this.id = idCounter++; } } -</pre> +``` -<p>Lorsque vous créez une instance de <code>Employee</code> pour l'utiliser comme prototype, vous ne fournissez pas d'arguments au constructeur. En utilisant cette définition du constructeur, lorsque vous ne fournissez pas d'arguments, le constructeur n'attribue pas de valeur à l'id et ne met pas à jour le compteur. Par conséquent, pour qu'un <code>Employee</code> obtienne un id, vous devez spécifier un nom pour l'employé. Dans cet exemple, <code>mac.id</code> serait 1.</p> +Lorsque vous créez une instance de `Employee` pour l'utiliser comme prototype, vous ne fournissez pas d'arguments au constructeur. En utilisant cette définition du constructeur, lorsque vous ne fournissez pas d'arguments, le constructeur n'attribue pas de valeur à l'id et ne met pas à jour le compteur. Par conséquent, pour qu'un `Employee` obtienne un id, vous devez spécifier un nom pour l'employé. Dans cet exemple, `mac.id` serait 1. -<p>Vous pouvez également créer une copie de l'objet prototype de l'employé pour l'affecter à WorkerBee :</p> +Vous pouvez également créer une copie de l'objet prototype de l'employé pour l'affecter à WorkerBee : -<pre class="brush: js">WorkerBee.prototype = Object.create(Employee.prototype); -// au lieu de WorkerBee.prototype = new Employee</pre> +```js +WorkerBee.prototype = Object.create(Employee.prototype); +// au lieu de WorkerBee.prototype = new Employee +``` -<h3 id="no_multiple_inheritance">Pas d'héritage multiple</h3> +### Pas d'héritage multiple -<p>Certains langages orientés objets permettent l'héritage multiple. C'est-à-dire qu'un objet peut hériter des propriétés et des valeurs d'objets parents non apparentés. JavaScript ne prend pas en charge l'héritage multiple.</p> +Certains langages orientés objets permettent l'héritage multiple. C'est-à-dire qu'un objet peut hériter des propriétés et des valeurs d'objets parents non apparentés. JavaScript ne prend pas en charge l'héritage multiple. -<p>L'héritage des valeurs des propriétés se produit au moment de l'exécution, lorsque JavaScript recherche une valeur dans la chaîne de prototypes d'un objet. Comme un objet n'a qu'un seul prototype associé, JavaScript ne peut pas hériter dynamiquement de plus d'une chaîne de prototypes.</p> +L'héritage des valeurs des propriétés se produit au moment de l'exécution, lorsque JavaScript recherche une valeur dans la chaîne de prototypes d'un objet. Comme un objet n'a qu'un seul prototype associé, JavaScript ne peut pas hériter dynamiquement de plus d'une chaîne de prototypes. -<p>En JavaScript, vous pouvez faire en sorte qu'une fonction de construction appelle plusieurs autres fonctions de construction en son sein. Cela donne l'illusion d'un héritage multiple. Par exemple, considérez les déclarations suivantes :</p> +En JavaScript, vous pouvez faire en sorte qu'une fonction de construction appelle plusieurs autres fonctions de construction en son sein. Cela donne l'illusion d'un héritage multiple. Par exemple, considérez les déclarations suivantes : -<pre class="brush: js">function Hobbyist(hobby) { +```js +function Hobbyist(hobby) { this.hobby = hobby || 'plongée'; } @@ -666,20 +756,24 @@ function Engineer(name, projs, mach, hobby) { Engineer.prototype = new WorkerBee; let dennis = new Engineer('Dennis Ah', ['collaborateur'], 'hugo'); -</pre> +``` -<p>Supposons en outre que la définition de <code>WorkerBee</code> soit celle utilisée précédemment dans ce chapitre. Dans ce cas, l'objet <code>dennis</code> possède ces propriétés :</p> +Supposons en outre que la définition de `WorkerBee` soit celle utilisée précédemment dans ce chapitre. Dans ce cas, l'objet `dennis` possède ces propriétés : -<pre class="brush: js">dennis.name == 'Dennis Ah'; +```js +dennis.name == 'Dennis Ah'; dennis.dept == 'ingénierie'; dennis.projects == ['collaborateur']; dennis.machine == 'hugo'; -dennis.hobby == 'plongée';</pre> +dennis.hobby == 'plongée'; +``` -<p>Donc <code>dennis</code> obtient bien la propriété <code>hobby</code> du constructeur <code>Hobbyist</code>. Cependant, supposons que vous ajoutez ensuite une propriété au prototype du constructeur <code>Hobbyist</code> :</p> +Donc `dennis` obtient bien la propriété `hobby` du constructeur `Hobbyist`. Cependant, supposons que vous ajoutez ensuite une propriété au prototype du constructeur `Hobbyist` : -<pre class="brush: js">Hobbyist.prototype.equipment = ['masque', 'palmes', 'régulateur', 'bcd'];</pre> +```js +Hobbyist.prototype.equipment = ['masque', 'palmes', 'régulateur', 'bcd']; +``` -<p>L'objet <code>dennis</code> n'héritera pas de cette nouvelle propriété.</p> +L'objet `dennis` n'héritera pas de cette nouvelle propriété. -<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div> +{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}} diff --git a/files/fr/web/javascript/guide/expressions_and_operators/index.md b/files/fr/web/javascript/guide/expressions_and_operators/index.md index d9837ef8e4..531199cc8a 100644 --- a/files/fr/web/javascript/guide/expressions_and_operators/index.md +++ b/files/fr/web/javascript/guide/expressions_and_operators/index.md @@ -10,135 +10,71 @@ tags: translation_of: Web/JavaScript/Guide/Expressions_and_Operators original_slug: Web/JavaScript/Guide/Expressions_et_Opérateurs --- -<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}}</p> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}} -<p>Ce chapitre décrit les expressions et les opérateurs en JavaScript, il inclut des notions sur les opérateurs d'affectation, de comparaison, les opérateurs arithmétiques, binaires, logiques, ceux qui s'appliquent sur les chaînes de caractères ainsi que les opérateurs spéciaux.</p> +Ce chapitre décrit les expressions et les opérateurs en JavaScript, il inclut des notions sur les opérateurs d'affectation, de comparaison, les opérateurs arithmétiques, binaires, logiques, ceux qui s'appliquent sur les chaînes de caractères ainsi que les opérateurs spéciaux. -<p>Une liste complète et détaillée des opérateurs JavaScript est disponible dans <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs">la référence JavaScript</a>.</p> +Une liste complète et détaillée des opérateurs JavaScript est disponible dans [la référence JavaScript](/fr/docs/Web/JavaScript/Reference/Opérateurs). -<h2 id="Opérateurs">Opérateurs</h2> +## Opérateurs -<p>JavaScript possède différents types d'opérateurs. Cette section décrit les opérateurs et certaines informations sur les priorités entre opérateurs.</p> +JavaScript possède différents types d'opérateurs. Cette section décrit les opérateurs et certaines informations sur les priorités entre opérateurs. -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_d'affectation">Les opérateurs d'affectation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_de_comparaison">Les opérateurs de comparaison</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_arithmétiques">Les opérateurs arithmétiques</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_binaires">Les opérateurs binaires</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_logiques">Les opérateurs logiques</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_de_chaînes_de_caractères">Les opérateurs de chaînes</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateur_conditionnel_ternaire">L'opérateur (ternaire) conditionnel</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#La_virgule_comme_opérateur">L'opérateur virgule</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_unaires">Les opérateurs unaires</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_relationnels">Les opérateurs relationnels</a></li> -</ul> +- [Les opérateurs d'affectation](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_d'affectation) +- [Les opérateurs de comparaison](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_de_comparaison) +- [Les opérateurs arithmétiques](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_arithmétiques) +- [Les opérateurs binaires](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_binaires) +- [Les opérateurs logiques](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_logiques) +- [Les opérateurs de chaînes](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_de_chaînes_de_caractères) +- [L'opérateur (ternaire) conditionnel](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateur_conditionnel_ternaire) +- [L'opérateur virgule](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#La_virgule_comme_opérateur) +- [Les opérateurs unaires](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_unaires) +- [Les opérateurs relationnels](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_relationnels) -<p>JavaScript utilise des opérateurs <em>binaires</em> et <em>unaires</em>, ainsi qu'un opérateur ternaire spécial (l'opérateur conditionnel). Un opérateur binaire utilise deux opérandes, un précédant l'opérateur et un lui succédant :</p> +JavaScript utilise des opérateurs _binaires_ et _unaires_, ainsi qu'un opérateur ternaire spécial (l'opérateur conditionnel). Un opérateur binaire utilise deux opérandes, un précédant l'opérateur et un lui succédant : -<pre class="syntaxbox"><em>opérande1</em> <em>opérateur</em> <em>opérande2</em> -</pre> + opérande1 opérateur opérande2 -<p>Par exemple : « <code>3+4</code> » ou « <code>x*y</code> ».</p> +Par exemple : « `3+4` » ou « `x*y` ». -<p>Un opérateur unaire ne nécessite qu'un opérande, avant ou après l'opérateur :</p> +Un opérateur unaire ne nécessite qu'un opérande, avant ou après l'opérateur : -<pre class="syntaxbox"><em>opérateur</em> <em>opérand</em>e</pre> + opérateur opérande -<p>ou</p> +ou -<pre class="syntaxbox"><em>opérande</em> <em>opérateur</em></pre> + opérande opérateur -<p>Comme « <code>x++</code> » ou « <code>++x</code> ».</p> +Comme « `x++` » ou « `++x` ». -<h3 id="Opérateurs_daffectation">Opérateurs d'affectation</h3> +### Opérateurs d'affectation -<p>Un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">opérateur d'affectation</a> assigne une valeur à son opérande gauche, valeur basée sur celle de l'opérande droit. L'opérateur d'affectation simple est le signe égal (=), il assigne la valeur de l'opérande droit à l'opérande gauche. Autrement dit, avec « x = y » on affecte la valeur y à x.</p> +Un [opérateur d'affectation](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation) assigne une valeur à son opérande gauche, valeur basée sur celle de l'opérande droit. L'opérateur d'affectation simple est le signe égal (=), il assigne la valeur de l'opérande droit à l'opérande gauche. Autrement dit, avec « x = y » on affecte la valeur y à x. -<p>D'autres opérateurs d'affectation sont des raccourcis correspondant à certaines opérations composées, ils sont énumérés dans le tableau qui suit :</p> +D'autres opérateurs d'affectation sont des raccourcis correspondant à certaines opérations composées, ils sont énumérés dans le tableau qui suit : -<table class="standard-table"> - <caption>Opérateurs d'affectation</caption> - <thead> - <tr> - <th scope="col">Nom</th> - <th scope="col">Opérateur composé</th> - <th scope="col">Signification</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation">Affectation</a></td> - <td><code>x = y</code></td> - <td><code>x = y</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_addition">Affectation après addition</a></td> - <td><code>x += y</code></td> - <td><code>x = x + y</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_soustraction">Affectation après soustraction</a></td> - <td><code>x -= y</code></td> - <td><code>x = x - y</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_multiplication">Affectation après multiplication</a></td> - <td><code>x *= y</code></td> - <td><code>x = x * y</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_division">Affectation après division</a></td> - <td><code>x /= y</code></td> - <td><code>x = x / y</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_du_reste">Affectation du reste</a></td> - <td><code>x %= y</code></td> - <td><code>x = x % y</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_exponentiation">Affectation après exponentiation</a>{{experimental_inline}}</td> - <td><code>x **=y</code></td> - <td><code>x = x ** y</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_gauche">Affectation après décalage à gauche</a></td> - <td><code>x <<= y</code></td> - <td><code>x = x << y</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_droite">Affectation après décalage à droite</a></td> - <td><code>x >>= y</code></td> - <td><code>x = x >> y</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_droite_non-signé">Affectation après décalage à droite non signé</a></td> - <td><code>x >>>= y</code></td> - <td><code>x = x >>> y</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_ET_binaire">Affectation après ET binaire</a></td> - <td><code>x &= y</code></td> - <td><code>x = x & y</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_OU_exclusif_(XOR)_binaire">Affectation après OU exclusif binaire</a></td> - <td><code>x ^= y</code></td> - <td><code>x = x ^ y</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_OU_binaire">Affectation après OU binaire</a></td> - <td><code>x |= y</code></td> - <td><code>x = x | y</code></td> - </tr> - </tbody> -</table> +| Nom | Opérateur composé | Signification | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------- | +| [Affectation](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation) | `x = y` | `x = y` | +| [Affectation après addition](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_addition) | `x += y` | `x = x + y` | +| [Affectation après soustraction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_soustraction) | `x -= y` | `x = x - y` | +| [Affectation après multiplication](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_multiplication) | `x *= y` | `x = x * y` | +| [Affectation après division](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_division) | `x /= y` | `x = x / y` | +| [Affectation du reste](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_du_reste) | `x %= y` | `x = x % y` | +| [Affectation après exponentiation](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_exponentiation){{experimental_inline}} | `x **=y` | `x = x ** y` | +| [Affectation après décalage à gauche](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_gauche) | `x <<= y` | `x = x << y` | +| [Affectation après décalage à droite](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_droite) | `x >>= y` | `x = x >> y` | +| [Affectation après décalage à droite non signé](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_droite_non-signé) | `x >>>= y` | `x = x >>> y` | +| [Affectation après ET binaire](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_ET_binaire) | `x &= y` | `x = x & y` | +| [Affectation après OU exclusif binaire](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_OU_exclusif_(XOR)_binaire>) | `x ^= y` | `x = x ^ y` | +| [Affectation après OU binaire](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_OU_binaire) | `x \|= y` | `x = x \| y` | -<h4 id="Décomposition">Décomposition</h4> +#### Décomposition -<p>Lors d'affectations plus complexes, on peut utiliser <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">l'affectation par décomposition</a>. C'est une expression qui permet d'extraire des données depuis des tableaux ou des objets avec une syntaxe symétrique de littéraux de tableaux ou d'objets pour affecter des variables.</p> +Lors d'affectations plus complexes, on peut utiliser [l'affectation par décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition). C'est une expression qui permet d'extraire des données depuis des tableaux ou des objets avec une syntaxe symétrique de littéraux de tableaux ou d'objets pour affecter des variables. -<pre class="brush: js">var toto = ["un", "deux", "trois"]; +```js +var toto = ["un", "deux", "trois"]; // sans décomposition var un = toto[0]; @@ -146,422 +82,578 @@ var deux = toto[1]; var trois = toto[2]; // avec la décomposition -var [un, deux, trois] = toto;</pre> +var [un, deux, trois] = toto; +``` -<h3 id="Opérateurs_de_comparaison">Opérateurs de comparaison</h3> +### Opérateurs de comparaison -<p>Un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">opérateur de comparaison</a> compare ses deux opérandes et renvoie un valeur booléenne correspondant au résultat de la comparaison (vraie ou fausse). Les opérandes peuvent être des nombres, des chaînes de caractères, des booléens ou des objets. Les chaînes de caractères sont comparées selon l'ordre lexicographique usuel en utilisant les valeurs Unicode. Dans la plupart des cas, si les deux opérandes ne sont pas du même type, JavaScript tentera de les convertir vers un type approprié. Cette méthode aboutira souvent à une comparaison numérique. Les seules exceptions à cette conversion implicite sont les opérateurs <code>===</code> et <code>!==</code> , qui testent des égalités et inégalités strictes. Ces opérateurs n'effectuent pas de conversion de type. Le tableau qui suit décrit les opérateurs de comparaisons relativement à ce fragment de code :</p> +Un [opérateur de comparaison](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison) compare ses deux opérandes et renvoie un valeur booléenne correspondant au résultat de la comparaison (vraie ou fausse). Les opérandes peuvent être des nombres, des chaînes de caractères, des booléens ou des objets. Les chaînes de caractères sont comparées selon l'ordre lexicographique usuel en utilisant les valeurs Unicode. Dans la plupart des cas, si les deux opérandes ne sont pas du même type, JavaScript tentera de les convertir vers un type approprié. Cette méthode aboutira souvent à une comparaison numérique. Les seules exceptions à cette conversion implicite sont les opérateurs `===` et `!==` , qui testent des égalités et inégalités strictes. Ces opérateurs n'effectuent pas de conversion de type. Le tableau qui suit décrit les opérateurs de comparaisons relativement à ce fragment de code : -<pre class="brush: js">var var1 = 3; +```js +var var1 = 3; var var2 = 4; -</pre> +``` <table class="standard-table"> - <caption>Opérateurs de comparaison</caption> - <thead> - <tr> - <th scope="col">Opérateur</th> - <th scope="col">Description</th> - <th scope="col">Exemples qui renvoient <code>true</code></th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)">Égalité</a> (<code>==</code>)</td> - <td>Renvoie <code>true</code> si les opérandes sont égaux après conversion en valeurs de mêmes types.</td> - <td><code>3 == var1</code> - <p><code>"3" == var1</code></p> - <code>3 == '3'</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#In.C3.A9galit.C3.A9_simple_(!.3D)">Inégalité</a> (<code>!=</code>)</td> - <td>Renvoie <code>true</code> si les opérandes sont différents.</td> - <td><code>var1 != 4<br> - var2 != "3"</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">Égalité stricte </a>(<code>===</code>)</td> - <td>Renvoie <code>true</code> si les opérandes sont égaux et de même type. Voir {{jsxref("Object.is","Object.is()")}} et <a href="/fr/docs/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">égalité de type en JavaScript</a>.</td> - <td><code>3 === var1</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#In.C3.A9galit.C3.A9_stricte_(!.3D.3D)">Inégalité stricte</a> (<code>!==</code>)</td> - <td>Renvoie <code>true</code> si les opérandes ne sont pas égaux ou s'ils ne sont pas de même type.</td> - <td><code>var1 !== "3"<br> - 3 !== '3'</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Sup.C3.A9rieur_strict_(%3E)">Supériorité stricte</a> (<code>></code>)</td> - <td>Renvoie <code>true</code> si l'opérande gauche est supérieur (strictement) à l'opérande droit.</td> - <td><code>var2 > var1<br> - "12" > 2</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Sup.C3.A9rieur_ou_.C3.A9gal_(%3E.3D)">Supériorité ou égalité</a> (<code>>=</code>)</td> - <td>Renvoie <code>true</code> si l'opérande gauche est supérieur ou égal à l'opérande droit.</td> - <td><code>var2 >= var1<br> - var1 >= 3</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Inf.C3.A9rieur_strict_(%3C)">Infériorité stricte</a> (<code><</code>)</td> - <td>Renvoie <code>true</code> si l'opérande gauche est inférieur (strictement) à l'opérande droit.</td> - <td><code>var1 < var2<br> - "2" < "12"</code></td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(%3C.3D)">Infériorité ou égalité</a> (<code><=</code>)</td> - <td>Renvoie <code>true</code> si l'opérande gauche est inférieur ou égal à l'opérande droit.</td> - <td><code>var1 <= var2<br> - var2 <= 5</code></td> - </tr> - </tbody> + <caption> + Opérateurs de comparaison + </caption> + <thead> + <tr> + <th scope="col">Opérateur</th> + <th scope="col">Description</th> + <th scope="col">Exemples qui renvoient <code>true</code></th> + </tr> + </thead> + <tbody> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)" + >Égalité</a + > + (<code>==</code>) + </td> + <td> + Renvoie <code>true</code> si les opérandes sont égaux après conversion + en valeurs de mêmes types. + </td> + <td> + <code>3 == var1</code> + <p><code>"3" == var1</code></p> + <code>3 == '3'</code> + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#In.C3.A9galit.C3.A9_simple_(!.3D)" + >Inégalité</a + > + (<code>!=</code>) + </td> + <td>Renvoie <code>true</code> si les opérandes sont différents.</td> + <td> + <code>var1 != 4<br />var2 != "3"</code> + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)" + >Égalité stricte </a + >(<code>===</code>) + </td> + <td> + Renvoie <code>true</code> si les opérandes sont égaux et de même type. + Voir {{jsxref("Object.is","Object.is()")}} et + <a href="/fr/docs/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript" + >égalité de type en JavaScript</a + >. + </td> + <td><code>3 === var1</code></td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#In.C3.A9galit.C3.A9_stricte_(!.3D.3D)" + >Inégalité stricte</a + > + (<code>!==</code>) + </td> + <td> + Renvoie <code>true</code> si les opérandes ne sont pas égaux ou s'ils ne + sont pas de même type. + </td> + <td> + <code>var1 !== "3"<br />3 !== '3'</code> + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Sup.C3.A9rieur_strict_(%3E)" + >Supériorité stricte</a + > + (<code>></code>) + </td> + <td> + Renvoie <code>true</code> si l'opérande gauche est supérieur + (strictement) à l'opérande droit. + </td> + <td> + <code>var2 > var1<br />"12" > 2</code> + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Sup.C3.A9rieur_ou_.C3.A9gal_(%3E.3D)" + >Supériorité ou égalité</a + > + (<code>>=</code>) + </td> + <td> + Renvoie <code>true</code> si l'opérande gauche est supérieur ou égal à + l'opérande droit. + </td> + <td> + <code>var2 >= var1<br />var1 >= 3</code> + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Inf.C3.A9rieur_strict_(%3C)" + >Infériorité stricte</a + > + (<code><</code>) + </td> + <td> + Renvoie <code>true</code> si l'opérande gauche est inférieur + (strictement) à l'opérande droit. + </td> + <td> + <code>var1 < var2<br />"2" < "12"</code> + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(%3C.3D)" + >Infériorité ou égalité</a + > + (<code><=</code>) + </td> + <td> + Renvoie <code>true</code> si l'opérande gauche est inférieur ou égal à + l'opérande droit. + </td> + <td> + <code>var1 <= var2<br />var2 <= 5</code> + </td> + </tr> + </tbody> </table> -<div class="note"> -<p><strong>Note :</strong> <code>=></code> n'est pas un opérateur. Il s'agit de la notation utilisée pour <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a>.</p> -</div> +> **Note :** `=>` n'est pas un opérateur. Il s'agit de la notation utilisée pour [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es). -<h3 id="Opérateurs_arithmétiques">Opérateurs arithmétiques</h3> +### Opérateurs arithmétiques -<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques">opérateurs arithmétiques</a> ont pour opérandes des valeurs numériques (des littéraux ou des variables) et renvoient une valeur numérique. Les opérateurs arithmétiques standards sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/). Ces opérateurs fonctionnent comme pour la plupart des langages de programmation lorsqu'ils sont utilisés avec des nombres décimaux (on notera que la division par zéro a pour résultat {{jsxref("Infinity")}}). Ainsi :</p> +Les [opérateurs arithmétiques](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques) ont pour opérandes des valeurs numériques (des littéraux ou des variables) et renvoient une valeur numérique. Les opérateurs arithmétiques standards sont l'addition (+), la soustraction (-), la multiplication (\*), et la division (/). Ces opérateurs fonctionnent comme pour la plupart des langages de programmation lorsqu'ils sont utilisés avec des nombres décimaux (on notera que la division par zéro a pour résultat {{jsxref("Infinity")}}). Ainsi : -<pre class="brush: js">1 / 2; // 0.5 +```js +1 / 2; // 0.5 1 / 2 == 1.0 / 2.0; // true -</pre> +``` -<p>En plus des opérations arithmétiques standards (+,-,*,/), JavaScript fournit également d'autres opérateurs arithmétiques, listés dans le tableau qui suit :</p> +En plus des opérations arithmétiques standards (+,-,\*,/), JavaScript fournit également d'autres opérateurs arithmétiques, listés dans le tableau qui suit : <table class="fullwidth-table"> - <caption>Opérateurs arithmétiques</caption> - <thead> - <tr> - <th scope="col">Opérateur</th> - <th scope="col">Description</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Reste_(.25)">Reste</a> (<code>%</code>)<br> - </td> - <td>Opérateur binaire. Renvoie le reste entier de la division entre les deux opérandes.</td> - <td>12 % 5 renvoie 2.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Incr.C3.A9ment_(.2B.2B)">Incrément</a> (<code>++</code>)</td> - <td>Opérateur unaire. Ajoute un à son opérande. S'il est utilisé en préfixe (<code>++x</code>), il renvoie la valeur de l'opérande après avoir ajouté un, s'il est utilisé comme opérateur de suffixe (<code>x++</code>), il renvoie la valeur de l'opérande avant d'ajouter un.</td> - <td>Si <code>x</code> vaut 3, <code>++x</code> incrémente <code>x</code> à 4 et renvoie 4, <code>x++</code> renvoie 3 et seulement ensuite ajoute un à <code>x</code>.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#D.C3.A9cr.C3.A9ment_(--)">Décrément</a> (<code>--</code>)</td> - <td>Opérateur unaire. Il soustrait un à son opérande. Il fonctionne de manière analogue à l'opérateur d'incrément.</td> - <td>Si <code>x</code> vaut 3, <code>--x</code> décrémente <code>x</code> à 2 puis renvoie2, <code>x--</code> renvoie 3 puis décrémente la valeur de <code>x</code>.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#N.C3.A9gation_unaire_(-)">Négation unaire</a> (<code>-</code>)</td> - <td>Opérateur unaire. Renvoie la valeur opposée de l'opérande.</td> - <td>Si <code>x</code> vaut 3, alors <code>-x</code> renvoie -3.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Plus_unaire_(.2B)">Plus unaire </a>(<code>+</code>)</td> - <td>Opérateur unaire. Si l'opérande n'est pas un nombre, il tente de le convertir en une valeur numérique.</td> - <td> - <p><code>+"3"</code> renvoie <code>3</code>.</p> - - <p><code>+true</code> renvoie <code>1</code>.</p> - </td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Exponentiation">Opérateur d'exponentiation</a> (**) (puissance) {{experimental_inline}}</td> - <td>Calcule un nombre (base) élevé à une puissance donnée (soit <code>base^puissance</code>)</td> - <td> - <p><code>2 ** 3</code> renvoie <code>8</code></p> - - <p><code>10 ** -1</code> renvoie <code>0.1</code></p> - </td> - </tr> - </tbody> + <caption> + Opérateurs arithmétiques + </caption> + <thead> + <tr> + <th scope="col">Opérateur</th> + <th scope="col">Description</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Reste_(.25)" + >Reste</a + > + (<code>%</code>)<br /> + </td> + <td> + Opérateur binaire. Renvoie le reste entier de la division entre les deux + opérandes. + </td> + <td>12 % 5 renvoie 2.</td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Incr.C3.A9ment_(.2B.2B)" + >Incrément</a + > + (<code>++</code>) + </td> + <td> + Opérateur unaire. Ajoute un à son opérande. S'il est utilisé en préfixe + (<code>++x</code>), il renvoie la valeur de l'opérande après avoir + ajouté un, s'il est utilisé comme opérateur de suffixe + (<code>x++</code>), il renvoie la valeur de l'opérande avant d'ajouter + un. + </td> + <td> + Si <code>x</code> vaut 3, <code>++x</code> incrémente <code>x</code> à 4 + et renvoie 4, <code>x++</code> renvoie 3 et seulement ensuite ajoute un + à <code>x</code>. + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#D.C3.A9cr.C3.A9ment_(--)" + >Décrément</a + > + (<code>--</code>) + </td> + <td> + Opérateur unaire. Il soustrait un à son opérande. Il fonctionne de + manière analogue à l'opérateur d'incrément. + </td> + <td> + Si <code>x</code> vaut 3, <code>--x</code> décrémente <code>x</code> à 2 + puis renvoie2, <code>x--</code> renvoie 3 puis décrémente la valeur de + <code>x</code>. + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#N.C3.A9gation_unaire_(-)" + >Négation unaire</a + > + (<code>-</code>) + </td> + <td>Opérateur unaire. Renvoie la valeur opposée de l'opérande.</td> + <td>Si <code>x</code> vaut 3, alors <code>-x</code> renvoie -3.</td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Plus_unaire_(.2B)" + >Plus unaire </a + >(<code>+</code>) + </td> + <td> + Opérateur unaire. Si l'opérande n'est pas un nombre, il tente de le + convertir en une valeur numérique. + </td> + <td> + <p><code>+"3"</code> renvoie <code>3</code>.</p> + <p><code>+true</code> renvoie <code>1</code>.</p> + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Exponentiation" + >Opérateur d'exponentiation</a + > + (**) (puissance) {{experimental_inline}} + </td> + <td> + Calcule un nombre (base) élevé à une puissance donnée (soit + <code>base^puissance</code>) + </td> + <td> + <p><code>2 ** 3</code> renvoie <code>8</code></p> + <p><code>10 ** -1</code> renvoie <code>0.1</code></p> + </td> + </tr> + </tbody> </table> -<h3 id="Opérateurs_binaires">Opérateurs binaires</h3> +### Opérateurs binaires -<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">opérateurs binaires</a> voient leurs opérandes comme des ensembles de 32 bits (des zéros et des uns), et non pas comme des nombres décimaux, octaux ou hexadécimaux. Ainsi, le nombre décimal neuf aura une représentation binaire de 1001. Les opérateurs binaires effectuent des opérations sur des représentations binaires mais renvoies des valeurs numériques JavaScript standards.</p> +Les [opérateurs binaires](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires) voient leurs opérandes comme des ensembles de 32 bits (des zéros et des uns), et non pas comme des nombres décimaux, octaux ou hexadécimaux. Ainsi, le nombre décimal neuf aura une représentation binaire de 1001. Les opérateurs binaires effectuent des opérations sur des représentations binaires mais renvoies des valeurs numériques JavaScript standards. -<p>Le tableau qui suit résume les opérateurs binaires JavaScript :</p> +Le tableau qui suit résume les opérateurs binaires JavaScript : -<table class="standard-table"> - <caption>Opérateurs binaires</caption> - <thead> - <tr> - <th scope="col">Opérateur</th> - <th scope="col">Utilisation</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#&_.28ET_binaire.29">AND (ET) binaire</a></td> - <td><code>a & b</code></td> - <td>Renvoie un 1 à chaque position binaire pour laquelle les bits des deux opérandes sont à 1.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#|_.28OU_binaire.29">OR (OU) binaire</a></td> - <td><code>a | b</code></td> - <td>Renvoie un zéro à chaque position binaire pour laquelle les bits des deux opérandes sont à 0.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.5E_.28XOR_binaire.29">XOR (OU exclusif) binaire</a></td> - <td><code>a ^ b</code></td> - <td>Renvoie un zéro à chaque position binaire pour laquelle les bits sont les mêmes (et un 1 pour chacun des bits qui est différent).</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.7E_.28NON_binaire.29">NOT (NON) binaire</a></td> - <td><code>~ a</code></td> - <td>Inverse les bits de l'opérande.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29">Décalage binaire à gauche</a></td> - <td><code>a << b</code></td> - <td>Décale la représentation binaire de <code>b</code> bits sur la gauche et complète avec des zéros à droite.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29">Décalage binaire à droite</a></td> - <td><code>a >> b</code></td> - <td>Décale la représentation binaire de <code>b</code> bits sur la droite en ignorant les bits perdus.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29">Décalage binaire à droite en complétant avec des zéros</a></td> - <td><code>a >>> b</code></td> - <td>Décale la représentation binaire de <code>b</code> bits sur la droite en ignorant les bits perdus et ajoute des zéros sur la gauche.</td> - </tr> - </tbody> -</table> +| Opérateur | Utilisation | Description | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | +| [AND (ET) binaire](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#&_.28ET_binaire.29) | `a & b` | Renvoie un 1 à chaque position binaire pour laquelle les bits des deux opérandes sont à 1. | +| [OR (OU) binaire](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#|_.28OU_binaire.29) | `a \| b` | Renvoie un zéro à chaque position binaire pour laquelle les bits des deux opérandes sont à 0. | +| [XOR (OU exclusif) binaire](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.5E_.28XOR_binaire.29) | `a ^ b` | Renvoie un zéro à chaque position binaire pour laquelle les bits sont les mêmes (et un 1 pour chacun des bits qui est différent). | +| [NOT (NON) binaire](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.7E_.28NON_binaire.29) | `~ a` | Inverse les bits de l'opérande. | +| [Décalage binaire à gauche](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29) | `a << b` | Décale la représentation binaire de `b` bits sur la gauche et complète avec des zéros à droite. | +| [Décalage binaire à droite](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29) | `a >> b` | Décale la représentation binaire de `b` bits sur la droite en ignorant les bits perdus. | +| [Décalage binaire à droite en complétant avec des zéros](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29) | `a >>> b` | Décale la représentation binaire de `b` bits sur la droite en ignorant les bits perdus et ajoute des zéros sur la gauche. | -<h4 id="Opérateurs_binaires_logiques">Opérateurs binaires logiques</h4> +#### Opérateurs binaires logiques -<p>Les opérateurs binaires logiques fonctionnent de cette façon :</p> +Les opérateurs binaires logiques fonctionnent de cette façon : -<ul> - <li>Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés : - <pre class="brush: js">Avant : 11100110111110100000000000000110000000000001 -Après : 10100000000000000110000000000001</pre> - </li> - <li>Chaque bit du premier opérande est associé avec le bit correspondant du second opérande (le premier bit du premier opérande avec le premier bit du second opérande, le second avec le second et ainsi de suite)</li> - <li>L'opérateur est appliqué pour chaque paire de bits ainsi constituée et le résultat est reconstruit sous forme binaire.</li> -</ul> +- Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés : -<p>Le chiffre neuf est par exemple représenté comme 1001, et le nombre quinze comme 1111. Ainsi, quand les opérateurs binaires sont appliqués sur ces valeurs, on a les résultats qui suivent :</p> + ```js + Avant : 11100110111110100000000000000110000000000001 + Après : 10100000000000000110000000000001 + ``` -<table class="standard-table"> - <caption>Exemples utilisant les opérateurs binaires</caption> - <thead> - <tr> - <th scope="col">Expression</th> - <th scope="col">Résultat</th> - <th scope="col">Description binaire</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>15 & 9</code></td> - <td><code>9</code></td> - <td><code>1111 & 1001 = 1001</code></td> - </tr> - <tr> - <td><code>15 | 9</code></td> - <td><code>15</code></td> - <td><code>1111 | 1001 = 1111</code></td> - </tr> - <tr> - <td><code>15 ^ 9</code></td> - <td><code>6</code></td> - <td><code>1111 ^ 1001 = 0110</code></td> - </tr> - <tr> - <td><code>~15</code></td> - <td><code>-16</code></td> - <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td> - </tr> - <tr> - <td><code>~9</code></td> - <td><code>-10</code></td> - <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td> - </tr> - </tbody> -</table> +- Chaque bit du premier opérande est associé avec le bit correspondant du second opérande (le premier bit du premier opérande avec le premier bit du second opérande, le second avec le second et ainsi de suite) +- L'opérateur est appliqué pour chaque paire de bits ainsi constituée et le résultat est reconstruit sous forme binaire. -<p>Il faut remarquer que tous les bits sont échangés lorsque l'opérateur binaire NOT est utilisé. Il est donc utile de savoir que les valeurs dont le bit le plus fort (le plus à gauche) vaut 1 sont des nombres négatifs (représentation en complément à deux). L'évaluation de <code>~x</code> aura le même résultat que l'évaluation de <code>-x - 1</code>.</p> +Le chiffre neuf est par exemple représenté comme 1001, et le nombre quinze comme 1111. Ainsi, quand les opérateurs binaires sont appliqués sur ces valeurs, on a les résultats qui suivent : -<h4 id="Opérateurs_binaires_de_décalage">Opérateurs binaires de décalage</h4> +| Expression | Résultat | Description binaire | +| ---------- | -------- | ----------------------------------------------------------------- | +| `15 & 9` | `9` | `1111 & 1001 = 1001` | +| `15 \| 9` | `15` | `1111 \| 1001 = 1111` | +| `15 ^ 9` | `6` | `1111 ^ 1001 = 0110` | +| `~15` | `-16` | ` ~``00000000...`` 00001111 = ``1111``1111``...``11110000 ` | +| `~9` | `-10` | ` ~``00000000``...``0000`` 1001 = ``1111``1111``...``1111``0110 ` | -<p>Les opérateurs binaires de décalage utilisent deux opérandes : le premier indiquant la quantité à décaler et le second indiquant de combien de bits on décale le premier opérande. La direction du décalage est spécifiée grâce à l'opérateur.</p> +Il faut remarquer que tous les bits sont échangés lorsque l'opérateur binaire NOT est utilisé. Il est donc utile de savoir que les valeurs dont le bit le plus fort (le plus à gauche) vaut 1 sont des nombres négatifs (représentation en complément à deux). L'évaluation de `~x` aura le même résultat que l'évaluation de `-x - 1`. -<p>Les opérateurs binaires de décalage convertissent leurs opérandes en entiers sur 32 bits et renvoient un résultat dont le type est le même que l'opérande gauche.</p> +#### Opérateurs binaires de décalage -<p>Les opérateurs de décalage sont énumérés dans le tableau qui suit.</p> +Les opérateurs binaires de décalage utilisent deux opérandes : le premier indiquant la quantité à décaler et le second indiquant de combien de bits on décale le premier opérande. La direction du décalage est spécifiée grâce à l'opérateur. + +Les opérateurs binaires de décalage convertissent leurs opérandes en entiers sur 32 bits et renvoient un résultat dont le type est le même que l'opérande gauche. + +Les opérateurs de décalage sont énumérés dans le tableau qui suit. <table class="fullwidth-table"> - <caption>Opérateurs binaires de décalage</caption> - <thead> - <tr> - <th scope="col">Opérateur</th> - <th scope="col">Description</th> - <th scope="col">Exemple</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#<<_(décalage_à_gauche)">Décalage à gauche (<code><<</code>)</a></td> - <td>Cet opérateur décale le premier opérande d'un nombre de bits donné sur la gauche. Les bits en trop sont ignorés et des bits à zéro sont introduits à droite.</td> - <td><code>9<<2</code> renvoie 36, car 1001, décalé de 2 bits à gauche, devient 100100, dont la représentation en base 10 est 36.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>_(décalage_à_droite_avec_propagation_du_signe)">Décalage à droite avec propagation du signe (<code>>></code>)</a></td> - <td>Cet opérateur décale le premier opérande d'un nombre de bits donné sur la droite. Les bits en trop sont ignorés et des bits correspondants au bit de signe sont introduits à gauche.</td> - <td><code>9>>2</code> renvoie 2, car 1001, décalé de 2 bits à droite, devient 10 représentant 2. De même <code>-9>>2</code> renvoie -3, car le signe est préservé.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>>_(décalage_à_droite_avec_insertion_de_zéros)">Décalage à droite avec zéros (<code>>>></code>)</a></td> - <td>Cet opérateur décale le premier opérande d'un nombre de bits donné sur la droite. Les bits en trop sont ignorés et des bits à 0 sont introduits à gauche.</td> - <td><code>19>>>2</code> renvoie 4, car 10011, décalé de 2 bits, devient 100 qui représente 4. Pour les nombres positifs, cet opérateur et l'opérateur précédent renvoient les mêmes résultats.</td> - </tr> - </tbody> + <caption> + Opérateurs binaires de décalage + </caption> + <thead> + <tr> + <th scope="col">Opérateur</th> + <th scope="col">Description</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#<<_(décalage_à_gauche)" + >Décalage à gauche (<code><<</code>)</a + > + </td> + <td> + Cet opérateur décale le premier opérande d'un nombre de bits donné sur + la gauche. Les bits en trop sont ignorés et des bits à zéro sont + introduits à droite. + </td> + <td> + <code>9<<2</code> renvoie 36, car 1001, décalé de 2 bits à + gauche, devient 100100, dont la représentation en base 10 est 36. + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>_(décalage_à_droite_avec_propagation_du_signe)" + >Décalage à droite avec propagation du signe (<code>>></code>)</a + > + </td> + <td> + Cet opérateur décale le premier opérande d'un nombre de bits donné sur + la droite. Les bits en trop sont ignorés et des bits correspondants au + bit de signe sont introduits à gauche. + </td> + <td> + <code>9>>2</code> renvoie 2, car 1001, décalé de 2 bits à droite, + devient 10 représentant 2. De même <code>-9>>2</code> renvoie -3, car + le signe est préservé. + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>>_(décalage_à_droite_avec_insertion_de_zéros)" + >Décalage à droite avec zéros (<code>>>></code>)</a + > + </td> + <td> + Cet opérateur décale le premier opérande d'un nombre de bits donné sur + la droite. Les bits en trop sont ignorés et des bits à 0 sont introduits + à gauche. + </td> + <td> + <code>19>>>2</code> renvoie 4, car 10011, décalé de 2 bits, devient 100 + qui représente 4. Pour les nombres positifs, cet opérateur et + l'opérateur précédent renvoient les mêmes résultats. + </td> + </tr> + </tbody> </table> -<h3 id="Opérateurs_logiques">Opérateurs logiques</h3> +### Opérateurs logiques -<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques">opérateurs logiques</a> sont généralement utilisés avec des valeurs booléennes. Dans ce cas, il renvoient une valeur booléenne. Les opérateurs <code>&&</code> et <code>||</code> renvoient en fait une valeurs d'un des opérandes et si ces opérateurs sont utilisés avec des valeurs non-booléennées, ils pourront renvoyer une valeur non-booléenne. Les opérateurs logiques sont décrits dans le tableau qui suit.</p> +Les [opérateurs logiques](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques) sont généralement utilisés avec des valeurs booléennes. Dans ce cas, il renvoient une valeur booléenne. Les opérateurs `&&` et `||` renvoient en fait une valeurs d'un des opérandes et si ces opérateurs sont utilisés avec des valeurs non-booléennées, ils pourront renvoyer une valeur non-booléenne. Les opérateurs logiques sont décrits dans le tableau qui suit. <table class="fullwidth-table"> - <caption>Opérateurs logiques</caption> - <thead> - <tr> - <th scope="col">Opérateur</th> - <th scope="col">Usage</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_AND_.28&&.29">ET logique</a> (<code>&&</code>)</td> - <td><code>expr1 && expr2</code></td> - <td>Renvoie <code>expr1</code> s'il peut être converti à false, sinon renvoie <code>expr2</code>. Dans le cas où on utilise des opérandes booléens, <code>&&</code> renvoie <code>true</code> si les deux opérandes valent <code>true</code>, <code>false</code> sinon.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#OU_logique_(.7C.7C)">OU logique</a> (<code>||</code>)</td> - <td><code>expr1 || expr2</code></td> - <td>Renvoie <code>expr1</code> s'il peut être converti à <code>true</code>, sinon renvoie <code>expr2</code>. Dans le cas où on utilise des opérandes booléens, <code>||</code> renvoie <code>true</code> si l'un des opérandes vaut <code>true</code>, si les deux valent <code>false</code>, il renvoie <code>false</code>.</td> - </tr> - <tr> - <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_NOT_.28.21.29">NON logique </a>(<code>!</code>)</td> - <td><code>!expr</code></td> - <td>Renvoie <code>false</code> si son unique opérande peut être converti en <code>true</code>, sinon il renvoie <code>true</code>.</td> - </tr> - </tbody> + <caption> + Opérateurs logiques + </caption> + <thead> + <tr> + <th scope="col">Opérateur</th> + <th scope="col">Usage</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_AND_.28&&.29" + >ET logique</a + > + (<code>&&</code>) + </td> + <td><code>expr1 && expr2</code></td> + <td> + Renvoie <code>expr1</code> s'il peut être converti à false, sinon + renvoie <code>expr2</code>. Dans le cas où on utilise des opérandes + booléens, <code>&&</code> renvoie <code>true</code> si les + deux opérandes valent <code>true</code>, <code>false</code> sinon. + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#OU_logique_(.7C.7C)" + >OU logique</a + > + (<code>||</code>) + </td> + <td><code>expr1 || expr2</code></td> + <td> + Renvoie <code>expr1</code> s'il peut être converti à <code>true</code>, + sinon renvoie <code>expr2</code>. Dans le cas où on utilise des + opérandes booléens, <code>||</code> renvoie <code>true</code> si l'un + des opérandes vaut <code>true</code>, si les deux valent + <code>false</code>, il renvoie <code>false</code>. + </td> + </tr> + <tr> + <td> + <a + href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_NOT_.28.21.29" + >NON logique </a + >(<code>!</code>) + </td> + <td><code>!expr</code></td> + <td> + Renvoie <code>false</code> si son unique opérande peut être converti en + <code>true</code>, sinon il renvoie <code>true</code>. + </td> + </tr> + </tbody> </table> -<p>Les exemples d'expressions qui peuvent être converties à <code>false</code> sont celles qui sont évaluées à <code>null</code>, 0, <code>NaN</code>, la chaîne de caractères vide (""), ou <code>undefined</code>.</p> +Les exemples d'expressions qui peuvent être converties à `false` sont celles qui sont évaluées à `null`, 0, `NaN`, la chaîne de caractères vide (""), ou `undefined`. -<p>Le code qui suit montre des exemples de l'utilisation de l'opérateur logique ET (&&).</p> +Le code qui suit montre des exemples de l'utilisation de l'opérateur logique ET (&&). -<pre class="brush: js">var a1 = true && true; // t && t renvoie true -var a2 = true && false; // t && f renvoie false -var a3 = false && true; // f && t renvoie false -var a4 = false && (3 == 4); // f && f renvoie false -var a5 = "Chat" && "Chien"; // t && t renvoie Chien -var a6 = false && "Chat"; // f && t renvoie false -var a7 = "Chat" && false; // t && f renvoie false -</pre> +```js +var a1 = true && true; // t && t renvoie true +var a2 = true && false; // t && f renvoie false +var a3 = false && true; // f && t renvoie false +var a4 = false && (3 == 4); // f && f renvoie false +var a5 = "Chat" && "Chien"; // t && t renvoie Chien +var a6 = false && "Chat"; // f && t renvoie false +var a7 = "Chat" && false; // t && f renvoie false +``` -<p>Les exemples suivants montrent l'utilisation de l'opérateur logique OU (||).</p> +Les exemples suivants montrent l'utilisation de l'opérateur logique OU (||). -<pre class="brush: js">var o1 = true || true; // t || t renvoie true +```js +var o1 = true || true; // t || t renvoie true var o2 = false || true; // f || t renvoie true var o3 = true || false; // t || f renvoie true var o4 = false || (3 == 4); // f || f renvoie false var o5 = "Chat" || "Chien"; // t || t renvoie Chat var o6 = false || "Chat"; // f || t renvoie Chat var o7 = "Chat" || false; // t || f renvoie Chat -</pre> +``` -<p>Les exemples suivants montrent l'utilisation de l'opérateur logique NON (!).</p> +Les exemples suivants montrent l'utilisation de l'opérateur logique NON (!). -<pre class="brush: js">var n1 = !true; // !t renvoie false +```js +var n1 = !true; // !t renvoie false var n2 = !false; // !f renvoie true var n3 = !"Chat"; // !t renvoie false -</pre> +``` -<h4 id="Evaluation_rapide">Evaluation rapide</h4> +#### Evaluation rapide -<p>Les expressions logiques sont évaluées de gauche à droite. Cette évaluation utilise des tests pour savoir s'il est possible d'utiliser des « raccourcis » correspondant aux règles suivantes :</p> +Les expressions logiques sont évaluées de gauche à droite. Cette évaluation utilise des tests pour savoir s'il est possible d'utiliser des « raccourcis » correspondant aux règles suivantes : -<ul> - <li><code>false</code> && <em>n'importe quoi</em> sera évalué à <code>false</code>.</li> - <li><code>true</code> || <em>n'importe quoi </em>sera évalué à <code>true</code>.</li> -</ul> +- `false` && _n'importe quoi_ sera évalué à `false`. +- `true` || _n'importe quoi_ sera évalué à `true`. -<p>Les règles logiques garantissent la validité de ces évaluations, il faut noter que le second opérande n'est pas du tout évalué, empêchant ainsi les effets de bords cachés, liés à cette évaluation.</p> +Les règles logiques garantissent la validité de ces évaluations, il faut noter que le second opérande n'est pas du tout évalué, empêchant ainsi les effets de bords cachés, liés à cette évaluation. -<h3 id="Opérateurs_de_chaînes_de_caractères">Opérateurs de chaînes de caractères</h3> +### Opérateurs de chaînes de caractères -<p>En plus des opérateurs de comparaisons qui peuvent être utilisés sur des chaînes de caractères, il existe l'opérateur de concaténation (+) permettant de concaténer deux chaînes de caractères. Le résultat de cette opération est la fusion des deux opérandes en une même chaîne de caractères. Ainsi :</p> +En plus des opérateurs de comparaisons qui peuvent être utilisés sur des chaînes de caractères, il existe l'opérateur de concaténation (+) permettant de concaténer deux chaînes de caractères. Le résultat de cette opération est la fusion des deux opérandes en une même chaîne de caractères. Ainsi : -<pre class="brush: js">console.log("ma " + "chaîne"); // affichera "ma chaîne" dans la console</pre> +```js +console.log("ma " + "chaîne"); // affichera "ma chaîne" dans la console +``` -<p>L'opérateur court += peut également être utilisé pour concaténer des chaînes. Par exemple :</p> +L'opérateur court += peut également être utilisé pour concaténer des chaînes. Par exemple : -<pre class="brush: js">var maChaîne = "alpha"; +```js +var maChaîne = "alpha"; maChaîne += "bet"; // l'expression sera évaluée en "alphabet" - // et cette valeur sera affectée à maChaîne</pre> + // et cette valeur sera affectée à maChaîne +``` -<h3 id="Opérateur_conditionnel_ternaire">Opérateur conditionnel ternaire</h3> +### Opérateur conditionnel ternaire -<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel">opérateur conditionnel</a> est le seul opérateur JavaScript qui utilise trois opérandes. L'expression utilisant l'opérateur peut prendre une valeur parmi deux selon une condition donnée. Cet opérateur s'utilise avec la syntaxe suivante :</p> +L'[opérateur conditionnel](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel) est le seul opérateur JavaScript qui utilise trois opérandes. L'expression utilisant l'opérateur peut prendre une valeur parmi deux selon une condition donnée. Cet opérateur s'utilise avec la syntaxe suivante : -<pre class="syntaxbox"><em>condition</em> ? <em>val1</em> : <em>val2</em> -</pre> + condition ? val1 : val2 -<p>Si <code>condition</code> vaut <code>true</code>, l'opérateur vaudra <code>val1</code>. Sinon il vaudra <code>val2</code>. Il est possible d'utiliser l'opérateur conditionnel aux mêmes endroits qu'un opérateur standard.</p> +Si `condition` vaut `true`, l'opérateur vaudra `val1`. Sinon il vaudra `val2`. Il est possible d'utiliser l'opérateur conditionnel aux mêmes endroits qu'un opérateur standard. -<p>On peut par exemple avoir :</p> +On peut par exemple avoir : -<pre class="brush: js">var statut = (âge >= 18) ? "adulte" : "mineur"; -</pre> +```js +var statut = (âge >= 18) ? "adulte" : "mineur"; +``` -<p>Cette instruction assigne la valeur "adulte" à la variable <code>status</code> si la variable <code>âge</code> est supérieure ou égale à 18. Sinon, on lui affecte la valeur "mineur".</p> +Cette instruction assigne la valeur "adulte" à la variable `status` si la variable `âge` est supérieure ou égale à 18. Sinon, on lui affecte la valeur "mineur". -<h3 id="La_virgule_comme_opérateur">La virgule comme opérateur</h3> +### La virgule comme opérateur -<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule">opérateur virgule</a> (<code>,</code>) évalue ses deux opérandes et renvoie la valeur du second opérande. Cet opérateur est principalement utilisé dans les boucles for pour permettre à plusieurs variables d'être modifiées à chaque itération de la boucle.</p> +L'[opérateur virgule](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule) (`,`) évalue ses deux opérandes et renvoie la valeur du second opérande. Cet opérateur est principalement utilisé dans les boucles for pour permettre à plusieurs variables d'être modifiées à chaque itération de la boucle. -<p>Ainsi, si on a un tableau à 2 dimensions avec 10 lignes et colonnes, on peut utiliser la virgule comme opérateur pour incrémenter deux variables à la fois. Le code qui suit imprime les valeurs contenues sur la diagonale du tableau :</p> +Ainsi, si on a un tableau à 2 dimensions avec 10 lignes et colonnes, on peut utiliser la virgule comme opérateur pour incrémenter deux variables à la fois. Le code qui suit imprime les valeurs contenues sur la diagonale du tableau : -<pre class="brush: js">var x = [0,1,2,3,4,5,6,7,8,9] +```js +var x = [0,1,2,3,4,5,6,7,8,9] var a = [x, x, x, x, x]; -for (var i = 0, j = 9; i <= j; i++, j--) +for (var i = 0, j = 9; i <= j; i++, j--) console.log("a[" + i + "][" + j + "]= " + a[i][j]); -</pre> +``` -<h3 id="Opérateurs_unaires">Opérateurs unaires</h3> +### Opérateurs unaires -<h4 id="delete"><code>delete</code></h4> +#### `delete` -<p>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a> supprime un objet, une propriété d'un objet ou un élément d'un tableau à partir de sa position dans le tableau. La syntaxe de cet opérateur est la suivante :</p> +L'opérateur [delete](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete) supprime un objet, une propriété d'un objet ou un élément d'un tableau à partir de sa position dans le tableau. La syntaxe de cet opérateur est la suivante : -<pre class="brush: js">delete monObjet; +```js +delete monObjet; delete monObjet.propriété; delete monObjet[index]; delete propriété; // uniquement valide au sein d'une instruction with -</pre> +``` -<p>où on a <code>monObjet</code> qui est le nom de l'objet, <code>propriété</code> qui est une propriété existante et <code>index</code> un entier indiquant la position d'un élément dans un tableau.</p> +où on a `monObjet` qui est le nom de l'objet, `propriété` qui est une propriété existante et `index` un entier indiquant la position d'un élément dans un tableau. -<p>La quatrième instruction n'est valide qu'au sein d'une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code> et permet de supprimer une propriété d'un objet.</p> +La quatrième instruction n'est valide qu'au sein d'une instruction [`with`](/fr/docs/Web/JavaScript/Reference/Instructions/with) et permet de supprimer une propriété d'un objet. -<p>Il est possible d'utiliser l'opérateur <code>delete</code> pour supprimer les variables déclarées implicitement mais pas celles déclarées avec <code>var</code>. Si l'opérateur fonctionne correctement, il change la propriété ou l'élément vers la valeur <code>undefined</code>. L'opérateur <code>delete</code> renvoie <code>true</code> si l'opération de suppression est possible, <code>false</code> sinon.</p> +Il est possible d'utiliser l'opérateur `delete` pour supprimer les variables déclarées implicitement mais pas celles déclarées avec `var`. Si l'opérateur fonctionne correctement, il change la propriété ou l'élément vers la valeur `undefined`. L'opérateur `delete` renvoie `true` si l'opération de suppression est possible, `false` sinon. -<pre class="brush: js">x = 42; +```js +x = 42; var y = 43; monobj = new Number(); monobj.h = 4; // création de la propriété h @@ -570,146 +662,143 @@ delete y; // renvoie false (suppression impossible si déclaration avec v delete Math.PI; // renvoie false (suppression impossible pour les propriétés pré-définies) delete monobj.h; // renvoie true (suppression possible des propriétés définies par l'utilisateur) delete monobj; // renvoie true (suppression possible si déclaration implicite) -</pre> +``` -<h5 id="Suppression_déléments_dun_tableau">Suppression d'éléments d'un tableau</h5> +##### Suppression d'éléments d'un tableau -<p>Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Ainsi, si on supprime <code>a[3]</code>, <code>a[4]</code> restera <code>a[4]</code> (même position et valeur) alors que <code>a[3]</code> sera <code>undefined</code>.</p> +Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Ainsi, si on supprime `a[3]`, `a[4]` restera `a[4]` (même position et valeur) alors que `a[3]` sera `undefined`. -<p>Lorsque l'opérateur <code>delete</code> supprime un élément d'un tableau, cet élément n'appartient plus au tableau. Dans l'exemple qui suit, <code>arbres[3]</code> est supprimé mais il est toujours accessible et renvoie <code>undefined</code>.</p> +Lorsque l'opérateur `delete` supprime un élément d'un tableau, cet élément n'appartient plus au tableau. Dans l'exemple qui suit, `arbres[3]` est supprimé mais il est toujours accessible et renvoie `undefined`. -<pre class="brush: js">var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable"); +```js +var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable"); delete arbres[3]; if (3 in arbres) { // Ceci ne sera pas exécuté } -</pre> +``` -<p>Pour qu'un élément continue à exister mais qu'il vaille <code>undefined</code>, on utilisera le mot-clé<code> undefined</code> plutôt que l'opérateur <code>delete</code>. Dans l'exemple qui suit, arbres<code>[3]</code> est modifié pour valoir <code>undefined</code> et l'élément du tableau continue à exister :</p> +Pour qu'un élément continue à exister mais qu'il vaille `undefined`, on utilisera le mot-clé` undefined` plutôt que l'opérateur `delete`. Dans l'exemple qui suit, arbres`[3]` est modifié pour valoir `undefined` et l'élément du tableau continue à exister : -<pre class="brush: js">var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable"); +```js +var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable"); arbres[3] = undefined; if (3 in arbres) { // Ceci sera exécuté } -</pre> +``` -<h4 id="typeof"><code>typeof</code></h4> +#### `typeof` -<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_typeof">opérateur <code>typeof</code></a> peut être utilisé de deux façons distinctes :</p> +L'[opérateur `typeof`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_typeof) peut être utilisé de deux façons distinctes : -<ol> - <li> - <pre class="syntaxbox">typeof opérande</pre> - </li> - <li> - <pre class="syntaxbox">typeof (opérande) -</pre> - </li> -</ol> +1. typeof opérande +2. typeof (opérande) -<p>L'opérateur <code>typeof</code> renvoie une chaîne de caractères indiquant le type de l'opérande (qui n'est pas évalué). <code>opérande</code> correspond à la chaîne de caractère, la variable, le mot-clé ou l'objet dont on souhaite renvoyer le type. L'utilisation des parenthèses est facultative.</p> +L'opérateur `typeof` renvoie une chaîne de caractères indiquant le type de l'opérande (qui n'est pas évalué). `opérande` correspond à la chaîne de caractère, la variable, le mot-clé ou l'objet dont on souhaite renvoyer le type. L'utilisation des parenthèses est facultative. -<p>Soient les définitions de variables suivantes :</p> +Soient les définitions de variables suivantes : -<pre class="brush: js">var maFonction = new Function("5 + 2"); +```js +var maFonction = new Function("5 + 2"); var forme = "round"; var taille = 1; var toto = ["Pomme", "Poire", "Orange"]; var jour = new Date(); -</pre> +``` -<p>L'opérateur <code>typeof</code> renverra les résultats suivants :</p> +L'opérateur `typeof` renverra les résultats suivants : -<pre class="brush: js">typeof maFonction; // renvoie "function" +```js +typeof maFonction; // renvoie "function" typeof forme; // renvoie "string" typeof taille; // renvoie "number" typeof toto; // renvoie "object" typeof jour; // renvoie "object" typeof inexistant; // renvoie "undefined" -</pre> +``` -<p>En ce qui concerne les mots-clés <code>true</code> et <code>null</code>, l'opérateur <code>typeof</code> renvoie les résultats suivants :</p> +En ce qui concerne les mots-clés `true` et `null`, l'opérateur `typeof` renvoie les résultats suivants : -<pre class="brush: js">typeof true; // renvoie "boolean" +```js +typeof true; // renvoie "boolean" typeof null; // renvoie "object" -</pre> +``` -<p>Pour une chaîne de caractères ou un nombre, <code>typeof</code> renvoie les résultats suivants :</p> +Pour une chaîne de caractères ou un nombre, `typeof` renvoie les résultats suivants : -<pre class="brush: js">typeof 62; // renvoie "number" +```js +typeof 62; // renvoie "number" typeof 'Hello world'; // renvoie "string" -</pre> +``` -<p>L'opérateur <code>typeof</code>, lorsqu'il est utilisé avec des propriétés, renvoie le type de valeur contenue dans la propriété :</p> +L'opérateur `typeof`, lorsqu'il est utilisé avec des propriétés, renvoie le type de valeur contenue dans la propriété : -<pre class="brush: js">typeof document.lastModified; // renvoie "string" +```js +typeof document.lastModified; // renvoie "string" typeof window.length; // renvoie "number" typeof Math.LN2; // renvoie "number" -</pre> +``` -<p>Pour les méthodes et les fonctions, l'opérateur <code>typeof</code> renvoie les résultats suivants :</p> +Pour les méthodes et les fonctions, l'opérateur `typeof` renvoie les résultats suivants : -<pre class="brush: js">typeof blur; // renvoie "function" +```js +typeof blur; // renvoie "function" typeof eval; // renvoie "function" typeof parseInt; // renvoie "function" typeof shape.split; // renvoie "function" -</pre> +``` -<p>Pour les objets pré-définis, l'opérateur <code>typeof</code> fonctionne ainsi :</p> +Pour les objets pré-définis, l'opérateur `typeof` fonctionne ainsi : -<pre class="brush: js">typeof Date; // renvoie "function" +```js +typeof Date; // renvoie "function" typeof Function; // renvoie "function" typeof Math; // renvoie "object" typeof Option; // renvoie "function" typeof String; // renvoie "function" -</pre> +``` -<h4 id="void"><code>void</code></h4> +#### `void` -<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void">opérateur <code>void</code></a> peut être utilisé de deux façons :</p> +L'[opérateur `void`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void) peut être utilisé de deux façons : -<ol> - <li> - <pre class="syntaxbox">void (expression) -</pre> - </li> - <li> - <pre class="syntaxbox">void expression -</pre> - </li> -</ol> +1. void (expression) +2. void expression -<p>L'opérateur <code>void</code> indique qu'une expression doit être évaluée sans retourner de valeur. <code>expression</code> étant une expression JavaScript à évaluer. Les parenthèses sont facultatives mais les utiliser permet d'avoir une meilleur lisibilité du code.</p> +L'opérateur `void` indique qu'une expression doit être évaluée sans retourner de valeur. `expression` étant une expression JavaScript à évaluer. Les parenthèses sont facultatives mais les utiliser permet d'avoir une meilleur lisibilité du code. -<p>L'opérateur <code>void</code> peut être utilisé pour spécifier une expression comme un lien hypertexte, l'expression est évaluée mais n'est pas chargée à la place du document actuel.</p> +L'opérateur `void` peut être utilisé pour spécifier une expression comme un lien hypertexte, l'expression est évaluée mais n'est pas chargée à la place du document actuel. -<p>Le fragment de code qui suit crée un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus. Lorsqu'on clique sur le lien, <code>void(0)</code> est évalué à <code>undefined</code>, n'ayant aucun effet.</p> +Le fragment de code qui suit crée un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus. Lorsqu'on clique sur le lien, `void(0)` est évalué à `undefined`, n'ayant aucun effet. -<pre class="brush: html"><A HREF="javascript:void(0)">Cliquer ici pour ne rien faire</A> -</pre> +```html +<A HREF="javascript:void(0)">Cliquer ici pour ne rien faire</A> +``` -<p>Le code suivant crée un lien hypertexte qui envoie un formulaire lorsque l'utilisateur clique dessus.</p> +Le code suivant crée un lien hypertexte qui envoie un formulaire lorsque l'utilisateur clique dessus. -<pre class="brush: html"><A HREF="javascript:void(document.form.submit())"> -Cliquer ici pour envoyer</A></pre> +```html +<A HREF="javascript:void(document.form.submit())"> +Cliquer ici pour envoyer</A> +``` -<h3 id="Opérateurs_relationnels">Opérateurs relationnels</h3> +### Opérateurs relationnels -<p>Un opérateur relationnel compare ses opérandes et renvoie une valeur booléenne selon que le résultat de la comparaison est vrai ou faux.</p> +Un opérateur relationnel compare ses opérandes et renvoie une valeur booléenne selon que le résultat de la comparaison est vrai ou faux. -<h4 id="in"><code>in</code></h4> +#### `in` -<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_in">opérateur <code>in</code></a> renvoie <code>true</code> si la propriété indiquée fait partie de l'objet donné. Cet opérateur s'utilise avec la syntaxe suivante :</p> +L'[opérateur `in`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_in) renvoie `true` si la propriété indiquée fait partie de l'objet donné. Cet opérateur s'utilise avec la syntaxe suivante : -<pre class="syntaxbox">nomOuNumeroPropriete in monObjet -</pre> + nomOuNumeroPropriete in monObjet -<p>avec <code>nomOuNumeroPropriete</code> qui est une chaîne de caractères, une expression numérique ou un symbole correspondant au nom d'une propriété ou un indice de tableau, <code>monObjet</code> est le nom d'un objet.</p> +avec `nomOuNumeroPropriete` qui est une chaîne de caractères, une expression numérique ou un symbole correspondant au nom d'une propriété ou un indice de tableau, `monObjet` est le nom d'un objet. -<p>Les exemples qui suivent utilisent cet opérateur <code>in</code>.</p> +Les exemples qui suivent utilisent cet opérateur `in`. -<pre class="brush: js">// Tableaux +```js +// Tableaux var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable"); 0 in arbres; // renvoie true 3 in arbres; // renvoie true @@ -727,161 +816,105 @@ var myString = new String("coral"); var maVoiture = {fabricant: "Honda", modèle: "Accord", year: 1998}; "fabricant" in maVoiture; // renvoie true "modèle" in maVoiture; // renvoie true -</pre> +``` -<h4 id="instanceof"><code>instanceof</code></h4> +#### `instanceof` -<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/instanceof">opérateur instanceof</a> renvoie <code>true</code> si l'objet donné est du type spécifié. Cet opérateur s'utilise avec la syntaxe suivante :</p> +L'[opérateur instanceof](/fr/docs/Web/JavaScript/Reference/Opérateurs/instanceof) renvoie `true` si l'objet donné est du type spécifié. Cet opérateur s'utilise avec la syntaxe suivante : -<pre class="syntaxbox">nomObjet instanceof typeObjet -</pre> + nomObjet instanceof typeObjet -<p>avec <code>nomObjet</code> qui est le nom de l'objet dont on souhaite comparer le type à <code>typeObjet</code>, <code>typeObjet</code> étant un type d'objet tel que {{jsxref("Date")}} ou {{jsxref("Array")}}.</p> +avec `nomObjet` qui est le nom de l'objet dont on souhaite comparer le type à `typeObjet`, `typeObjet` étant un type d'objet tel que {{jsxref("Date")}} ou {{jsxref("Array")}}. -<p><code>instanceof</code> peut être utilisé pour confirmer le type d'un objet pendant l'exécution. Ainsi, on peut gérer les exceptions en prévoyant différents cas pour différents types d'exception éventuellement levées.</p> +`instanceof` peut être utilisé pour confirmer le type d'un objet pendant l'exécution. Ainsi, on peut gérer les exceptions en prévoyant différents cas pour différents types d'exception éventuellement levées. -<p>Dans l'exemple qui suit, le code utilise l'opérateur <code>instanceof</code> afin de déterminer si <code>jour</code> est un objet <code>Date</code>. C'est le cas, les instructions contenues dans le bloc après l'instruction <code>if</code> sont donc exécutées.</p> +Dans l'exemple qui suit, le code utilise l'opérateur `instanceof` afin de déterminer si `jour` est un objet `Date`. C'est le cas, les instructions contenues dans le bloc après l'instruction `if` sont donc exécutées. -<pre class="brush: js">var jour = new Date(2007, 01, 22); +```js +var jour = new Date(2007, 01, 22); if (jour instanceof Date) { // instructions à exécuter } -</pre> +``` -<h3 id="Précédence_des_opérateurs">Précédence des opérateurs</h3> +### Précédence des opérateurs -<p>La <em>précédence</em> des opérateurs indique l'ordre dans lequel ils sont appliqués lors de l'évaluation d'une expression. L'utilisation de parenthèses permet de surcharger la relation de précédence.</p> +La _précédence_ des opérateurs indique l'ordre dans lequel ils sont appliqués lors de l'évaluation d'une expression. L'utilisation de parenthèses permet de surcharger la relation de précédence. -<p>Le tableau qui suit décrit les précédences des opérateurs, dans l'ordre décroissant.</p> +Le tableau qui suit décrit les précédences des opérateurs, dans l'ordre décroissant. -<table class="standard-table"> - <caption>Précédence des opérateurs</caption> - <thead> - <tr> - <th scope="col">Type d'opérateur</th> - <th scope="col">Opérateurs individuels</th> - </tr> - </thead> - <tbody> - <tr> - <td>membre</td> - <td><code>. []</code></td> - </tr> - <tr> - <td>appel/création d'instance</td> - <td><code>() new</code></td> - </tr> - <tr> - <td>négation/incrémentation</td> - <td><code>! ~ - + ++ -- typeof void delete</code></td> - </tr> - <tr> - <td>multiplication/division</td> - <td><code>* / %</code></td> - </tr> - <tr> - <td>addition/soustraction</td> - <td><code>+ -</code></td> - </tr> - <tr> - <td>décalage binaire</td> - <td><code><< >> >>></code></td> - </tr> - <tr> - <td>relationnel</td> - <td><code>< <= > >= in instanceof</code></td> - </tr> - <tr> - <td>égalité</td> - <td><code>== != === !==</code></td> - </tr> - <tr> - <td>ET binaire</td> - <td><code>&</code></td> - </tr> - <tr> - <td>OU exclusif binaire</td> - <td><code>^</code></td> - </tr> - <tr> - <td>OU binaire</td> - <td><code>|</code></td> - </tr> - <tr> - <td>ET logique</td> - <td><code>&&</code></td> - </tr> - <tr> - <td>OU logique</td> - <td><code>||</code></td> - </tr> - <tr> - <td>conditionnel</td> - <td><code>?:</code></td> - </tr> - <tr> - <td>assignation</td> - <td><code>= += -= *= /= %= <<= >>= >>>= &= ^= |=</code></td> - </tr> - <tr> - <td>virgule</td> - <td><code>,</code></td> - </tr> - </tbody> -</table> +| Type d'opérateur | Opérateurs individuels | +| ------------------------- | ----------------------------------------- | +| membre | `. []` | +| appel/création d'instance | `() new` | +| négation/incrémentation | `! ~ - + ++ -- typeof void delete` | +| multiplication/division | `* / %` | +| addition/soustraction | `+ -` | +| décalage binaire | `<< >> >>>` | +| relationnel | `< <= > >= in instanceof` | +| égalité | `== != === !==` | +| ET binaire | `&` | +| OU exclusif binaire | `^` | +| OU binaire | `\|` | +| ET logique | `&&` | +| OU logique | `\|\|` | +| conditionnel | `?:` | +| assignation | `= += -= *= /= %= <<= >>= >>>= &= ^= \|=` | +| virgule | `,` | -<p>Une version plus détaillée de cette table peut être trouvée dans la <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs#Table">référence JavaScript</a>.</p> +Une version plus détaillée de cette table peut être trouvée dans la [référence JavaScript](/fr/docs/Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs#Table). -<h2 id="Expressions">Expressions</h2> +## Expressions -<p>Un expression correspond à une unité de code valide qui est résolue en une valeur.</p> +Un expression correspond à une unité de code valide qui est résolue en une valeur. -<p>D'un point de vue syntaxique, toute expression valide se résout en une valeur. D'un point de vue conceptuel cependant, il y a deux types d'expressions : celles avec des effets de bord (qui, par exemple, affectent une valeur à une variable) et celles qui, d'une certaine façon, sont évaluées et sont résolues en une valeur.</p> +D'un point de vue syntaxique, toute expression valide se résout en une valeur. D'un point de vue conceptuel cependant, il y a deux types d'expressions : celles avec des effets de bord (qui, par exemple, affectent une valeur à une variable) et celles qui, d'une certaine façon, sont évaluées et sont résolues en une valeur. -<p>L'expression <code>x = 7</code> affecte une valeur (premier type). Dans celle-ci, on utilise l'opérateur <code>=</code> pour affecter la valeur 7 à la variable <code>x</code>. L'expression elle-même est évaluée à 7.</p> +L'expression `x = 7` affecte une valeur (premier type). Dans celle-ci, on utilise l'opérateur `=` pour affecter la valeur 7 à la variable `x`. L'expression elle-même est évaluée à 7. -<p>Le code <code>3 + 4</code> correspond au second type d'expression. On utilise ici l'opérateur <code>+</code> pour ajouter trois à quatre sans affecter le résultat (7) à une variable.</p> +Le code `3 + 4` correspond au second type d'expression. On utilise ici l'opérateur `+` pour ajouter trois à quatre sans affecter le résultat (7) à une variable. -<p>Les expressions JavaScript peuvent être rangées selon différentes catégories :</p> +Les expressions JavaScript peuvent être rangées selon différentes catégories : -<ul> - <li>Arithmétiques : l'expression est évaluée en un nombre (par exemple 3.14159)</li> - <li>Textuelles : l'expression est évaluée en une chaîne de caractères</li> - <li>Logiques : l'expression est évaluée en <code>true</code> ou <code>false</code></li> - <li>Primaires : Les mots-clés basiques et les expressions générales en JavaScript</li> - <li>Expressions vers la gauche : Les valeurs à gauche sont la cible d'une affectation</li> -</ul> +- Arithmétiques : l'expression est évaluée en un nombre (par exemple 3.14159) +- Textuelles : l'expression est évaluée en une chaîne de caractères +- Logiques : l'expression est évaluée en `true` ou `false` +- Primaires : Les mots-clés basiques et les expressions générales en JavaScript +- Expressions vers la gauche : Les valeurs à gauche sont la cible d'une affectation -<h3 id="Expressions_primaires">Expressions primaires</h3> +### Expressions primaires -<p>Ces expressions correspondent aux mots-clés et aux expressions générales en JavaScript.</p> +Ces expressions correspondent aux mots-clés et aux expressions générales en JavaScript. -<h4 id="this"><code>this</code></h4> +#### `this` -<p>Le <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">mot-clé <code>this</code></a> permet de faire référence à l'objet courant. En général, on l'utilise au sein d'une méthode pour faire référence à l'objet qui a utilisé la méthode. Il s'utilise de cette façon :</p> +Le [mot-clé `this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this) permet de faire référence à l'objet courant. En général, on l'utilise au sein d'une méthode pour faire référence à l'objet qui a utilisé la méthode. Il s'utilise de cette façon : -<pre class="syntaxbox">this["nomPropriété"] -this.nomPropriété</pre> + this["nomPropriété"] + this.nomPropriété -<p>Soit une fonction qui valide un objet si sa propriété <code>value</code> est comprise entre deux valeurs :</p> +Soit une fonction qui valide un objet si sa propriété `value` est comprise entre deux valeurs : -<pre class="brush: js">function valide(obj, valMin, valMax){ - if ((obj.value < valMin) || (obj.value > valMax)) +```js +function valide(obj, valMin, valMax){ + if ((obj.value < valMin) || (obj.value > valMax)) console.log("Valeur incorrecte !"); } -</pre> +``` -<p>Il est possible d'appeler <code>valide</code> pour chaque gestionnaire d'événement <code>onChange</code> des éléments du formulaire, et d'utiliser le mot-clé <code>this</code> pour passer l'élément même en argument :</p> +Il est possible d'appeler `valide` pour chaque gestionnaire d'événement `onChange` des éléments du formulaire, et d'utiliser le mot-clé `this` pour passer l'élément même en argument : -<pre class="brush: html"><p>Entrez un nombre entre 18 et 99 :</p> -<input type="text" nom="age" size=3 onChange="valide(this, 18, 99);"> -</pre> +```html +<p>Entrez un nombre entre 18 et 99 :</p> +<input type="text" nom="age" size=3 onChange="valide(this, 18, 99);"> +``` -<h4 id="Opérateur_de_groupement">Opérateur de groupement</h4> +#### Opérateur de groupement -<p>L'opérateur de groupement <code>( )</code> permet de contrôler la précédence de l'évaluation dans les expressions. On peut ainsi forcer l'évaluation d'une addition avant l'évaluation d'une multiplication ou d'une division.</p> +L'opérateur de groupement `( )` permet de contrôler la précédence de l'évaluation dans les expressions. On peut ainsi forcer l'évaluation d'une addition avant l'évaluation d'une multiplication ou d'une division. -<pre class="brush: js">var a = 1; +```js +var a = 1; var b = 2; var c = 3; @@ -896,40 +929,44 @@ a + (b * c); // 7 // ce qui équivaut à : a * c + b * c; // 9 -</pre> +``` -<h3 id="Expressions_vers_la_gauche">Expressions vers la gauche</h3> +### Expressions vers la gauche -<p>Les valeurs à gauches de ces expressions sont la cible d'une affectation.</p> +Les valeurs à gauches de ces expressions sont la cible d'une affectation. -<h4 id="new"><code>new</code></h4> +#### `new` -<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">opérateur <code>new</code></a> permet de créer une instance d'un objet défini par l'utilisateur ou d'un objet dont le type est un des types d'objets natifs. Cet opérateur utilise la syntaxe suivante :</p> +L'[opérateur `new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new) permet de créer une instance d'un objet défini par l'utilisateur ou d'un objet dont le type est un des types d'objets natifs. Cet opérateur utilise la syntaxe suivante : -<pre class="brush: js">var nomObjet = new typeObjet([param1, param2, ..., paramN]); -</pre> +```js +var nomObjet = new typeObjet([param1, param2, ..., paramN]); +``` -<h4 id="super">super</h4> +#### super -<p>Le <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">mot-clé <code>super</code></a> est utilisé afin d'appeler des fonctions disponibles sur un objet parent. Il peut notamment être utilisé avec les <a href="/fr/docs/Web/JavaScript/Reference/Classes">classes</a> pour appeler le constructeur parent.</p> +Le [mot-clé `super`](/fr/docs/Web/JavaScript/Reference/Opérateurs/super) est utilisé afin d'appeler des fonctions disponibles sur un objet parent. Il peut notamment être utilisé avec les [classes](/fr/docs/Web/JavaScript/Reference/Classes) pour appeler le constructeur parent. -<pre class="syntaxbox">super([arguments]); // invoque le constructeur parent -super.functionParent([arguments]); -</pre> + super([arguments]); // invoque le constructeur parent + super.functionParent([arguments]); -<h4 id="Opérateur_de_décomposition">Opérateur de décomposition</h4> +#### Opérateur de décomposition -<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">opérateur de décomposition</a> permet de développer une expression là où plusieurs argument (pour les appels de fonction) ou plusieurs éléments (pour les littéraux de tableaux) sont attendus.</p> +L'[opérateur de décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition) permet de développer une expression là où plusieurs argument (pour les appels de fonction) ou plusieurs éléments (pour les littéraux de tableaux) sont attendus. -<p>Par exemple, si on a tableau et qu'on souhaite créer un nouveau tableau qui contient l'ancien, on peut soit utiliser une combinaison des méthodes <code>push</code>, <code>splice</code>, <code>concat</code>, soit utiliser la syntaxe de décomposition qui s'avère plus concise :</p> +Par exemple, si on a tableau et qu'on souhaite créer un nouveau tableau qui contient l'ancien, on peut soit utiliser une combinaison des méthodes `push`, `splice`, `concat`, soit utiliser la syntaxe de décomposition qui s'avère plus concise : -<pre class="brush: js">var parts = ['shoulders', 'knees']; -var lyrics = ['head', ...parts, 'and', 'toes'];</pre> +```js +var parts = ['shoulders', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes']; +``` -<p>L'opérateur de décomposition fonctionne de façon semblable avec les appels de fonction :</p> +L'opérateur de décomposition fonctionne de façon semblable avec les appels de fonction : -<pre class="brush: js">function f(x, y, z) { } +```js +function f(x, y, z) { } var args = [0, 1, 2]; -f(...args);</pre> +f(...args); +``` -<p>{{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}}</p> +{{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}} diff --git a/files/fr/web/javascript/guide/functions/index.md b/files/fr/web/javascript/guide/functions/index.md index 972c9f6286..3c909fba2c 100644 --- a/files/fr/web/javascript/guide/functions/index.md +++ b/files/fr/web/javascript/guide/functions/index.md @@ -9,41 +9,42 @@ tags: translation_of: Web/JavaScript/Guide/Functions original_slug: Web/JavaScript/Guide/Fonctions --- -<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}}</p> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}} -<p>Les fonctions font partie des briques fondamentales de JavaScript. Une fonction est une procédure JavaScript, un ensemble d'instructions effectuant une tâche ou calculant une valeur. Afin d'utiliser une fonction, il est nécessaire de l'avoir auparavant définie au sein de la portée dans laquelle on souhaite l'appeler.</p> +Les fonctions font partie des briques fondamentales de JavaScript. Une fonction est une procédure JavaScript, un ensemble d'instructions effectuant une tâche ou calculant une valeur. Afin d'utiliser une fonction, il est nécessaire de l'avoir auparavant définie au sein de la portée dans laquelle on souhaite l'appeler. -<p>On pourra également lire <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">le chapitre de la référence JavaScript sur les fonctions</a> pour étudier plus en détails ce concept</p> +On pourra également lire [le chapitre de la référence JavaScript sur les fonctions](/fr/docs/Web/JavaScript/Reference/Fonctions) pour étudier plus en détails ce concept -<h2 id="Définir_des_fonctions">Définir des fonctions</h2> +## Définir des fonctions -<h3 id="Les_déclarations_de_fonctions">Les déclarations de fonctions</h3> +### Les déclarations de fonctions -<p>Une <strong>définition de fonction</strong> (aussi appelée <strong>déclaration de fonction</strong> ou <strong>instruction de fonction</strong>) est construite avec le mot-clé <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function"><code>function</code></a>, suivi par :</p> +Une **définition de fonction** (aussi appelée **déclaration de fonction** ou **instruction de fonction**) est construite avec le mot-clé [`function`](/fr/docs/Web/JavaScript/Reference/Instructions/function), suivi par : -<ul> - <li>Le nom de la fonction.</li> - <li>Une liste d'arguments à passer à la fonction, entre parenthèses et séparés par des virgules.</li> - <li>Les instructions JavaScript définissant la fonction, entre accolades, <code>{ }</code>.</li> -</ul> +- Le nom de la fonction. +- Une liste d'arguments à passer à la fonction, entre parenthèses et séparés par des virgules. +- Les instructions JavaScript définissant la fonction, entre accolades, `{ }`. -<p>Le code suivant, par exemple, définit une fonction intitulée <code>carré</code> :</p> +Le code suivant, par exemple, définit une fonction intitulée `carré` : -<pre class="brush: js">function carré(nombre) { +```js +function carré(nombre) { return nombre * nombre; } -</pre> +``` -<p>La fonction <code>carré</code> prend un seul argument, appelé <code>nombre</code>. La fonction est composée d'une seule instruction qui renvoie l'argument de la fonction (<code>nombre</code>) multiplié par lui-même. L'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/return"><code>return</code></a> spécifie la valeur qui est renvoyée par la fonction.</p> +La fonction `carré` prend un seul argument, appelé `nombre`. La fonction est composée d'une seule instruction qui renvoie l'argument de la fonction (`nombre`) multiplié par lui-même. L'instruction [`return`](/fr/docs/Web/JavaScript/Reference/Instructions/return) spécifie la valeur qui est renvoyée par la fonction. -<pre class="brush: js">return nombre * nombre; -</pre> +```js +return nombre * nombre; +``` -<p>Les paramètres primitifs (comme les nombres) sont passés à la fonction <strong>par valeur</strong>. La valeur est passée à la fonction mais si cette dernière change la valeur du paramètre, cela n'aura pas d'impact au niveau global ou au niveau de ce qui a appelé la fonction.</p> +Les paramètres primitifs (comme les nombres) sont passés à la fonction **par valeur**. La valeur est passée à la fonction mais si cette dernière change la valeur du paramètre, cela n'aura pas d'impact au niveau global ou au niveau de ce qui a appelé la fonction. -<p>Si l'argument passé à la fonction est un objet (une valeur non-primitive, comme un objet {{jsxref("Array")}} ou un objet défini par l'utilisateur), et que la fonction change les propriétés de cet objet, ces changements seront visibles en dehors de la fonction. Par exemple :</p> +Si l'argument passé à la fonction est un objet (une valeur non-primitive, comme un objet {{jsxref("Array")}} ou un objet défini par l'utilisateur), et que la fonction change les propriétés de cet objet, ces changements seront visibles en dehors de la fonction. Par exemple : -<pre class="brush: js">function maFonction(monObjet) { +```js +function maFonction(monObjet) { monObjet.fabricant = "Toyota"; } @@ -55,13 +56,12 @@ x = mavoiture.fabricant; // x aura la valeur "Honda" maFonction(mavoiture); y = mavoiture.fabricant; // y aura la valeur "Toyota" // (la propriété fabricant a été modifiée par la fonction) -</pre> +``` -<div class="note"> -<p><strong>Note :</strong> Affecter un nouvel objet au paramètre n'aura <strong>pas</strong> d'effet en dehors de la fonction car cela revient à changer la valeur du paramètre plutôt que la valeur d'une des propriétés de l'objet. Par exemple :</p> -</div> +> **Note :** Affecter un nouvel objet au paramètre n'aura **pas** d'effet en dehors de la fonction car cela revient à changer la valeur du paramètre plutôt que la valeur d'une des propriétés de l'objet. Par exemple : -<pre class="brush: js">function maFonction(monObjet) { +```js +function maFonction(monObjet) { monObjet = {fabricant: "Ford", modèle: "Focus", année: 2006}; } @@ -72,78 +72,86 @@ x = mavoiture.fabricant; // x reçoit la valeur "Honda" maFonction(mavoiture); y = mavoiture.fabricant; // y reçoit la valeur "Honda" -</pre> +``` -<p>Dans le premier exemple, l'objet <code>mavoiture </code>était passé à la fonction <code>maFonction</code> qui le modifiait. Dans le second exemple, la fonction n'a pas modifié l'objet qui avait été passé en argument, elle a créé une nouvelle variable locale, possédant le même nom que l'objet global passé en argument : il n'y a donc pas de modifications sur cet objet global.</p> +Dans le premier exemple, l'objet `mavoiture `était passé à la fonction `maFonction` qui le modifiait. Dans le second exemple, la fonction n'a pas modifié l'objet qui avait été passé en argument, elle a créé une nouvelle variable locale, possédant le même nom que l'objet global passé en argument : il n'y a donc pas de modifications sur cet objet global. -<h3 id="Les_expressions_de_fonction">Les expressions de fonction</h3> +### Les expressions de fonction -<p>Syntaxiquement, la déclaration de fonction utilisée ci-dessus est une instruction. On peut également créer une fonction grâce à une <strong><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">expression de fonction</a></strong>. De telles fonctions peuvent être <strong>anonymes</strong> (ne pas avoir de nom correspondant). La fonction <code>carré </code>aurait pu être définie de la façon suivante :</p> +Syntaxiquement, la déclaration de fonction utilisée ci-dessus est une instruction. On peut également créer une fonction grâce à une **[expression de fonction](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function)**. De telles fonctions peuvent être **anonymes** (ne pas avoir de nom correspondant). La fonction `carré `aurait pu être définie de la façon suivante : -<pre class="brush: js">var carré = function (nombre) { return nombre * nombre }; -var x = carré(4); //x reçoit la valeur 16</pre> +```js +var carré = function (nombre) { return nombre * nombre }; +var x = carré(4); //x reçoit la valeur 16 +``` -<p>Cependant, un nom peut être utilisé dans une expression de fonction, ce afin de l'utiliser dans la fonction (récursivité) ou afin de l'identifier dans les appels tracés par un éventuel débogueur :</p> +Cependant, un nom peut être utilisé dans une expression de fonction, ce afin de l'utiliser dans la fonction (récursivité) ou afin de l'identifier dans les appels tracés par un éventuel débogueur : -<pre class="brush: js">var factorielle = function fac(n) { return n < 2 ? 1 : n * fac(n - 1) }; +```js +var factorielle = function fac(n) { return n < 2 ? 1 : n * fac(n - 1) }; console.log(factorielle(3)); -</pre> +``` -<p>Les expressions de fonction sont pratiques lorsqu'il s'agit de passer une fonction comme argument d'une autre fonction. Dans l'exemple qui suit, la fonction <code>map</code> est définie et appelée avec une fonction anonyme comme premier argument :</p> +Les expressions de fonction sont pratiques lorsqu'il s'agit de passer une fonction comme argument d'une autre fonction. Dans l'exemple qui suit, la fonction `map` est définie et appelée avec une fonction anonyme comme premier argument : -<pre class="brush: js">function map(f, a) { +```js +function map(f, a) { var resultat = []; // Créer un nouveau tableau Array for (var i = 0; i != a.length; i++) resultat[i] = f(a[i]); return resultat; } -</pre> +``` -<p>Le code suivant applique la fonction <code>cube</code> sur chacun des éléments du tableau :</p> +Le code suivant applique la fonction `cube` sur chacun des éléments du tableau : -<pre class="brush: js">var cube = function(x) { return x * x * x}; // Une expression de fonction +```js +var cube = function(x) { return x * x * x}; // Une expression de fonction map(cube, [0, 1, 2, 5, 10]); -</pre> +``` -<p>Le résultat de la dernière instruction est le tableau [0, 1, 8, 125, 1000].</p> +Le résultat de la dernière instruction est le tableau \[0, 1, 8, 125, 1000]. -<p>En JavaScript, une fonction peut être définie selon une condition. Le fragment de code qui suit définit une fonction seulement si <code>num</code> vaut 0 :</p> +En JavaScript, une fonction peut être définie selon une condition. Le fragment de code qui suit définit une fonction seulement si `num` vaut 0 : -<pre class="brush: js">var maFonction; +```js +var maFonction; if (num === 0){ maFonction = function(monObjet) { monObjet.fabricant = "Toyota" } -}</pre> +} +``` -<p>Une autre façon de définir des fonctions est d'utiliser le constructeur de l'objet {{jsxref("Function")}} afin de créer des fonctions à partir d'une chaîne lors de l'exécution, de la même façon que {{jsxref("Objets_globaux/eval", "eval()")}}.</p> +Une autre façon de définir des fonctions est d'utiliser le constructeur de l'objet {{jsxref("Function")}} afin de créer des fonctions à partir d'une chaîne lors de l'exécution, de la même façon que {{jsxref("Objets_globaux/eval", "eval()")}}. -<p>Une <strong>méthode</strong> est une fonction étant une propriété d'un objet. Vous trouverez plus de détails sur ces éléments dans le chapitre suivant du guide : <a href="/fr/docs/JavaScript/Guide/Utiliser_les_objets">Utiliser les objets</a>.</p> +Une **méthode** est une fonction étant une propriété d'un objet. Vous trouverez plus de détails sur ces éléments dans le chapitre suivant du guide : [Utiliser les objets](/fr/docs/JavaScript/Guide/Utiliser_les_objets). -<h2 id="Appeler_des_fonctions">Appeler des fonctions</h2> +## Appeler des fonctions -<p>La seule définition d'une fonction ne permet pas d'exécuter la fonction. Cela permet de lui donner un nom et de définir ce qui doit être fait lorsque la fonction est appelée. <strong>Appeler</strong> la fonction permet d'effectuer les actions des instructions avec les paramètres indiqués. Par exemple, si on définit la fonction <code>carré</code>, on peut l'appeler de la façon suivante :</p> +La seule définition d'une fonction ne permet pas d'exécuter la fonction. Cela permet de lui donner un nom et de définir ce qui doit être fait lorsque la fonction est appelée. **Appeler** la fonction permet d'effectuer les actions des instructions avec les paramètres indiqués. Par exemple, si on définit la fonction `carré`, on peut l'appeler de la façon suivante : -<pre class="brush: js">carré(5); -</pre> +```js +carré(5); +``` -<p>Cette instruction appellera la fonction avec un argument valant 5. La fonction exécute ses instructions et renvoie la valeur 25.</p> +Cette instruction appellera la fonction avec un argument valant 5. La fonction exécute ses instructions et renvoie la valeur 25. -<p>Les fonctions doivent appartenir à la portée dans laquelle elles sont appelées. En revanche, la déclaration d'une fonction peut être faite après l'appel :</p> +Les fonctions doivent appartenir à la portée dans laquelle elles sont appelées. En revanche, la déclaration d'une fonction peut être faite après l'appel : -<pre class="brush: js">console.log(carré(5)); +```js +console.log(carré(5)); /* ... */ function carré(n) { return n*n } -</pre> +``` -<p>La portée d'une fonction est la fonction dans laquelle elle est déclarée ou le programme entier si elle est déclarée au niveau le plus haut.</p> +La portée d'une fonction est la fonction dans laquelle elle est déclarée ou le programme entier si elle est déclarée au niveau le plus haut. -<div class="note"> -<p><strong>Note :</strong> Cela ne fonctionne que si la définition de la fonction utilise la syntaxe précédente (<code>function nomFonction(){}</code>). Le code ci-dessous ne fonctionnera pas :</p> -</div> +> **Note :** Cela ne fonctionne que si la définition de la fonction utilise la syntaxe précédente (`function nomFonction(){}`). Le code ci-dessous ne fonctionnera pas : -<pre class="example-bad brush: js">console.log(carré); // La fonction carré est remontée/hoisted mais vaut undefined +```js example-bad +console.log(carré); // La fonction carré est remontée/hoisted mais vaut undefined console.log(carré(5)); // TypeError: carré is not a function var carré = function (n) { return n * n; @@ -157,37 +165,40 @@ console.log(carré2(5)); // TypeError: carré2 is not a function let carré2 = function (n) { return n * n; } -</pre> +``` -<p>Les arguments d'une fonction ne sont pas limités aux chaînes de caractères et aux nombres. Il est possible de passer des objets. La fonction <code>show_props</code> (définie dans le chapitre sur <a href="/fr/docs/JavaScript/Guide/Utiliser_les_objets">l'utilisation des objets</a>) est un exemple de fonction utilisant un argument qui est un objet.</p> +Les arguments d'une fonction ne sont pas limités aux chaînes de caractères et aux nombres. Il est possible de passer des objets. La fonction `show_props` (définie dans le chapitre sur [l'utilisation des objets](/fr/docs/JavaScript/Guide/Utiliser_les_objets)) est un exemple de fonction utilisant un argument qui est un objet. -<p>Une fonction peut être récursive, c'est-à-dire qu'elle peut s'appeler elle-même. Voici la fonction qui calcule récursivement la factorielle d'un nombre :</p> +Une fonction peut être récursive, c'est-à-dire qu'elle peut s'appeler elle-même. Voici la fonction qui calcule récursivement la factorielle d'un nombre : -<pre class="brush: js">function factorielle(n){ +```js +function factorielle(n){ if ((n === 0) || (n === 1)) return 1; else return (n * factorielle(n - 1)); } -</pre> +``` -<p>On peut ensuite calculer les factorielles des nombres 1 à 5 :</p> +On peut ensuite calculer les factorielles des nombres 1 à 5 : -<pre class="brush: js">var a, b, c, d, e; +```js +var a, b, c, d, e; a = factorielle(1); // a reçoit la valeur 1 b = factorielle(2); // b reçoit la valeur 2 c = factorielle(3); // c reçoit la valeur 6 d = factorielle(4); // d reçoit la valeur 24 e = factorielle(5); // e reçoit la valeur 120 -</pre> +``` -<p>Il existe d'autres façons d'appeler des fonctions. Il existe souvent des cas où une fonction doit être appelée dynamiquement, où le nombre d'arguments peut varier, où le contexte de l'appel d'une fonction doit être créé en fonction d'un objet déterminé lors de l'exécution. Les fonctions sont des objets, en tant que tels, elles possèdent des méthodes (voir la page sur l'objet {{jsxref("Function")}}). L'une d'entre elles, {{jsxref("Function.apply","apply()")}} peut être utilisée pour réaliser le dernier cas de figure (exécution d'une fonction avec un objet déterminé à l'exécution).</p> +Il existe d'autres façons d'appeler des fonctions. Il existe souvent des cas où une fonction doit être appelée dynamiquement, où le nombre d'arguments peut varier, où le contexte de l'appel d'une fonction doit être créé en fonction d'un objet déterminé lors de l'exécution. Les fonctions sont des objets, en tant que tels, elles possèdent des méthodes (voir la page sur l'objet {{jsxref("Function")}}). L'une d'entre elles, {{jsxref("Function.apply","apply()")}} peut être utilisée pour réaliser le dernier cas de figure (exécution d'une fonction avec un objet déterminé à l'exécution). -<h2 id="Portée_d'une_fonction">Portée d'une fonction</h2> +## Portée d'une fonction -<p>On ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonction : ces variables n'existent que dans la portée de la fonction. En revanche, une fonction peut accéder aux différentes variables et fonctions qui appartiennent à la portée dans laquelle elle est définie. Une fonction définie dans une autre fonction peut également accéder à toutes les variables de la fonction « parente » et à toute autre variable accessible depuis la fonction « parente ».</p> +On ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonction : ces variables n'existent que dans la portée de la fonction. En revanche, une fonction peut accéder aux différentes variables et fonctions qui appartiennent à la portée dans laquelle elle est définie. Une fonction définie dans une autre fonction peut également accéder à toutes les variables de la fonction « parente » et à toute autre variable accessible depuis la fonction « parente ». -<pre class="brush: js">// Les variables suivantes sont globales +```js +// Les variables suivantes sont globales var num1 = 20, num2 = 3, nom = "Licorne"; @@ -212,112 +223,117 @@ function getScore () { } getScore(); // Renvoie "Licorne a marqué 5" -</pre> +``` -<h2 id="Portée_et_pile_de_fonctions">Portée et pile de fonctions</h2> +## Portée et pile de fonctions -<h3 id="La_récursivité">La récursivité</h3> +### La récursivité -<p>Une fonction peut faire référence à elle-même et s'appeler elle-même. Il existe trois moyens pour qu'une fonction fasse référence à elle-même :</p> +Une fonction peut faire référence à elle-même et s'appeler elle-même. Il existe trois moyens pour qu'une fonction fasse référence à elle-même : -<ol> - <li>Le nom de la fonction</li> - <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code></li> - <li>Une variable de la portée qui fait référence à la fonction</li> -</ol> +1. Le nom de la fonction +2. [`arguments.callee`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee) +3. Une variable de la portée qui fait référence à la fonction -<p>Par exemple, avec la définition de fonction suivante :</p> +Par exemple, avec la définition de fonction suivante : -<pre class="brush: js">var toto = function truc() { +```js +var toto = function truc() { // les instructions de la fonction -};</pre> +}; +``` -<p>Dans le corps de la fonction, ces trois éléments seront équivalents :</p> +Dans le corps de la fonction, ces trois éléments seront équivalents : -<ol> - <li><code>truc()</code></li> - <li><code>arguments.callee()</code></li> - <li><code>toto()</code></li> -</ol> +1. `truc()` +2. `arguments.callee()` +3. `toto()` -<p>Une fonction qui s'appelle elle-même est appelée une fonction <em>récursive</em>. Sous certains aspects, une récursion est semblable à une boucle : toutes les deux exécutent le même code plusieurs fois et toutes les deux requièrent une condition d'arrêt (pour éviter une boucle ou une récursion infinie). Par exemple, ce fragment de code utilisant une boucle :</p> +Une fonction qui s'appelle elle-même est appelée une fonction _récursive_. Sous certains aspects, une récursion est semblable à une boucle : toutes les deux exécutent le même code plusieurs fois et toutes les deux requièrent une condition d'arrêt (pour éviter une boucle ou une récursion infinie). Par exemple, ce fragment de code utilisant une boucle : -<pre class="brush: js">var x = 0; -while (x < 10) { // "x < 10" représente la condition d'arrêt +```js +var x = 0; +while (x < 10) { // "x < 10" représente la condition d'arrêt // faire quelque chose x++; -}</pre> +} +``` -<p>pourra être converti en une fonction récursive de la façon suivante :</p> +pourra être converti en une fonction récursive de la façon suivante : -<pre class="brush: js">function boucle(x) { - if (x >= 10) // "x >= 10" représente la condition d'arrêt (équivalent à "!(x < 10)") +```js +function boucle(x) { + if (x >= 10) // "x >= 10" représente la condition d'arrêt (équivalent à "!(x < 10)") return; // faire quelque chose boucle(x + 1); // l'appel récursif } -boucle(0);</pre> +boucle(0); +``` -<p>Malgré cela, certains algorithmes ne peuvent pas être convertis en boucles itératives. Ainsi, récupérer l'ensemble des nœuds d'un arbre (le <a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">DOM</a> par exemple) se fait plus simplement en utilisant la récursivité :</p> +Malgré cela, certains algorithmes ne peuvent pas être convertis en boucles itératives. Ainsi, récupérer l'ensemble des nœuds d'un arbre (le [DOM](/fr/docs/Web/API/Référence_du_DOM_Gecko) par exemple) se fait plus simplement en utilisant la récursivité : -<pre class="brush: js">function parcourirArbre(noeud) { +```js +function parcourirArbre(noeud) { if (noeud === null) // return; // faire quelque chose avec le noeud - for (var i = 0; i < noeud.childNodes.length; i++) { + for (var i = 0; i < noeud.childNodes.length; i++) { parcourirArbre(noeud.childNodes[i]); } -}</pre> +} +``` -<p>Contrairement à l'exemple précédent avec la fonction <code>boucle</code>, ici, chaque appel récursif entraîne lui-même plusieurs appels (et non un seul).</p> +Contrairement à l'exemple précédent avec la fonction `boucle`, ici, chaque appel récursif entraîne lui-même plusieurs appels (et non un seul). -<p>Théoriquement, il est possible de convertir tout algorithme récursif en un algorithme non récursif (avec des boucles par exemple). Généralement, la logique obtenue est plus complexe et nécessite l'utilisation d'une <a href="https://fr.wikipedia.org/wiki/Pile_%28informatique%29">pile</a>. La récursivité utilise également une pile, la pile de fonction.</p> +Théoriquement, il est possible de convertir tout algorithme récursif en un algorithme non récursif (avec des boucles par exemple). Généralement, la logique obtenue est plus complexe et nécessite l'utilisation d'une [pile](https://fr.wikipedia.org/wiki/Pile_%28informatique%29). La récursivité utilise également une pile, la pile de fonction. -<p>Ce type de « comportement » peut-être observé avec l'exemple suivant :</p> +Ce type de « comportement » peut-être observé avec l'exemple suivant : -<pre class="brush: js">function toto(i) { - if (i < 0) +```js +function toto(i) { + if (i < 0) return; console.log('début : ' + i); toto(i - 1); console.log('fin : ' + i); } -toto(3);</pre> +toto(3); +``` -<p>qui affichera :</p> +qui affichera : -<pre class="brush: js">début : 3 +```js +début : 3 début : 2 début : 1 début : 0 fin : 0 fin : 1 fin : 2 -fin : 3</pre> +fin : 3 +``` -<h3 id="Fonctions_imbriquées_et_fermetures">Fonctions imbriquées et fermetures</h3> +### Fonctions imbriquées et fermetures -<p>Il est possible d'imbriquer une fonction dans une autre fonction. La portée de la fonction fille (celle qui est imbriquée) n'est pas contenue dans la portée de la fonction parente. En revanche, la fonction fille bénéficie bien des informations de la fonction parente grâce à sa portée. On a ce qu'on appelle une fermeture (<em>closure</em> en anglais). Une fermeture est une expression (généralement une fonction) qui accède à des variables libres ainsi qu'à un environnement qui lie ces variables (ce qui « ferme » l'expression).</p> +Il est possible d'imbriquer une fonction dans une autre fonction. La portée de la fonction fille (celle qui est imbriquée) n'est pas contenue dans la portée de la fonction parente. En revanche, la fonction fille bénéficie bien des informations de la fonction parente grâce à sa portée. On a ce qu'on appelle une fermeture (_closure_ en anglais). Une fermeture est une expression (généralement une fonction) qui accède à des variables libres ainsi qu'à un environnement qui lie ces variables (ce qui « ferme » l'expression). -<p>Une fonction imbriquée étant une fermeture, cela signifie qu'une fonction imbriquée peut en quelque sorte hériter des arguments et des variables de la fonction parente.</p> +Une fonction imbriquée étant une fermeture, cela signifie qu'une fonction imbriquée peut en quelque sorte hériter des arguments et des variables de la fonction parente. -<p>En résumé :</p> +En résumé : -<ul> - <li>La fonction imbriquée ne peut être utilisée qu'à partir des instructions de la fonction parente.</li> -</ul> +- La fonction imbriquée ne peut être utilisée qu'à partir des instructions de la fonction parente. -<ul> - <li>La fonction imbriquée forme une fermeture : elle peut utiliser les arguments et les variables de la fonction parente. En revanche, la fonction parente ne peut pas utiliser les arguments et les variables de la fonction fille.</li> -</ul> +<!----> -<div class="note"> -<p><strong>Note :</strong> Sur les fermetures, voir également <a href="/fr/docs/Web/JavaScript/Closures">l'article à ce sujet</a>.</p> -</div> +- La fonction imbriquée forme une fermeture : elle peut utiliser les arguments et les variables de la fonction parente. En revanche, la fonction parente ne peut pas utiliser les arguments et les variables de la fonction fille. -<p>L'exemple qui suit illustre l'imbrication de fonctions :</p> +> **Note :** Sur les fermetures, voir également [l'article à ce sujet](/fr/docs/Web/JavaScript/Closures). -<pre class="brush: js">function ajouteCarrés(a, b) { +L'exemple qui suit illustre l'imbrication de fonctions : + +```js +function ajouteCarrés(a, b) { function carré(x) { return x * x; } @@ -325,11 +341,13 @@ fin : 3</pre> } a = ajouteCarrés(2,3); // renvoie 13 b = ajouteCarrés(3,4); // renvoie 25 -c = ajouteCarrés(4,5); // renvoie 41</pre> +c = ajouteCarrés(4,5); // renvoie 41 +``` -<p>La fonction interne étant une fermeture, on peut appeler la fonction parente afin de définir les arguments pour la fonction englobante et ceux de la fonction fille :</p> +La fonction interne étant une fermeture, on peut appeler la fonction parente afin de définir les arguments pour la fonction englobante et ceux de la fonction fille : -<pre class="brush: js">function parente(x) { +```js +function parente(x) { function fille(y) { return x + y; } @@ -338,21 +356,23 @@ c = ajouteCarrés(4,5); // renvoie 41</pre> fn_fille = parente(3); // Fournit une fonction qui ajoute 3 à ce qu'on lui donnera résultat = fn_fille(5); // renvoie 8 -résultat1 = parente(3)(5); // renvoie 8</pre> +résultat1 = parente(3)(5); // renvoie 8 +``` -<h3 id="Préservation_des_variables">Préservation des variables</h3> +### Préservation des variables -<p>Dans l'exemple précédent, <code>x</code> a été « préservé » lorsque la fonction <code>fille</code> a été renvoyée. Une fermeture conserve les arguments et les variables de chaque portée qu'elle référence. Chaque appel à la fonction parente pouvant fournir un contexte différents selon les arguments, cela entraînera la création d'une nouvelle fermeture. La mémoire associée ne pourra être libérée que lorsque la fonction <code>fille</code> ne sera plus accessible.</p> +Dans l'exemple précédent, `x` a été « préservé » lorsque la fonction `fille` a été renvoyée. Une fermeture conserve les arguments et les variables de chaque portée qu'elle référence. Chaque appel à la fonction parente pouvant fournir un contexte différents selon les arguments, cela entraînera la création d'une nouvelle fermeture. La mémoire associée ne pourra être libérée que lorsque la fonction `fille` ne sera plus accessible. -<p>Ce mode de fonctionnement n'est pas différent de celui des références vers les objets. Cependant, il est souvent plus compliqué à détecter car les références ne sont pas définies explicitement dans le code et car il n'est pas possible de les inspecter.</p> +Ce mode de fonctionnement n'est pas différent de celui des références vers les objets. Cependant, il est souvent plus compliqué à détecter car les références ne sont pas définies explicitement dans le code et car il n'est pas possible de les inspecter. -<h3 id="Imbriquer_plusieurs_fonctions">Imbriquer plusieurs fonctions</h3> +### Imbriquer plusieurs fonctions -<p>Il est possible d'imbriquer des fonctions sur plus de deux niveaux, par exemple, on peut avoir une fonction A qui contient une fonction B qui contient une fonction C. Les fonctions B et C sont des fermetures et B peut accéder à la portée de A, C peut accéder à la portée de B. Ainsi, C accède à la portée de B qui lui accède à la portée de A, C accède donc à la portée de A (transitivité). Les fermetures peuvent donc contenir plusieurs portées, c'est ce qu'on appelle le <em>chaînage</em> de portées.</p> +Il est possible d'imbriquer des fonctions sur plus de deux niveaux, par exemple, on peut avoir une fonction A qui contient une fonction B qui contient une fonction C. Les fonctions B et C sont des fermetures et B peut accéder à la portée de A, C peut accéder à la portée de B. Ainsi, C accède à la portée de B qui lui accède à la portée de A, C accède donc à la portée de A (transitivité). Les fermetures peuvent donc contenir plusieurs portées, c'est ce qu'on appelle le _chaînage_ de portées. -<p>Par exemple :</p> +Par exemple : -<pre class="brush: js">function A(x) { +```js +function A(x) { function B(y) { function C(z) { console.log(x + y + z); @@ -361,38 +381,40 @@ résultat1 = parente(3)(5); // renvoie 8</pre> } B(2); } -A(1); // affichera 6 (1 + 2 + 3)</pre> +A(1); // affichera 6 (1 + 2 + 3) +``` -<p>Dans cet exemple <code>C</code> accède au <code>y</code> de <code>B</code> et au <code>x</code> de <code>A</code>. Ceci est rendu possible car :</p> +Dans cet exemple `C` accède au `y` de `B` et au `x` de `A`. Ceci est rendu possible car : -<ol> - <li><code>B</code> est une fermeture qui contient <code>A</code>, autrement dit <code>B</code> peut accéder aux arguments et aux variables de <code>A</code>.</li> - <li><code>C</code> est une fermeture qui contient <code>B</code>.</li> - <li>La fermeture de <code>B</code> contient <code>A</code> donc la fermeture de <code>C</code> contient <code>A</code>, <code>C</code> peut ainsi accéder aux arguments et aux variables de <code>B</code> <em>et</em> <code>A</code>. On dit que <code>C</code> <em>chaîne</em> les portées de <code>B</code> et de <code>A</code> (dans cet ordre).</li> -</ol> +1. `B` est une fermeture qui contient `A`, autrement dit `B` peut accéder aux arguments et aux variables de `A`. +2. `C` est une fermeture qui contient `B`. +3. La fermeture de `B` contient `A` donc la fermeture de `C` contient `A`, `C` peut ainsi accéder aux arguments et aux variables de `B` _et_ `A`. On dit que `C` _chaîne_ les portées de `B` et de `A` (dans cet ordre). -<p>La réciproque n'est pas vraie. <code>A</code> ne peut pas accéder à <code>C</code>, car <code>A</code> ne peut pas accéder aux arguments ou aux variables de <code>B</code>, or <code>C</code> est une variable de <code>B</code>. De cette façon, <code>C</code> reste privée en dehors de <code>B</code>.</p> +La réciproque n'est pas vraie. `A` ne peut pas accéder à `C`, car `A` ne peut pas accéder aux arguments ou aux variables de `B`, or `C` est une variable de `B`. De cette façon, `C` reste privée en dehors de `B`. -<h3 id="Conflits_de_nommage">Conflits de nommage</h3> +### Conflits de nommage -<p>Lorsque deux arguments ou variables des portées d'une fermeture ont le même nom, il y a un conflit de noms. Dans ces cas, ce sera la portée la plus imbriquée qui prendra la priorité sur le nom, la portée la plus « externe » aura la priorité la plus faible pour les noms de variables. Du point de vue de la chaîne des portées, la première portée sur la chaîne est la portée la plus imbriquée et la dernière est la portée située le plus à l'extérieur :</p> +Lorsque deux arguments ou variables des portées d'une fermeture ont le même nom, il y a un conflit de noms. Dans ces cas, ce sera la portée la plus imbriquée qui prendra la priorité sur le nom, la portée la plus « externe » aura la priorité la plus faible pour les noms de variables. Du point de vue de la chaîne des portées, la première portée sur la chaîne est la portée la plus imbriquée et la dernière est la portée située le plus à l'extérieur : -<pre class="brush: js">function externe() { +```js +function externe() { var x = 10; function interne(x) { return x; } return interne; } -résultat = externe()(20); // renvoie 20 et pas 10</pre> +résultat = externe()(20); // renvoie 20 et pas 10 +``` -<p>Le conflit se produit à l'instruction <code>return x</code> entre le paramètre x de la fonction <code>interne</code> et la variable <code>x</code> de la fonction <code>externe</code>. La chaîne de portée est ici {<code>interne</code>, <code>externe</code>, objet global}. Ainsi, le paramètre <code>x</code> de <code>interne</code> a la priorité sur la variable <code>x</code> de la fonction <code>externe</code>, le résultat obtenu est donc 20 et non 10.</p> +Le conflit se produit à l'instruction `return x` entre le paramètre x de la fonction `interne` et la variable `x` de la fonction `externe`. La chaîne de portée est ici {`interne`, `externe`, objet global}. Ainsi, le paramètre `x` de `interne` a la priorité sur la variable `x` de la fonction `externe`, le résultat obtenu est donc 20 et non 10. -<h2 id="Fermetures_(closures)">Fermetures (<em>closures</em>)</h2> +## Fermetures (_closures_) -<p>Les fermetures sont l'une des fonctionnalités les plus intéressantes de JavaScript. Comme on l'a vu précédemment, JavaScript permet d'imbriquer des fonctions et la fonction interne aura accès aux variables et paramètres de la fonction parente. À l'inverse, la fonction parente ne pourra pas accéder aux variables liées à la fonction interne. Cela fournit une certaine sécurité pour les variables de la fonction interne. De plus, si la fonction interne peut exister plus longtemps que la fonction parente, les variables et fonctions de la fonction parente pourront exister au travers de la fonction interne. On crée une fermeture lorsque la fonction interne est disponible en dehors de la fonction parente.</p> +Les fermetures sont l'une des fonctionnalités les plus intéressantes de JavaScript. Comme on l'a vu précédemment, JavaScript permet d'imbriquer des fonctions et la fonction interne aura accès aux variables et paramètres de la fonction parente. À l'inverse, la fonction parente ne pourra pas accéder aux variables liées à la fonction interne. Cela fournit une certaine sécurité pour les variables de la fonction interne. De plus, si la fonction interne peut exister plus longtemps que la fonction parente, les variables et fonctions de la fonction parente pourront exister au travers de la fonction interne. On crée une fermeture lorsque la fonction interne est disponible en dehors de la fonction parente. -<pre class="brush: js">var animal = function(nom) { // La fonction externe utilise un paramètre "nom" +```js +var animal = function(nom) { // La fonction externe utilise un paramètre "nom" var getNom = function () { return nom; // La fonction interne accède à la variable "nom" de la fonction externe } @@ -401,11 +423,13 @@ résultat = externe()(20); // renvoie 20 et pas 10</pre> monAnimal = animal("Licorne"); -monAnimal(); // Renvoie "Licorne"</pre> +monAnimal(); // Renvoie "Licorne" +``` -<p>Bien entendu, dans la pratique, les cas peuvent être plus complexes. On peut renvoyer un objet qui contient des méthodes manipulant les variables internes de la fonction parente.</p> +Bien entendu, dans la pratique, les cas peuvent être plus complexes. On peut renvoyer un objet qui contient des méthodes manipulant les variables internes de la fonction parente. -<pre class="brush: js">var créerAnimal = function (nom) { +```js +var créerAnimal = function (nom) { var sexe; return { @@ -422,7 +446,7 @@ monAnimal(); // Renvoie "Licorne"</pre> }, setSexe: function(nouveauSexe) { - if (typeof nouveauSexe == "string" && (nouveauSexe.toLowerCase() == "mâle" || nouveauSexe.toLowerCase() == "femelle")) { + if (typeof nouveauSexe == "string" && (nouveauSexe.toLowerCase() == "mâle" || nouveauSexe.toLowerCase() == "femelle")) { sexe = nouveauSexe; } } @@ -435,126 +459,141 @@ animal.getNom(); // Licorne animal.setNom("Bobby"); animal.setSexe("mâle"); animal.getSexe(); // mâle -animal.getNom(); // Bobby</pre> +animal.getNom(); // Bobby +``` -<p>Dans le code précédent, la variable <code>nom</code> est de la fonction externe est accessible depuis les fonctions internes. Il est impossible d'accéder aux variables internes en dehors des fonctions internes. Les variables internes agissent comme des coffres-forts pour les fonctions internes. Elles permettent d'avoir un accès persistent et encapsulé aux données internes. Pour les fonctions, il n'est pas nécessaire de les affecter à une variable ou même de les nommer.</p> +Dans le code précédent, la variable `nom` est de la fonction externe est accessible depuis les fonctions internes. Il est impossible d'accéder aux variables internes en dehors des fonctions internes. Les variables internes agissent comme des coffres-forts pour les fonctions internes. Elles permettent d'avoir un accès persistent et encapsulé aux données internes. Pour les fonctions, il n'est pas nécessaire de les affecter à une variable ou même de les nommer. -<pre class="brush: js">var getCode = (function (){ - var codeAPI = "0]Eal(eh&2"; // Un code qu'on ne souhaite pas diffuser ni modifier +```js +var getCode = (function (){ + var codeAPI = "0]Eal(eh&2"; // Un code qu'on ne souhaite pas diffuser ni modifier return function () { return codeAPI; }; })(); -getCode(); // Renvoie la valeur du code</pre> +getCode(); // Renvoie la valeur du code +``` -<p>Il y a malgré tout quelques pièges auxquels il faut faire attention lorsqu'on utilise les fermetures. Si une fonction imbriquée définit une variable avec le même nom que le nom d'une variable de la portée externe, il n'y aura plus aucun moyen d'accéder à la variable.</p> +Il y a malgré tout quelques pièges auxquels il faut faire attention lorsqu'on utilise les fermetures. Si une fonction imbriquée définit une variable avec le même nom que le nom d'une variable de la portée externe, il n'y aura plus aucun moyen d'accéder à la variable. -<pre class="brush: js">var créerAnimal = function(nom) { // La fonction externe définit une variable appelée "nom" +```js +var créerAnimal = function(nom) { // La fonction externe définit une variable appelée "nom" return { setNom: function(nom) { // La fonction imbriquée définit une variable appelée "nom" nom = nom; // ??? comment accéder à la variable "nom" définie par la fonction externe } } -}</pre> +} +``` -<p>L<code>'opérateur </code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this"><code>this</code></a> doit être traité avec précaution dans les fermetures. Attention, <code>this</code> fait référence au contexte où la fonction est appelée et non à l'endroit où il est défini.</p> +L`'opérateur `[`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) doit être traité avec précaution dans les fermetures. Attention, `this` fait référence au contexte où la fonction est appelée et non à l'endroit où il est défini. -<h2 id="Utiliser_l'objet_arguments">Utiliser l'objet <code>arguments</code></h2> +## Utiliser l'objet `arguments` -<p>Les arguments d'une fonction sont maintenus dans un objet semblable à un tableau. Dans une fonction, il est possible d'utiliser les arguments passés à la fonction de la façon suivante :</p> +Les arguments d'une fonction sont maintenus dans un objet semblable à un tableau. Dans une fonction, il est possible d'utiliser les arguments passés à la fonction de la façon suivante : -<pre class="brush: js">arguments[i]</pre> +```js +arguments[i] +``` -<p>où <code>i</code> représente l'index ordinal de l'argument (le premier argument ayant un indice à 0). On accède donc au premier argument avec <code>arguments[0]</code>. Le nombre total d'arguments est fourni grâce à <code>arguments.length</code>.</p> +où `i` représente l'index ordinal de l'argument (le premier argument ayant un indice à 0). On accède donc au premier argument avec `arguments[0]`. Le nombre total d'arguments est fourni grâce à `arguments.length`. -<p>En utilisant l'objet <code>arguments</code>, il est possible de recenser les arguments supplémentaires fournis à la fonction si jamais il y a plus d'arguments fournis que requis. Cet objet est souvent utile si on ne connaît pas le nombre d'arguments passés à la fonction. La propriété <code>arguments.length</code> permet de déterminer le nombre d'arguments réellement passés à la fonction. On peut donc ensuite accéder aux différents arguments en parcourant l'objet <code>arguments</code>.</p> +En utilisant l'objet `arguments`, il est possible de recenser les arguments supplémentaires fournis à la fonction si jamais il y a plus d'arguments fournis que requis. Cet objet est souvent utile si on ne connaît pas le nombre d'arguments passés à la fonction. La propriété `arguments.length` permet de déterminer le nombre d'arguments réellement passés à la fonction. On peut donc ensuite accéder aux différents arguments en parcourant l'objet `arguments`. -<p>Par exemple, on peut construire une fonction qui concatène plusieurs chaînes. Le seul argument formellement défini sera la chaîne utilisée pour concaténer les différentes chaînes. On peut définir la fonction de la façon suivante :</p> +Par exemple, on peut construire une fonction qui concatène plusieurs chaînes. Le seul argument formellement défini sera la chaîne utilisée pour concaténer les différentes chaînes. On peut définir la fonction de la façon suivante : -<pre class="brush: js">function monConcat(séparateur) { +```js +function monConcat(séparateur) { var result = ""; // on initialise la liste var i; // on parcourt les arguments - for (i = 1; i < arguments.length; i++) { + for (i = 1; i < arguments.length; i++) { result += arguments[i] + séparateur; } return result; -}</pre> +} +``` -<p>On peut passer autant d'arguments que nécessaire à cette fonction. Ils seront tous concaténés dans une chaîne finale. Ainsi, on aura :</p> +On peut passer autant d'arguments que nécessaire à cette fonction. Ils seront tous concaténés dans une chaîne finale. Ainsi, on aura : -<pre class="brush: js">// renverra "rouge, orange, bleu, " +```js +// renverra "rouge, orange, bleu, " monConcat(", ", "red", "orange", "blue"); // renverra "éléphant; girafe; lion; singe; " monConcat("; ", "éléphant", "girafe", "lion", "singe"); // renverra "sauge. basilic. origan. poivre. échalotte. " -monConcat(". ", "sauge", "basilic", "origan", "poivre", "échalotte");</pre> +monConcat(". ", "sauge", "basilic", "origan", "poivre", "échalotte"); +``` -<div class="note"> -<p><strong>Note :</strong> <code>arguments</code> est une variable « semblable » à un tableau. Mais ce n'est pas un tableau au sens strict. En effet, il possède un index numéroté ainsi qu'une propriété <code>length</code>. En revanche, il ne possède pas les méthodes classiques de manipulation des tableaux (Array).</p> -</div> +> **Note :** `arguments` est une variable « semblable » à un tableau. Mais ce n'est pas un tableau au sens strict. En effet, il possède un index numéroté ainsi qu'une propriété `length`. En revanche, il ne possède pas les méthodes classiques de manipulation des tableaux (Array). -<p>Voir la page sur l'objet {{jsxref("Function")}} dans la référence JavaScript pour plus d'informations.</p> +Voir la page sur l'objet {{jsxref("Function")}} dans la référence JavaScript pour plus d'informations. -<h2 id="Paramètres_des_fonctions">Paramètres des fonctions</h2> +## Paramètres des fonctions -<p>À partir d'ECMAScript 2015, deux sortes de paramètres sont introduites : les paramètres par défaut et les paramètres du reste.</p> +À partir d'ECMAScript 2015, deux sortes de paramètres sont introduites : les paramètres par défaut et les paramètres du reste. -<h3 id="Les_paramètres_par_défaut">Les paramètres par défaut</h3> +### Les paramètres par défaut -<p>En JavaScript, par défaut, les paramètres des fonctions vaudront <code>undefined</code>. Il peut toutefois être utile de définir une valeur par défaut différente. Les paramètres par défaut permettent de répondre à ce besoin.</p> +En JavaScript, par défaut, les paramètres des fonctions vaudront `undefined`. Il peut toutefois être utile de définir une valeur par défaut différente. Les paramètres par défaut permettent de répondre à ce besoin. -<p>Avant ECMAScript 2015, la stratégie pour manipuler des valeurs par défaut adaptées était de tester si la valeur du paramètre était indéfinie puis de lui affecter la valeur souhaitée si c'était le cas. Par exemple, dans le code qui suit, on ne fournit pas de valeur pour <code>b</code> dans l'appel, la valeur sera <code>undefined</code> lors de l'évaluation de <code>a*b</code> et l'appel à <code>multiplier</code> aurait renvoyé <code>NaN</code>. Pour éviter ça, la deuxième ligne définit une valeur par défaut au cas où <code>b</code> n'est pas renseigné :</p> +Avant ECMAScript 2015, la stratégie pour manipuler des valeurs par défaut adaptées était de tester si la valeur du paramètre était indéfinie puis de lui affecter la valeur souhaitée si c'était le cas. Par exemple, dans le code qui suit, on ne fournit pas de valeur pour `b` dans l'appel, la valeur sera `undefined` lors de l'évaluation de `a*b` et l'appel à `multiplier` aurait renvoyé `NaN`. Pour éviter ça, la deuxième ligne définit une valeur par défaut au cas où `b` n'est pas renseigné : -<pre class="brush: js">function multiplier(a, b) { +```js +function multiplier(a, b) { b = typeof b !== 'undefined' ? b : 1; return a*b; } multiplier(5); // 5 -</pre> +``` -<p>Si on peut utiliser les paramètres par défaut, il n'est plus nécessaire de faire l'opération à l'intérieur du corps de la fonction, il suffit de déclarer que la valeur par défaut pour <code>b</code> est 1 dans la signature de la fonction :</p> +Si on peut utiliser les paramètres par défaut, il n'est plus nécessaire de faire l'opération à l'intérieur du corps de la fonction, il suffit de déclarer que la valeur par défaut pour `b` est 1 dans la signature de la fonction : -<pre class="brush: js">function multiplier(a, b = 1) { +```js +function multiplier(a, b = 1) { return a*b; } -multiplier(5); // 5</pre> +multiplier(5); // 5 +``` -<p>Pour plus de détails, voir <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">la page sur les paramètres par défaut</a> dans la référence.</p> +Pour plus de détails, voir [la page sur les paramètres par défaut](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments) dans la référence. -<h3 id="Les_paramètres_du_reste">Les paramètres du reste</h3> +### Les paramètres du reste -<p>La syntaxe des <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">paramètres du reste</a> permet de représenter un nombre indéfini d'arguments contenus dans un tableau. Dans l'exemple suivant, on utilise les paramètres du reste pour collecter les arguments à partir du deuxième et jusqu'au dernier. Ces arguments sont multipliés par le premier. Dans cet exemple, on utilise une fonction fléchée, concept qui est présenté et illustré dans la section qui suit.</p> +La syntaxe des [paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste) permet de représenter un nombre indéfini d'arguments contenus dans un tableau. Dans l'exemple suivant, on utilise les paramètres du reste pour collecter les arguments à partir du deuxième et jusqu'au dernier. Ces arguments sont multipliés par le premier. Dans cet exemple, on utilise une fonction fléchée, concept qui est présenté et illustré dans la section qui suit. -<pre class="brush: js">function multiplier(facteur, ...lesArgs) { - return lesArgs.map(x => facteur * x); +```js +function multiplier(facteur, ...lesArgs) { + return lesArgs.map(x => facteur * x); } var arr = multiplier(2, 1, 2, 3); -console.log(arr); // [2, 4, 6]</pre> +console.log(arr); // [2, 4, 6] +``` + +## Fonctions fléchées -<h2 id="Fonctions_fléchées">Fonctions fléchées</h2> +[Une expression de fonction fléchée](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) permet d'utiliser une syntaxe plus concise que les expressions de fonctions classiques. Une telle fonction ne possède alors pas de valeur propre pour [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this), [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments), [`super`](/fr/docs/Web/JavaScript/Reference/Opérateurs/super) ou [`new.target`](/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target). Les fonctions fléchées sont nécessairement anonymes. -<p><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">Une expression de fonction fléchée</a> permet d'utiliser une syntaxe plus concise que les expressions de fonctions classiques. Une telle fonction ne possède alors pas de valeur propre pour <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">super</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target">new.target</a></code>. Les fonctions fléchées sont nécessairement anonymes.</p> +Les fonctions fléchées ont été introduites pour deux raisons principales : une syntaxe plus courte et l'absence de `this` rattaché à la fonction. Voir aussi [ce billet sur tech.mozfr.org sur les fonctions fléchées](https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees). -<p>Les fonctions fléchées ont été introduites pour deux raisons principales : une syntaxe plus courte et l'absence de <code>this</code> rattaché à la fonction. Voir aussi <a href="https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees">ce billet sur tech.mozfr.org sur les fonctions fléchées</a>.</p> -<p> </p> -<p> </p> -<h3 id="Concision_de_la_syntaxe">Concision de la syntaxe</h3> -<p>Dans certaines constructions fonctionnelles, on peut apprécier une syntaxe courte. Par exemple, si on compare les deux dernières lignes de ce fragment de code :</p> +### Concision de la syntaxe -<pre class="brush: js">var a = [ +Dans certaines constructions fonctionnelles, on peut apprécier une syntaxe courte. Par exemple, si on compare les deux dernières lignes de ce fragment de code : + +```js +var a = [ "Hydrogen", "Helium", "Lithium", @@ -563,14 +602,16 @@ console.log(arr); // [2, 4, 6]</pre> var a2 = a.map(function(s){ return s.length }); console.log(a2); // affiche [8, 6, 7, 9] -var a3 = a.map( s => s.length ); -console.log(a3); // affiche [8, 6, 7, 9]</pre> +var a3 = a.map( s => s.length ); +console.log(a3); // affiche [8, 6, 7, 9] +``` -<h3 id="Pas_de_this_distinct">Pas de <code>this</code> distinct</h3> +### Pas de `this` distinct -<p>Avant les fonctions fléchées, chaque nouvelle fonction définissait sa propre valeur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code> (un nouvel objet dans le cas d'un constructeur, <code>undefined</code> lors des appels en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, l'objet courant dans le cas d'une méthode, etc.). Cela pouvait poser quelques problèmes avec un style de programmation orienté objet.</p> +Avant les fonctions fléchées, chaque nouvelle fonction définissait sa propre valeur [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this) (un nouvel objet dans le cas d'un constructeur, `undefined` lors des appels en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), l'objet courant dans le cas d'une méthode, etc.). Cela pouvait poser quelques problèmes avec un style de programmation orienté objet. -<pre class="brush: js">function Personne() { +```js +function Personne() { // Le constructeur Personne() utilise `this` comme lui-même. this.âge = 0; @@ -582,11 +623,13 @@ console.log(a3); // affiche [8, 6, 7, 9]</pre> }, 1000); } -var p = new Personne();</pre> +var p = new Personne(); +``` -<p>Avec ECMAScript 3/5, ce problème fut résolu avec l'affectation de la valeur de <code>this</code> dans une variable a variable that could be closed over.</p> +Avec ECMAScript 3/5, ce problème fut résolu avec l'affectation de la valeur de `this` dans une variable a variable that could be closed over. -<pre class="brush: js">function Personne() { +```js +function Personne() { var self = this; // Certains utilisent `that`, d'autres `self`. // On utilisera l'un des deux et on pas // l'autre pour être cohérent. @@ -597,75 +640,52 @@ var p = new Personne();</pre> // qui est bien la valeur attendue liée à l'objet. self.âge++; }, 1000); -}</pre> +} +``` -<p>On aurait aussi pu créer une fonction liée afin que la « bonne » valeur de <code>this</code> soit passée à la fonction <code>grandir()</code>.</p> +On aurait aussi pu créer une fonction liée afin que la « bonne » valeur de `this` soit passée à la fonction `grandir()`. -<p>Les fonctions fléchées capturent la valeur de <code>this</code> dans le contexte englobant et cela permet de manipuler la valeur pertinente ici :</p> +Les fonctions fléchées capturent la valeur de `this` dans le contexte englobant et cela permet de manipuler la valeur pertinente ici : -<pre class="brush: js">function Personne(){ +```js +function Personne(){ this.âge = 0; - setInterval(() => { + setInterval(() => { this.âge++; // this fait référence à l'objet personne }, 1000); } -var p = new Personne();</pre> - -<h2 id="Fonctions_prédéfinies">Fonctions prédéfinies</h2> - -<p>JavaScript possède plusieurs fonctions natives, disponibles au plus haut niveau :</p> - -<dl> - <dt>{{jsxref("Objets_globaux/eval","eval()")}}</dt> - <dd> - <p>La fonction <code><strong>eval()</strong></code> permet d'évaluer du code JavaScript contenu dans une chaîne de caractères.</p> - </dd> - <dt>{{jsxref("Objets_globaux/uneval","uneval()")}} {{non-standard_inline}}</dt> - <dd> - <p>La fonction <code><strong>uneval()</strong></code> crée une représentation sous la forme d'une chaîne de caractères pour le code source d'un objet.</p> - </dd> - <dt>{{jsxref("Objets_globaux/isFinite","isFinite()")}}</dt> - <dd> - <p>La fonction <code><strong>isFinite()</strong></code> détermine si la valeur passée est un nombre fini. Si nécessaire, le paramètre sera converti en un nombre.</p> - </dd> - <dt>{{jsxref("Objets_globaux/isNaN","isNaN()")}}</dt> - <dd> - <p>La fonction <code><strong>isNaN()</strong></code> détermine si une valeur est {{jsxref("NaN")}} ou non. Note : On pourra également utiliser {{jsxref("Number.isNaN()")}} défini avec ECMAScript 6 ou utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof">typeof</a></code> afin de déterminer si la valeur est <em><strong>N</strong>ot-<strong>A</strong>-<strong>N</strong>umber</em>.</p> - </dd> - <dt>{{jsxref("Objets_globaux/parseFloat","parseFloat()")}}</dt> - <dd> - <p>La fonction <code><strong>parseFloat()</strong></code> convertit une chaîne de caractères en un nombre flottant.</p> - </dd> - <dt>{{jsxref("Objets_globaux/parseInt","parseInt()")}}</dt> - <dd> - <p>La fonction <code><strong>parseInt()</strong></code> convertit une chaîne de caractères et renvoie un entier dans la base donnée.</p> - </dd> - <dt>{{jsxref("Objets_globaux/decodeURI","decodeURI()")}}</dt> - <dd> - <p>La fonction <code><strong>decodeURI()</strong></code> décode un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou une méthode similaire.</p> - </dd> - <dt>{{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}</dt> - <dd> - <p>La fonction <code><strong>decodeURIComponent()</strong></code> décode un composant d'un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent")}} ou une méthode similaire.</p> - </dd> - <dt>{{jsxref("Objets_globaux/encodeURI","encodeURI()")}}</dt> - <dd> - <p>La fonction <code><strong>encodeURI()</strong></code> encode un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).</p> - </dd> - <dt>{{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}}</dt> - <dd> - <p>La fonction <code><strong>encodeURIComponent()</strong></code> encode un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).</p> - </dd> - <dt>{{jsxref("Objets_globaux/escape","escape()")}} {{deprecated_inline}}</dt> - <dd> - <p>La fonction dépréciée <code><strong>escape()</strong></code> calcule une nouvelle chaîne de caractères pour laquelle certains caractères ont été remplacés par leur séquence d'échappement hexadécimale. Les fonctions {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}} doivent être utilisées à la place.</p> - </dd> - <dt>{{jsxref("Objets_globaux/unescape","unescape()")}} {{deprecated_inline}}</dt> - <dd> - <p>La fonction dépréciée <code><strong>unescape()</strong></code> calcule une nouvelle chaîne de caractères pour laquelle les séquences d'échappement hexadécimales sont remplacées par les caractères qu'elles représentent. Les séquences d'échappement introduites peuvent provenir d'une fonction telle que {{jsxref("Objets_globaux/escape","escape()")}}. <code>unescape</code> est dépréciée et doit être remplacée par {{jsxref("Objets_globaux/decodeURI","decodeURI()")}} ou {{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}.</p> - </dd> -</dl> - -<p>{{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}}</p> +var p = new Personne(); +``` + +## Fonctions prédéfinies + +JavaScript possède plusieurs fonctions natives, disponibles au plus haut niveau : + +- {{jsxref("Objets_globaux/eval","eval()")}} + - : La fonction **`eval()`** permet d'évaluer du code JavaScript contenu dans une chaîne de caractères. +- {{jsxref("Objets_globaux/uneval","uneval()")}} {{non-standard_inline}} + - : La fonction **`uneval()`** crée une représentation sous la forme d'une chaîne de caractères pour le code source d'un objet. +- {{jsxref("Objets_globaux/isFinite","isFinite()")}} + - : La fonction **`isFinite()`** détermine si la valeur passée est un nombre fini. Si nécessaire, le paramètre sera converti en un nombre. +- {{jsxref("Objets_globaux/isNaN","isNaN()")}} + - : La fonction **`isNaN()`** détermine si une valeur est {{jsxref("NaN")}} ou non. Note : On pourra également utiliser {{jsxref("Number.isNaN()")}} défini avec ECMAScript 6 ou utiliser [`typeof`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof) afin de déterminer si la valeur est **\*N**ot-**A**-**N**umber\*. +- {{jsxref("Objets_globaux/parseFloat","parseFloat()")}} + - : La fonction **`parseFloat()`** convertit une chaîne de caractères en un nombre flottant. +- {{jsxref("Objets_globaux/parseInt","parseInt()")}} + - : La fonction **`parseInt()`** convertit une chaîne de caractères et renvoie un entier dans la base donnée. +- {{jsxref("Objets_globaux/decodeURI","decodeURI()")}} + - : La fonction **`decodeURI()`** décode un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou une méthode similaire. +- {{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}} + - : La fonction **`decodeURIComponent()`** décode un composant d'un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent")}} ou une méthode similaire. +- {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} + - : La fonction **`encodeURI()`** encode un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets). +- {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}} + - : La fonction **`encodeURIComponent()`** encode un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets). +- {{jsxref("Objets_globaux/escape","escape()")}} {{deprecated_inline}} + - : La fonction dépréciée **`escape()`** calcule une nouvelle chaîne de caractères pour laquelle certains caractères ont été remplacés par leur séquence d'échappement hexadécimale. Les fonctions {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}} doivent être utilisées à la place. +- {{jsxref("Objets_globaux/unescape","unescape()")}} {{deprecated_inline}} + - : La fonction dépréciée **`unescape()`** calcule une nouvelle chaîne de caractères pour laquelle les séquences d'échappement hexadécimales sont remplacées par les caractères qu'elles représentent. Les séquences d'échappement introduites peuvent provenir d'une fonction telle que {{jsxref("Objets_globaux/escape","escape()")}}. `unescape` est dépréciée et doit être remplacée par {{jsxref("Objets_globaux/decodeURI","decodeURI()")}} ou {{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}. + +{{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}} diff --git a/files/fr/web/javascript/guide/grammar_and_types/index.md b/files/fr/web/javascript/guide/grammar_and_types/index.md index ce13618846..2205e65b20 100644 --- a/files/fr/web/javascript/guide/grammar_and_types/index.md +++ b/files/fr/web/javascript/guide/grammar_and_types/index.md @@ -7,85 +7,82 @@ tags: translation_of: Web/JavaScript/Guide/Grammar_and_types original_slug: Web/JavaScript/Guide/Types_et_grammaire --- -<div> {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}} -<p>Ce chapitre décrit les bases de la grammaire et des types de données JavaScript.</p> +Ce chapitre décrit les bases de la grammaire et des types de données JavaScript. -<h2 id="Les_bases_du_langage">Les bases du langage</h2> +## Les bases du langage -<p>JavaScript emprunte la plupart des éléments de sa syntaxe à Java, C et C++ mais sa syntaxe est également influencée par Awk, Perl et Python.</p> +JavaScript emprunte la plupart des éléments de sa syntaxe à Java, C et C++ mais sa syntaxe est également influencée par Awk, Perl et Python. -<p>JavaScript est <strong>sensible à la casse</strong> et utilise l'ensemble de caractères <strong>Unicode</strong>. On pourrait donc tout à fait utiliser le mot früh comme nom de variable :</p> +JavaScript est **sensible à la casse** et utilise l'ensemble de caractères **Unicode**. On pourrait donc tout à fait utiliser le mot früh comme nom de variable : -<pre class="brush: js">var früh = "toto"; +```js +var früh = "toto"; typeof Früh; // undefined car JavaScript est sensible à la casse -</pre> +``` -<p>En JavaScript, les instructions sont appelées ({{Glossary("Statement", "statements")}}) et sont séparées par des points-virgules.</p> +En JavaScript, les instructions sont appelées ({{Glossary("Statement", "statements")}}) et sont séparées par des points-virgules. -<p>Il n'est pas nécessaire d'inclure un point-virgule si l'on écrit une instruction sur une nouvelle ligne. Mais si vous voulez écrire plus d'une déclaration sur une seule ligne, alors elles doivent être séparées par un point-virgule. Ceci étant dit, la bonne pratique est d'inclure un point-virgule après chaque instruction. Les espaces, les tabulations et les caractères de nouvelles lignes sont considérés comme des blancs. Il existe aussi un ensemble de règles pour ajouter automatiquement des points-virgules à la fin des instructions (<a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules">ASI</a> pour<em> Automatic Semicolon Insertion</em>). Cependant, il est conseillé de toujours ajouter des points-virgules à la fin des instructions afin d'éviter des effets de bord néfastes.</p> +Il n'est pas nécessaire d'inclure un point-virgule si l'on écrit une instruction sur une nouvelle ligne. Mais si vous voulez écrire plus d'une déclaration sur une seule ligne, alors elles doivent être séparées par un point-virgule. Ceci étant dit, la bonne pratique est d'inclure un point-virgule après chaque instruction. Les espaces, les tabulations et les caractères de nouvelles lignes sont considérés comme des blancs. Il existe aussi un ensemble de règles pour ajouter automatiquement des points-virgules à la fin des instructions ([ASI](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules) pour _Automatic Semicolon Insertion_). Cependant, il est conseillé de toujours ajouter des points-virgules à la fin des instructions afin d'éviter des effets de bord néfastes. -<p>Le texte d'un code source JavaScript est analysé de gauche à droite et est converti en une série d'unités lexicales, de caractères de contrôle, de fins de lignes, de commentaires et de blancs. ECMAScript définit également certains mots-clés et littéraux. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">la grammaire lexicale de JavaScript</a> dans la référence JavaScript.</p> +Le texte d'un code source JavaScript est analysé de gauche à droite et est converti en une série d'unités lexicales, de caractères de contrôle, de fins de lignes, de commentaires et de blancs. ECMAScript définit également certains mots-clés et littéraux. Pour plus d'informations, voir la page sur [la grammaire lexicale de JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale) dans la référence JavaScript. -<h2 id="Commentaires">Commentaires</h2> +## Commentaires -<p>La syntaxe utilisée pour <strong>les commentaires</strong> est la même que celle utilisée par le C++ et d'autres langages :</p> +La syntaxe utilisée pour **les commentaires** est la même que celle utilisée par le C++ et d'autres langages : -<pre class="brush: js">// un commentaire sur une ligne +```js +// un commentaire sur une ligne /* un commentaire plus long sur plusieurs lignes */ /* Par contre on ne peut pas /* imbriquer des commentaires */ SyntaxError */ -</pre> +``` -<div class="blockIndicator note"> -<p><strong>Note :</strong> Vous pourrez également rencontrer une troisième forme de commentaires au début de certains fichiers JavaScript comme <code>#!/usr/bin/env node</code>. Ce type de commentaire indique le chemin d'un interpréteur JavaScript spécifique pour exécuter le script. Pour plus de détails, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Commentaire_d'environnement_(hashbang)">les commentaires d'environnement</a>.</p> -</div> +> **Note :** Vous pourrez également rencontrer une troisième forme de commentaires au début de certains fichiers JavaScript comme `#!/usr/bin/env node`. Ce type de commentaire indique le chemin d'un interpréteur JavaScript spécifique pour exécuter le script. Pour plus de détails, voir la page sur [les commentaires d'environnement](</fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Commentaire_d'environnement_(hashbang)>). -<h2 id="Déclarations">Déclarations</h2> +## Déclarations -<p>Il existe trois types de déclarations de variable en JavaScript.</p> +Il existe trois types de déclarations de variable en JavaScript. -<dl> - <dt>{{jsxref("Instructions/var", "var")}}</dt> - <dd>On déclare une variable, éventuellement en initialisant sa valeur.</dd> - <dt>{{jsxref("Instructions/let", "let")}}</dt> - <dd>On déclare une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.</dd> - <dt>{{jsxref("Instructions/const", "const")}}</dt> - <dd>On déclare une constante nommée, dont la portée est celle du bloc courant, accessible en lecture seule.</dd> -</dl> +- {{jsxref("Instructions/var", "var")}} + - : On déclare une variable, éventuellement en initialisant sa valeur. +- {{jsxref("Instructions/let", "let")}} + - : On déclare une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur. +- {{jsxref("Instructions/const", "const")}} + - : On déclare une constante nommée, dont la portée est celle du bloc courant, accessible en lecture seule. -<h3 id="Variables">Variables</h3> +### Variables -<p>Les variables sont utilisées comme des noms symboliques désignant les valeurs utilisées dans l'application. Les noms des variables sont appelés <em>identifiants</em>. Ces identifiants doivent respecter certaines règles.</p> +Les variables sont utilisées comme des noms symboliques désignant les valeurs utilisées dans l'application. Les noms des variables sont appelés _identifiants_. Ces identifiants doivent respecter certaines règles. -<p>Un identifiant JavaScript doit commencer par une lettre, un tiret bas (_) ou un symbole dollar ($). Les caractères qui suivent peuvent être des chiffres (0 à 9).<br> -À noter : puisque Javascript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères de « a » à « z » (en minuscule).</p> +Un identifiant JavaScript doit commencer par une lettre, un tiret bas (\_) ou un symbole dollar ($). Les caractères qui suivent peuvent être des chiffres (0 à 9). +À noter : puisque Javascript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères de « a » à « z » (en minuscule). -<p>On peut aussi utiliser la plupart lettres Unicode ou ISO 8859-1 (comme å et ü, pour plus de détails, voir <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">ce billet de blog, en anglais</a>) au sein des identifiants. Il est également possible d'utiliser les \uXXXX <a href="#littéraux chaînes">séquences d'échappement Unicode</a> comme caractères dans les identifiants.</p> +On peut aussi utiliser la plupart lettres Unicode ou ISO 8859-1 (comme å et ü, pour plus de détails, voir [ce billet de blog, en anglais](https://mathiasbynens.be/notes/javascript-identifiers-es6)) au sein des identifiants. Il est également possible d'utiliser les \uXXXX [séquences d'échappement Unicode](<#littéraux chaînes>) comme caractères dans les identifiants. -<p>Voici des exemples d'identifiants valides : <code>Nombre_touches</code>, <code>temp99</code>, <code>$credit</code>, et <code>_nom</code>.</p> +Voici des exemples d'identifiants valides : `Nombre_touches`, `temp99`, `$credit`, et `_nom`. -<h3 id="Déclaration_de_variables">Déclaration de variables</h3> +### Déclaration de variables -<p>Il est possible de déclarer des variables de plusieurs façons :</p> +Il est possible de déclarer des variables de plusieurs façons : -<ul> - <li>En utilisant le mot-clé {{jsxref("Instructions/var","var")}}, par exemple : <code>var x = 42</code>. Cette syntaxe peut être utilisée pour déclarer des variables <a href="#Portées">locales ou globales</a> selon le contexte d'exécution.</li> - <li>En utilisant le mot-clé {{jsxref("Instructions/const","const")}} ou le mot-clé {{jsxref("Instructions/let","let")}}, par exemple avec <code>let y = 13</code>. Cette syntaxe peut être utilisée pour déclarer une variable dont la portée sera celle du bloc. Voir le paragraphe sur <a href="#Portées">les portées des variables</a> ci-après.</li> -</ul> +- En utilisant le mot-clé {{jsxref("Instructions/var","var")}}, par exemple : `var x = 42`. Cette syntaxe peut être utilisée pour déclarer des variables [locales ou globales](#Portées) selon le contexte d'exécution. +- En utilisant le mot-clé {{jsxref("Instructions/const","const")}} ou le mot-clé {{jsxref("Instructions/let","let")}}, par exemple avec `let y = 13`. Cette syntaxe peut être utilisée pour déclarer une variable dont la portée sera celle du bloc. Voir le paragraphe sur [les portées des variables](#Portées) ci-après. -<p>Il est également possible d'affecter une valeur à une variable sans utiliser de mot-clé (ex. <code>x = 42</code>). Cela créera une variable globale non-déclarée. Cette forme génèrera également un avertissement avec <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">le mode strict</a>. Attention, les variables globales non-déclarées peuvent mener à des comportements inattendus et sont considérées comme une mauvaise pratique.</p> +Il est également possible d'affecter une valeur à une variable sans utiliser de mot-clé (ex. `x = 42`). Cela créera une variable globale non-déclarée. Cette forme génèrera également un avertissement avec [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode). Attention, les variables globales non-déclarées peuvent mener à des comportements inattendus et sont considérées comme une mauvaise pratique. -<h3 id="Évaluation_de_variables">Évaluation de variables</h3> +### Évaluation de variables -<p>Une variable déclarée grâce à l'instruction <code>var</code> ou <code>let</code> sans valeur initiale définie vaudra {{jsxref("undefined")}}.</p> +Une variable déclarée grâce à l'instruction `var` ou `let` sans valeur initiale définie vaudra {{jsxref("undefined")}}. -<p>Tenter d'accéder à une variable qui n'a pas été déclarée ou tenter d'accéder à un identifiant déclaré avec <code>let</code> avant son initialisation provoquera l'envoi d'une exception {{jsxref("ReferenceError")}}.</p> +Tenter d'accéder à une variable qui n'a pas été déclarée ou tenter d'accéder à un identifiant déclaré avec `let` avant son initialisation provoquera l'envoi d'une exception {{jsxref("ReferenceError")}}. -<pre class="brush: js">var a; +```js +var a; console.log("La valeur de a est " + a); // La valeur de a est undefined console.log("La valeur de b est " + b); // La valeur de b est undefined @@ -95,61 +92,70 @@ console.log("La valeur de x est " + x); // signale une exception ReferenceError let x; let y; console.log("La valeur de y est " + y); // La valeur de y est undefined -</pre> +``` -<p>Il est possible d'utiliser <code>undefined</code> pour déterminer si une variable possède une valeur. Dans l'exemple qui suit, la condition de l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if</a></code> sera validée car la variable n'a pas été initialisée (elle a simplement été déclarée) :</p> +Il est possible d'utiliser `undefined` pour déterminer si une variable possède une valeur. Dans l'exemple qui suit, la condition de l'instruction [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) sera validée car la variable n'a pas été initialisée (elle a simplement été déclarée) : -<pre class="brush: js">var input; +```js +var input; if (input === undefined){ faireCeci(); } else { faireCela(); } -</pre> +``` -<p>La valeur <code>undefined</code> se comporte comme le booléen <code>false</code> lorsqu'elle est utilisée dans un contexte booléen. Ainsi, le fragment de code qui suit exécutera la fonction <code>maFonction</code> puisque le premier élément de <code>monTableau</code> n'est pas défini :</p> +La valeur `undefined` se comporte comme le booléen `false` lorsqu'elle est utilisée dans un contexte booléen. Ainsi, le fragment de code qui suit exécutera la fonction `maFonction` puisque le premier élément de `monTableau` n'est pas défini : -<pre class="brush: js">var monTableau = new Array(); +```js +var monTableau = new Array(); if (!monTableau[0]){ maFunction(); } -</pre> +``` -<p>La valeur <code>undefined</code> est convertie en {{jsxref("NaN")}} (pour <em>Not a Number</em> : « n'est pas un nombre ») lorsqu'elle est utilisée dans un contexte numérique.</p> +La valeur `undefined` est convertie en {{jsxref("NaN")}} (pour _Not a Number_ : « n'est pas un nombre ») lorsqu'elle est utilisée dans un contexte numérique. -<pre class="brush: js">var a; -a + 2; // NaN</pre> +```js +var a; +a + 2; // NaN +``` -<p>Une variable valant <code>null</code> sera toujours considérée comme 0 dans un contexte numérique et comme <code>false</code> dans un contexte booléen. Par exemple, on aura :</p> +Une variable valant `null` sera toujours considérée comme 0 dans un contexte numérique et comme `false` dans un contexte booléen. Par exemple, on aura : -<pre class="brush: js">var n = null; -console.log(n * 32); // Le log affichera 0</pre> +```js +var n = null; +console.log(n * 32); // Le log affichera 0 +``` -<h3 id="Les_portées_de_variables">Les portées de variables</h3> +### Les portées de variables -<p>Lorsqu'une variable est déclarée avec <code>var</code> en dehors des fonctions, elle est appelée variable <em>global</em>e car elle est disponible pour tout le code contenu dans le document. Lorsqu'une variable est déclarée dans une fonction, elle est appelée variable <em>locale</em> car elle n'est disponible qu'au sein de cette fonction.</p> +Lorsqu'une variable est déclarée avec `var` en dehors des fonctions, elle est appelée variable *global*e car elle est disponible pour tout le code contenu dans le document. Lorsqu'une variable est déclarée dans une fonction, elle est appelée variable _locale_ car elle n'est disponible qu'au sein de cette fonction. -<p>Avant ECMAScript 2015 (ES6), JavaScript ne définissait pas de portée pour une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">instruction de bloc</a> ; les éléments du bloc seront locaux pour le code qui contient le bloc (que ce soit une fonction ou le contexte global). Ainsi, l'exemple qui suit affichera 5 car la portée de <code>x</code> est la fonction (ou le contexte global) dans lequel <code>x</code> est déclaré, pas le bloc (correspondant à l'instruction <code>if</code> dans ce cas) :</p> +Avant ECMAScript 2015 (ES6), JavaScript ne définissait pas de portée pour une [instruction de bloc](/fr/docs/Web/JavaScript/Reference/Instructions/bloc) ; les éléments du bloc seront locaux pour le code qui contient le bloc (que ce soit une fonction ou le contexte global). Ainsi, l'exemple qui suit affichera 5 car la portée de `x` est la fonction (ou le contexte global) dans lequel `x` est déclaré, pas le bloc (correspondant à l'instruction `if` dans ce cas) : -<pre class="brush: js">if (true) { +```js +if (true) { var x = 5; } console.log(x); // x vaut 5 -</pre> +``` -<p>La déclaration {{jsxref("Instructions/let","let")}}, introduite avec ECMAScript 2015, ajoute un nouveau comportement :</p> +La déclaration {{jsxref("Instructions/let","let")}}, introduite avec ECMAScript 2015, ajoute un nouveau comportement : -<pre class="brush: js">if (true) { +```js +if (true) { let y = 5; } console.log(y); // ReferenceError: y is not defined -</pre> +``` -<h3 id="Remontée_de_variables_(hoisting)">Remontée de variables (<em>hoisting</em>)</h3> +### Remontée de variables (_hoisting_) -<p>Une autre chose peut paraître étrange en JavaScript : il est possible, sans recevoir d'exception, de faire référence à une variable qui est déclarée plus tard. Ce concept est appelé « remontée » (<em>hoisting</em> en anglais) car, d'une certaine façon, les variables sont remontées en haut de la fonction ou de l'instruction. En revanche, les variables qui n'ont pas encore été initialisées renverront la valeur <code>undefined</code>. Ainsi, même si on déclare une variable et qu'on l'initialise après l'avoir utilisée ou y avoir fait référence, la valeur utilisée « la plus haute » sera toujours <code>undefined</code>.</p> +Une autre chose peut paraître étrange en JavaScript : il est possible, sans recevoir d'exception, de faire référence à une variable qui est déclarée plus tard. Ce concept est appelé « remontée » (_hoisting_ en anglais) car, d'une certaine façon, les variables sont remontées en haut de la fonction ou de l'instruction. En revanche, les variables qui n'ont pas encore été initialisées renverront la valeur `undefined`. Ainsi, même si on déclare une variable et qu'on l'initialise après l'avoir utilisée ou y avoir fait référence, la valeur utilisée « la plus haute » sera toujours `undefined`. -<pre class="brush: js">/** +```js +/** * Exemple 1 */ console.log(x === undefined); // donne "true" @@ -165,11 +171,12 @@ var maVar = "ma valeur"; console.log(maVar); // undefined var maVar = "valeur locale"; })(); -</pre> +``` -<p>Les exemples précédents peuvent être reformulés plus explicitement ainsi :</p> +Les exemples précédents peuvent être reformulés plus explicitement ainsi : -<pre class="brush: js">/** +```js +/** * Exemple 1 */ var x; @@ -186,22 +193,25 @@ var maVar = "ma valeur"; console.log(maVar); // undefined maVar = "valeur locale"; })(); -</pre> +``` -<p>C'est pourquoi il est conseillé de placer les instructions <code>var</code> dès que possible dans le code. De plus, cette bonne pratique aide à rendre le code plus lisible.</p> +C'est pourquoi il est conseillé de placer les instructions `var` dès que possible dans le code. De plus, cette bonne pratique aide à rendre le code plus lisible. -<p>Avec ECMAScript 2015, <code>let (const)</code> <strong>remontera la variable en haut du bloc mais ne l'initialisera pas</strong>. Aussi, si on fait référence à la variable dans le bloc avant la déclaration, on obtient une {{jsxref("ReferenceError")}} car la variable est dans une « zone morte temporelle ». entre le début du bloc et le traitement de la déclaration</p> +Avec ECMAScript 2015, `let (const)` **remontera la variable en haut du bloc mais ne l'initialisera pas**. Aussi, si on fait référence à la variable dans le bloc avant la déclaration, on obtient une {{jsxref("ReferenceError")}} car la variable est dans une « zone morte temporelle ». entre le début du bloc et le traitement de la déclaration -<pre class="brush: js">function faire_quelquechose() { +```js +function faire_quelquechose() { console.log(toto); // ReferenceError let toto = 2; -}</pre> +} +``` -<h3 id="Remontée_de_fonctions">Remontée de fonctions</h3> +### Remontée de fonctions -<p>En ce qui concerne les fonctions, seules les déclarations de fonctions sont remontées. Pour les expressions de fonctions, il n'y a pas de telle remontée car la variable associée n'a pas encore été affectée avec la valeur finale (comme vu avant) :</p> +En ce qui concerne les fonctions, seules les déclarations de fonctions sont remontées. Pour les expressions de fonctions, il n'y a pas de telle remontée car la variable associée n'a pas encore été affectée avec la valeur finale (comme vu avant) : -<pre class="brush: js">/* Déclaration de fonction */ +```js +/* Déclaration de fonction */ toto(); // "truc" function toto(){ console.log("truc"); @@ -212,28 +222,30 @@ machin(); // erreur TypeError : machin n'est pas une fonction var machin = function() { console.log("titi"); } -</pre> +``` -<h3 id="Les_variables_globales">Les variables globales</h3> +### Les variables globales -<p>Les variables globales sont en réalité des propriétés de l'<em>objet global</em>. Dans les pages web, l'objet global est {{domxref("window")}}, et on peut donc accéder ou modifier la valeur de variables globales en utilisant la syntaxe suivante : <code>window.<em>variable</em></code> .</p> +Les variables globales sont en réalité des propriétés de l'_objet global_. Dans les pages web, l'objet global est {{domxref("window")}}, et on peut donc accéder ou modifier la valeur de variables globales en utilisant la syntaxe suivante : `window.variable` . -<p>Ainsi, il est possible d'accéder à des variables déclarées dans une fenêtre ou dans un cadre depuis une autre fenêtre ou depuis un autre cadre (<em>frame</em>) en spécifiant son nom. Si, par exemple, une variable appelée <code>numTéléphone</code> est déclarée dans un document <code>FRAMESET</code>, il est possible d'y faire référence, depuis un cadre fils, avec la syntaxe <code>parent.numTéléphone</code>.</p> +Ainsi, il est possible d'accéder à des variables déclarées dans une fenêtre ou dans un cadre depuis une autre fenêtre ou depuis un autre cadre (_frame_) en spécifiant son nom. Si, par exemple, une variable appelée `numTéléphone` est déclarée dans un document `FRAMESET`, il est possible d'y faire référence, depuis un cadre fils, avec la syntaxe `parent.numTéléphone`. -<h3 id="Constantes">Constantes</h3> +### Constantes -<p>Il est possible de créer des constantes en lecture seule en utilisant le mot-clé {{jsxref("Instructions/const","const")}}. La syntaxe d'un identifiant pour une constante est la même que pour les variables (elle doit débuter avec une lettre, un tiret du bas, un symbole dollar et peut contenir des caractères numériques, alphabétiques et des tirets bas voire des caractères Unicode).</p> +Il est possible de créer des constantes en lecture seule en utilisant le mot-clé {{jsxref("Instructions/const","const")}}. La syntaxe d'un identifiant pour une constante est la même que pour les variables (elle doit débuter avec une lettre, un tiret du bas, un symbole dollar et peut contenir des caractères numériques, alphabétiques et des tirets bas voire des caractères Unicode). -<pre class="brush: js">const préfixe = '212'; -</pre> +```js +const préfixe = '212'; +``` -<p>Une constante ne peut pas changer de valeur grâce à une affectation ou être re-déclarée pendant l'exécution du script.</p> +Une constante ne peut pas changer de valeur grâce à une affectation ou être re-déclarée pendant l'exécution du script. -<p>Les règles de portée des constantes sont les mêmes que pour les variables, à l'exception du mot-clé <code>const</code> qui est obligatoire. S'il est oublié, l'identifiant sera considéré comme celui d'une variable.</p> +Les règles de portée des constantes sont les mêmes que pour les variables, à l'exception du mot-clé `const` qui est obligatoire. S'il est oublié, l'identifiant sera considéré comme celui d'une variable. -<p>Il est impossible de déclarer une constante avec le même nom qu'une autre variable ou fonction dans la même portée.</p> +Il est impossible de déclarer une constante avec le même nom qu'une autre variable ou fonction dans la même portée. -<pre class="example-bad brush: js">// Renverra une erreur +```js example-bad +// Renverra une erreur function f() {}; const f = 5; @@ -244,216 +256,210 @@ function f() { //instructions } -</pre> +``` -<p>Cependant, les propriétés des objets qui sont affectés comme constantes ne sont pas protégées, on pourra ainsi exécuter sans problème le code suivant :</p> +Cependant, les propriétés des objets qui sont affectés comme constantes ne sont pas protégées, on pourra ainsi exécuter sans problème le code suivant : -<pre class="brush: js">const MON_OBJET = {"clé": "valeur"}; -MON_OBJET.clé = "autreValeur";</pre> +```js +const MON_OBJET = {"clé": "valeur"}; +MON_OBJET.clé = "autreValeur"; +``` -<p>De même, le contenu d'un tableau peut être modifié sans alerte :</p> +De même, le contenu d'un tableau peut être modifié sans alerte : -<pre class="brush: js">const MON_TABLEAU = ["HTML", "CSS"]; +```js +const MON_TABLEAU = ["HTML", "CSS"]; MON_TABLEAU.push("JavaScript"); console.log(MON_TABLEAU); // ["HTML", "CSS", "JavaScript"] -</pre> +``` -<h2 id="Structures_de_données_et_types">Structures de données et types</h2> +## Structures de données et types -<h3 id="Types_de_données">Types de données</h3> +### Types de données -<p>La dernière version du standard ECMAScript définit sept types de données :</p> +La dernière version du standard ECMAScript définit sept types de données : -<ul> - <li>Six types de données primitifs : - <ul> - <li>Type booléen : <code>true</code> et <code>false</code>.</li> - <li>Type nul (<code>null</code>), un mot-clé spécial pour indiquer une valeur nulle (au sens informatique). JavaScript étant sensible à la casse, <code>null</code> n'est pas <code>Null</code>, <code>NULL</code>, ou toute autre variante.</li> - <li>Un type pour les valeurs indéfinies (<code>undefined</code>).</li> - <li>Un type pour les nombres entiers ou décimaux. Par exemple : <code>42</code> ou <code>3.14159</code>.</li> - <li>Un type pour représenter les grands nombres entiers <code>BigInt</code>, par exemple <code>9007199254740992n</code>.</li> - <li>Un type pour les chaînes de caractères, une séquence de caractères qui représente une valeur textuelle. Par exemple : "Coucou"</li> - <li>Un type pour les symboles, apparus avec ECMAScript 2015 (ES6). Ce type est utilisé pour représenter des données immuables et uniques.</li> - </ul> - </li> - <li>et un type pour les objets (<em>Object</em>)</li> -</ul> +- Six types de données primitifs : -<p>Bien que cette description couvre peu de types de données, ceux-ci vous permettent d'implémenter une grande variété de fonctions au sein de vos applications. <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object">Les objets</a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function">les fonctions</a> sont parmi les briques fondamentales du langage. On peut considérer, à première vue, les objets comme des conteneurs de valeurs et de fonctions pour une application.</p> + - Type booléen : `true` et `false`. + - Type nul (`null`), un mot-clé spécial pour indiquer une valeur nulle (au sens informatique). JavaScript étant sensible à la casse, `null` n'est pas `Null`, `NULL`, ou toute autre variante. + - Un type pour les valeurs indéfinies (`undefined`). + - Un type pour les nombres entiers ou décimaux. Par exemple : `42` ou `3.14159`. + - Un type pour représenter les grands nombres entiers `BigInt`, par exemple `9007199254740992n`. + - Un type pour les chaînes de caractères, une séquence de caractères qui représente une valeur textuelle. Par exemple : "Coucou" + - Un type pour les symboles, apparus avec ECMAScript 2015 (ES6). Ce type est utilisé pour représenter des données immuables et uniques. -<h3 id="Conversion_de_types_de_données">Conversion de types de données</h3> +- et un type pour les objets (_Object_) -<p>JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lors de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script. Ainsi, il est possible de définir une variable de cette façon :</p> +Bien que cette description couvre peu de types de données, ceux-ci vous permettent d'implémenter une grande variété de fonctions au sein de vos applications. [Les objets](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object) et [les fonctions](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function) sont parmi les briques fondamentales du langage. On peut considérer, à première vue, les objets comme des conteneurs de valeurs et de fonctions pour une application. -<div> -<pre class="brush: js">var réponse = 42; -</pre> -</div> +### Conversion de types de données -<p>Et plus tard, d'affecter une chaîne de caractères à cette même variable :</p> +JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lors de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script. Ainsi, il est possible de définir une variable de cette façon : -<div> -<pre class="brush: js">réponse = "Merci pour le dîner..."; -</pre> -</div> +```js +var réponse = 42; +``` -<p>JavaScript utilisant un typage dynamique, cette dernière instruction ne renverra pas d'erreur.</p> +Et plus tard, d'affecter une chaîne de caractères à cette même variable : -<p>Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi que l'opérateur +, JavaScript convertit les nombres en chaînes de caractères :</p> +```js +réponse = "Merci pour le dîner..."; +``` -<pre class="brush: js">x = "La réponse est " + 42; // "La réponse est 42" +JavaScript utilisant un typage dynamique, cette dernière instruction ne renverra pas d'erreur. + +Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi que l'opérateur +, JavaScript convertit les nombres en chaînes de caractères : + +```js +x = "La réponse est " + 42; // "La réponse est 42" y = 42 + " est la réponse"; // "42 est la réponse" -</pre> +``` -<p>Avec des instructions impliquant d'autres opérateurs, JavaScript ne convertit pas nécessairement les valeurs numériques en chaînes de caractères. Ainsi, on aura :</p> +Avec des instructions impliquant d'autres opérateurs, JavaScript ne convertit pas nécessairement les valeurs numériques en chaînes de caractères. Ainsi, on aura : -<pre class="brush: js">"37" - 7; // 30 +```js +"37" - 7; // 30 "37" + 7; // "377" -</pre> +``` -<h3 id="Conversion_de_chaînes_de_caractères_en_nombres">Conversion de chaînes de caractères en nombres</h3> +### Conversion de chaînes de caractères en nombres -<p>Si un nombre est représenté en mémoire par une chaîne de caractères, il y a des méthodes pour effectuer la bonne conversion :</p> +Si un nombre est représenté en mémoire par une chaîne de caractères, il y a des méthodes pour effectuer la bonne conversion : -<ul> - <li>{{jsxref("Objets_globaux/parseInt", "parseInt()")}}</li> - <li>{{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}</li> -</ul> +- {{jsxref("Objets_globaux/parseInt", "parseInt()")}} +- {{jsxref("Objets_globaux/parseFloat", "parseFloat()")}} -<p><code>parseInt</code> renverra uniquement des nombres entiers, étant ainsi inappropriée pour la manipulation de nombre décimaux. Une bonne pratique pour cette fonction est de toujours inclure l'argument qui indique dans quelle base numérique le résultat doit être renvoyé (base 2, base 10...).</p> +`parseInt` renverra uniquement des nombres entiers, étant ainsi inappropriée pour la manipulation de nombre décimaux. Une bonne pratique pour cette fonction est de toujours inclure l'argument qui indique dans quelle base numérique le résultat doit être renvoyé (base 2, base 10...). -<pre class="brush: js">parseInt("101", 2); // 5</pre> +```js +parseInt("101", 2); // 5 +``` -<h4 id="L'opérateur_unaire">L'opérateur + unaire</h4> +#### L'opérateur + unaire -<p>Une autre méthode pour récupérer un nombre à partir d'une chaîne de caractères consiste à utiliser l'opérateur +.</p> +Une autre méthode pour récupérer un nombre à partir d'une chaîne de caractères consiste à utiliser l'opérateur +. -<pre class="brush: js">"1.1" + "1.1" = "1.11.1" +```js +"1.1" + "1.1" = "1.11.1" +"1.1" = 1.1 // fonctionne seulement avec le + unaire -</pre> +``` -<h2 id="Littéraux">Littéraux</h2> +## Littéraux -<p>Les littéraux sont utilisés pour représenter des valeurs en JavaScript. Ce sont des valeurs fixes, pas des variables, qui sont fournies <em>littéralement</em> au script. Cette section décrit les différents types de littéraux :</p> +Les littéraux sont utilisés pour représenter des valeurs en JavaScript. Ce sont des valeurs fixes, pas des variables, qui sont fournies _littéralement_ au script. Cette section décrit les différents types de littéraux : -<ul> - <li><a href="#littéraux tableaux">Littéraux de tableaux</a></li> - <li><a href="#littéraux booléens">Littéraux booléens</a></li> - <li><a href="#littéraux décimaux">Littéraux de nombres flottants</a></li> - <li><a href="#littéraux numériques">Littéraux numériques</a></li> - <li><a href="#littéraux objets">Littéraux d'objets</a></li> - <li><a href="#regexp">Littéraux d'expressions rationnelles</a></li> - <li><a href="#littéraux chaînes">Littéraux de chaînes de caractères</a></li> -</ul> +- [Littéraux de tableaux](<#littéraux tableaux>) +- [Littéraux booléens](<#littéraux booléens>) +- [Littéraux de nombres flottants](<#littéraux décimaux>) +- [Littéraux numériques](<#littéraux numériques>) +- [Littéraux d'objets](<#littéraux objets>) +- [Littéraux d'expressions rationnelles](#regexp) +- [Littéraux de chaînes de caractères](<#littéraux chaînes>) -<h3 id="Les_littéraux_de_tableaux">Les littéraux de tableaux</h3> +### Les littéraux de tableaux -<p>Un littéral de tableau est une liste de zéro ou plusieurs expressions, dont chacune représente l'élément d'un tableau, encadrées par des crochets (<code>[]</code>). Lorsqu'un tableau est créé à partir d'un littéral, il est initialisé avec les valeurs spécifiées qui sont ses éléments, sa longueur correspondant au nombre d'arguments donnés.</p> +Un littéral de tableau est une liste de zéro ou plusieurs expressions, dont chacune représente l'élément d'un tableau, encadrées par des crochets (`[]`). Lorsqu'un tableau est créé à partir d'un littéral, il est initialisé avec les valeurs spécifiées qui sont ses éléments, sa longueur correspondant au nombre d'arguments donnés. -<p>L'exemple suivant crée ainsi le tableau <code>cafés</code> avec trois éléments et une taille égale à 3 :</p> +L'exemple suivant crée ainsi le tableau `cafés` avec trois éléments et une taille égale à 3 : -<pre class="brush: js">var cafés = ["Brésilien", "Colombien", "Kona"]; -</pre> +```js +var cafés = ["Brésilien", "Colombien", "Kona"]; +``` -<div class="note"> -<p><strong>Note :</strong> Un littéral de tableau est du type d'un initialisateur d'objets. Voir <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet">l'utilisation d'initialisateurs d'objets</a>.</p> -</div> +> **Note :** Un littéral de tableau est du type d'un initialisateur d'objets. Voir [l'utilisation d'initialisateurs d'objets](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet). -<p>Si un tableau est créé en utilisant un littéral dans un script du plus haut niveau, JavaScript interprète le tableau chaque fois qu'il évalue l'expression contenant le littéral. De plus, un littéral utilisé dans une fonction est créé chaque fois que la fonction est appelée.</p> +Si un tableau est créé en utilisant un littéral dans un script du plus haut niveau, JavaScript interprète le tableau chaque fois qu'il évalue l'expression contenant le littéral. De plus, un littéral utilisé dans une fonction est créé chaque fois que la fonction est appelée. -<p>Les littéraux de tableaux sont également des objets <code>Array</code>. Voir la page sur l'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array">Array</a></code> pour plus de détails.</p> +Les littéraux de tableaux sont également des objets `Array`. Voir la page sur l'objet [`Array`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array) pour plus de détails. -<h4 id="Les_virgules_supplémentaires">Les virgules supplémentaires</h4> +#### Les virgules supplémentaires -<p>Il n'est pas nécessaire de définir tous les éléments dans un littéral de tableau. Si vous utilisez deux virgules, l'une à la suite de l'autre, le tableau utilisera la valeur <code>undefined</code> pour les éléments non définis. L'exemple qui suit utilise le tableau poisson :</p> +Il n'est pas nécessaire de définir tous les éléments dans un littéral de tableau. Si vous utilisez deux virgules, l'une à la suite de l'autre, le tableau utilisera la valeur `undefined` pour les éléments non définis. L'exemple qui suit utilise le tableau poisson : -<pre class="brush: js">var poisson = ["Clown", , "Chat"]; -</pre> +```js +var poisson = ["Clown", , "Chat"]; +``` -<p>Ce tableau possède deux éléments ayant une valeur et un élément vide (<code>poisson[0]</code> vaut "Clown", <code>poisson[1]</code> vaut <code>undefined</code>, et <code>poisson[2]</code> vaut "Chat").</p> +Ce tableau possède deux éléments ayant une valeur et un élément vide (`poisson[0]` vaut "Clown", `poisson[1]` vaut `undefined`, et `poisson[2]` vaut "Chat"). -<p>Si une virgule est ajoutée à la fin de la liste des éléments, elle est ignorée. Dans le prochain exemple, la longueur du tableau est égale à 3. Il n'y a pas d'élément <code>maListe[3]</code>. Les autres virgules indiquent un nouvel élément.</p> +Si une virgule est ajoutée à la fin de la liste des éléments, elle est ignorée. Dans le prochain exemple, la longueur du tableau est égale à 3. Il n'y a pas d'élément `maListe[3]`. Les autres virgules indiquent un nouvel élément. -<div class="note"> -<p><strong>Note :</strong> Avec d'anciennes versions de navigateurs, les virgules de fin peuvent causer des erreurs, il est fortement conseillé de les retirer.</p> -</div> +> **Note :** Avec d'anciennes versions de navigateurs, les virgules de fin peuvent causer des erreurs, il est fortement conseillé de les retirer. -<pre class="brush: js">var maListe = ['maison', , 'école', ]; -</pre> +```js +var maListe = ['maison', , 'école', ]; +``` -<p>Dans l'exemple qui suit, la longueur du tableau est égale à 4 et <code>maListe[0]</code> et <code>maListe[2]</code> sont manquants.</p> +Dans l'exemple qui suit, la longueur du tableau est égale à 4 et `maListe[0]` et `maListe[2]` sont manquants. -<pre class="brush: js">var maListe = [ , 'maison', , 'école']; -</pre> +```js +var maListe = [ , 'maison', , 'école']; +``` -<p>Dans l'exemple qui suit, la longueur du tableau est égale à 4 et <code>maListe[1]</code> et <code>maListe[3]</code> sont manquants.</p> +Dans l'exemple qui suit, la longueur du tableau est égale à 4 et `maListe[1]` et `maListe[3]` sont manquants. -<pre class="brush: js">var maListe = ['maison', , 'école', , ]; -</pre> +```js +var maListe = ['maison', , 'école', , ]; +``` -<p>Comprendre le fonctionnement des virgules supplémentaires est important. Cependant, lorsque vous écrivez du code, veillez, dès que c'est possible, à déclarer les éléments manquants avec <code>undefined</code> : cela améliorera la lisibilité de votre code et il sera ainsi plus facile à maintenir.</p> +Comprendre le fonctionnement des virgules supplémentaires est important. Cependant, lorsque vous écrivez du code, veillez, dès que c'est possible, à déclarer les éléments manquants avec `undefined` : cela améliorera la lisibilité de votre code et il sera ainsi plus facile à maintenir. -<h3 id="Les_littéraux_booléens">Les littéraux booléens</h3> +### Les littéraux booléens -<p>Le type booléen possède deux valeurs littérales : <code>true</code> et <code>false</code>.</p> +Le type booléen possède deux valeurs littérales : `true` et `false`. -<p>Il ne faut pas confondre les valeurs <code>true</code> et <code>false</code> du type primitif booléen et les valeurs true et false de l'objet <code>Boolean</code>. L'objet <code>Boolean</code> permet de créer un objet autour du type de donnée booléen. Voir la page sur l'objet<a href="/fr/docs/JavaScript/Reference/Objets_globaux/Boolean"> <code>Boolean</code></a> pour plus d'informations.</p> +Il ne faut pas confondre les valeurs `true` et `false` du type primitif booléen et les valeurs true et false de l'objet `Boolean`. L'objet `Boolean` permet de créer un objet autour du type de donnée booléen. Voir la page sur l'objet[ `Boolean`](/fr/docs/JavaScript/Reference/Objets_globaux/Boolean) pour plus d'informations. -<h3 id="Les_littéraux_numériques">Les littéraux numériques</h3> +### Les littéraux numériques -<p>Les nombres {{jsxref("Number")}} et les grands entiers {{jsxref("BigInt")}} peuvent être exprimés en notation décimale (base 10), hexadécimale (base 16), octale (base 8) et binaire (base 2).</p> +Les nombres {{jsxref("Number")}} et les grands entiers {{jsxref("BigInt")}} peuvent être exprimés en notation décimale (base 10), hexadécimale (base 16), octale (base 8) et binaire (base 2). -<ul> - <li>Les littéraux représentant des entiers décimaux sont une suite de chiffres qui ne commence pas par un 0 (zéro)</li> - <li>Un 0 (zéro) en préfixe indique que le littéral est en notation octale. Ces nombres ne peuvent être composés que des chiffres de 0 (zéro) à 7 (sept).</li> - <li>Un préfixe 0x (ou 0X) indique une notation hexadécimale. Les nombres hexadécimaux peuvent être composés de chiffres (0-9) et des lettres A à F (minuscules et majuscules) (la casse d'un caractère ne modifie pas sa valeur : <code>0xa = 0xA = 10</code> et <code>0xf = 0xF = 15</code>).</li> - <li>Un préfixe 0b (ou 0B) indique une notation binaire. Les nombres binaires peuvent être composés de 0 ou de 1 uniquement.</li> -</ul> +- Les littéraux représentant des entiers décimaux sont une suite de chiffres qui ne commence pas par un 0 (zéro) +- Un 0 (zéro) en préfixe indique que le littéral est en notation octale. Ces nombres ne peuvent être composés que des chiffres de 0 (zéro) à 7 (sept). +- Un préfixe 0x (ou 0X) indique une notation hexadécimale. Les nombres hexadécimaux peuvent être composés de chiffres (0-9) et des lettres A à F (minuscules et majuscules) (la casse d'un caractère ne modifie pas sa valeur : `0xa = 0xA = 10` et `0xf = 0xF = 15`). +- Un préfixe 0b (ou 0B) indique une notation binaire. Les nombres binaires peuvent être composés de 0 ou de 1 uniquement. -<p>Voici des exemples pour ces littéraux :</p> +Voici des exemples pour ces littéraux : -<pre class="eval">0, 117, -345, 123456789123456789n (notation décimale, base 10) -015, 0001, -077, 0o7777777777777n (notation octale, base 8) -0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn (notation hexadécimale, base 16) -0b11, 0B0011, -0b11, 0b11101001010101010101n (notation binaire, base 2) -</pre> + 0, 117, -345, 123456789123456789n (notation décimale, base 10) + 015, 0001, -077, 0o7777777777777n (notation octale, base 8) + 0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn (notation hexadécimale, base 16) + 0b11, 0B0011, -0b11, 0b11101001010101010101n (notation binaire, base 2) -<p>Pour plus d'informations, voir <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Littéraux_numériques">les littéraux numériques dans la grammaire lexicale de JavaScript</a>.</p> +Pour plus d'informations, voir [les littéraux numériques dans la grammaire lexicale de JavaScript](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Littéraux_numériques). -<h3 id="Les_littéraux_de_nombres_décimaux">Les littéraux de nombres décimaux</h3> +### Les littéraux de nombres décimaux -<p>Un littéral de nombre décimal peut être composé de ces différentes parties :</p> +Un littéral de nombre décimal peut être composé de ces différentes parties : -<ul> - <li>Un entier, pouvant être signé (précédé d'un « + » ou d'un « - »),</li> - <li>Un point, séparateur décimal (« . »),</li> - <li>La partie décimale (un autre nombre)</li> - <li>Un exposant.</li> -</ul> +- Un entier, pouvant être signé (précédé d'un « + » ou d'un « - »), +- Un point, séparateur décimal (« . »), +- La partie décimale (un autre nombre) +- Un exposant. -<p>L'exposant est la partie du nombre décimal commençant par un « e » ou un « E », suivie d'un entier pouvant être signé (précédé d'un « + » ou d'un « - »). Un littéral de nombre décimal doit comporter au moins un chiffre et soit un point (séparateur décimal) soit un « e » ou un « E ».</p> +L'exposant est la partie du nombre décimal commençant par un « e » ou un « E », suivie d'un entier pouvant être signé (précédé d'un « + » ou d'un « - »). Un littéral de nombre décimal doit comporter au moins un chiffre et soit un point (séparateur décimal) soit un « e » ou un « E ». -<p>Des exemples sont : 3.1415, -3.1E12, .1e12, et 2E-12.</p> +Des exemples sont : 3.1415, -3.1E12, .1e12, et 2E-12. -<p>On peut raccourcir cette syntaxe en :</p> +On peut raccourcir cette syntaxe en : -<pre class="eval">[(+|-)][chiffres].[chiffres][(E|e)[(+|-)]chiffres] -</pre> + [(+|-)][chiffres].[chiffres][(E|e)[(+|-)]chiffres] -<p>Par exemple :</p> +Par exemple : -<pre class="eval">3.14 -2345.789 -.3333333333333333333 -</pre> + 3.14 + 2345.789 + .3333333333333333333 -<h3 id="Les_littéraux_d'objets">Les littéraux d'objets</h3> +### Les littéraux d'objets -<p>Un littéral d'objet - ou 'objet littéral' - est une liste de zéro ou plusieurs propriétés définies par des paires de noms/valeurs. Ces paires sont délimitées par des accolades (<code>{}</code>). N'utilisez pas un tel littéral en début d'instruction. En effet, l'accolade ouvrante sera mal interprétée (début de bloc) et causera une erreur ou un comportement incohérent.</p> +Un littéral d'objet - ou 'objet littéral' - est une liste de zéro ou plusieurs propriétés définies par des paires de noms/valeurs. Ces paires sont délimitées par des accolades (`{}`). N'utilisez pas un tel littéral en début d'instruction. En effet, l'accolade ouvrante sera mal interprétée (début de bloc) et causera une erreur ou un comportement incohérent. -<p>L'exemple qui suit montre l'utilisation d'un littéral d'objet. Le premier élément de l'objet <code>voiture</code> définit une propriété <code>maVoiture</code>, le deuxième élément : la propriété <code>getVoiture</code> invoque une fonction <code>(carTypes("Honda")),</code> le troisième élément, la propriété <code>special</code> utilise une variable existante (<code>soldes</code>).</p> +L'exemple qui suit montre l'utilisation d'un littéral d'objet. Le premier élément de l'objet `voiture` définit une propriété `maVoiture`, le deuxième élément : la propriété `getVoiture` invoque une fonction `(carTypes("Honda")),` le troisième élément, la propriété `special` utilise une variable existante (`soldes`). -<pre class="brush: js">var soldes = "Toyota"; +```js +var soldes = "Toyota"; function carTypes(nom) { return (nom === "Honda") ? @@ -466,19 +472,21 @@ var voiture = { maVoiture: "Saturn", getVoiture: carTypes("Honda"), spécial: so console.log(voiture.maVoiture); // Saturn console.log(voiture.getVoiture); // Honda console.log(voiture.spécial); // Toyota -</pre> +``` -<p>Il est également possible d'utiliser un littéral numérique ou un littéral de chaîne de caractères pour désigner le nom d'une propriété ou pour imbriquer un objet dans un autre. L'exemple qui suit illustre cette possibilité :</p> +Il est également possible d'utiliser un littéral numérique ou un littéral de chaîne de caractères pour désigner le nom d'une propriété ou pour imbriquer un objet dans un autre. L'exemple qui suit illustre cette possibilité : -<pre class="brush: js">var voiture = { plusieursVoitures: {a: "Saab", b: "Jeep"}, 7: "Mazda" }; +```js +var voiture = { plusieursVoitures: {a: "Saab", b: "Jeep"}, 7: "Mazda" }; console.log(voiture.plusieursVoitures.b); // Jeep console.log(voiture[7]); // Mazda -</pre> +``` -<p>Les noms des propriétés d'objets peuvent être n'importe quelle chaîne de caractères, y compris la chaîne vide. Si le nom de la propriété n'est pas un <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables">identifiant</a> valide, il faudra qu'il soit placé entre guillemets. Les noms de propriétés qui ne sont pas des identifiants valides ne peuvent pas être utilisés pour accéder à la valeur en utilisant la notation pointée (objet.propriété). En revanche, il est possible d'y accéder avec la notation utilisant les crochets ("<code>[]</code>") comme pour les tableaux.</p> +Les noms des propriétés d'objets peuvent être n'importe quelle chaîne de caractères, y compris la chaîne vide. Si le nom de la propriété n'est pas un [identifiant](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables) valide, il faudra qu'il soit placé entre guillemets. Les noms de propriétés qui ne sont pas des identifiants valides ne peuvent pas être utilisés pour accéder à la valeur en utilisant la notation pointée (objet.propriété). En revanche, il est possible d'y accéder avec la notation utilisant les crochets ("`[]`") comme pour les tableaux. -<pre class="brush: js">var nomsBizarres = { +```js +var nomsBizarres = { "": "Chaîne vide", "!": "Bang !" } @@ -486,14 +494,14 @@ console.log(nomsBizarres.""); // SyntaxError: Unexpected string console.log(nomsBizarres[""]); // Chaîne vide console.log(nomsBizarres.!); // SyntaxError: Unexpected token ! console.log(nomsBizarres["!"]); // Bang ! +``` -</pre> - -<h4 id="Augmentation_des_littéraux_d'objets_avec_ES2015ES6">Augmentation des littéraux d'objets avec ES2015/ES6</h4> +#### Augmentation des littéraux d'objets avec ES2015/ES6 -<p>Avec ES2015, les littéraux d'objets permettent de définir le prototype lors de la construction de l'objet, permettent d'utiliser les affectations en notation raccourcie : <code>toto: toto</code>, de définir des méthodes, d'appeler les méthodes de l'objet parent avec <code>super</code> et d'utiliser des noms de propriétés calculées.</p> +Avec ES2015, les littéraux d'objets permettent de définir le prototype lors de la construction de l'objet, permettent d'utiliser les affectations en notation raccourcie : `toto: toto`, de définir des méthodes, d'appeler les méthodes de l'objet parent avec `super` et d'utiliser des noms de propriétés calculées. -<pre class="brush: js">var obj = { +```js +var obj = { // __proto__ __proto__: lePrototypeDeLObjet, // Notation raccourcie pour ‘handler: handler’ @@ -504,50 +512,54 @@ console.log(nomsBizarres["!"]); // Bang ! return "d " + super.toString(); }, // Noms de propriétés calculés dynamiquement - [ 'prop_' + (() => 42)() ]: 42 -};</pre> + [ 'prop_' + (() => 42)() ]: 42 +}; +``` -<p>Attention :</p> +Attention : -<pre class="brush: js">var toto = {a: "alpha", 2: "deux"}; +```js +var toto = {a: "alpha", 2: "deux"}; console.log(toto.a); // alpha console.log(toto[2]); // deux //console.log(toto.2); // Erreur: parenthèse ) manquante après la liste d'argument //console.log(toto[a]); // Erreur: a n'est pas défini console.log(toto["a"]); // alpha console.log(toto["2"]); // deux -</pre> +``` -<h3 id="Les_littéraux_d'expressions_rationnelles">Les littéraux d'expressions rationnelles</h3> +### Les littéraux d'expressions rationnelles -<p>Un littéral d'<a href="/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res">expression rationnelle</a> est un motif encadré par deux barres obliques. Par exemple :</p> +Un littéral d'[expression rationnelle](/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res) est un motif encadré par deux barres obliques. Par exemple : -<pre class="brush: js">var re = /ab+c/;</pre> +```js +var re = /ab+c/; +``` -<h3 id="Les_littéraux_de_chaînes_de_caractères">Les littéraux de chaînes de caractères</h3> +### Les littéraux de chaînes de caractères -<p>Un littéral de chaîne de caractères consiste en zéro ou plusieurs caractères encadrés par des guillemets droits doubles (<code>"</code>) ou des guillemets droits simples (<code>'</code>). Une chaîne de caractères doit être encadrée par des symboles du même type (guillemets droits doubles ou guillemets droits simples) :</p> +Un littéral de chaîne de caractères consiste en zéro ou plusieurs caractères encadrés par des guillemets droits doubles (`"`) ou des guillemets droits simples (`'`). Une chaîne de caractères doit être encadrée par des symboles du même type (guillemets droits doubles ou guillemets droits simples) : -<ul> - <li><code>"toto"</code></li> - <li><code>'truc'</code></li> - <li><code>"1234"</code></li> - <li><code>"Une ligne \n une autre ligne"</code></li> - <li><code>"Aujourd'hui j'ai mangé une pomme"</code></li> -</ul> +- `"toto"` +- `'truc'` +- `"1234"` +- `"Une ligne \n une autre ligne"` +- `"Aujourd'hui j'ai mangé une pomme"` -<p>Il est possible d'utiliser les méthodes de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String"><code>String</code></a> sur un tel littéral. JavaScript convertira automatiquement le littéral en un objet <code>String</code>, appellera la méthode puis détruira l'objet <code>String</code>. On peut également utiliser la propriété <code>String.length</code> sur un littéral de chaîne de caractère :</p> +Il est possible d'utiliser les méthodes de [`String`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) sur un tel littéral. JavaScript convertira automatiquement le littéral en un objet `String`, appellera la méthode puis détruira l'objet `String`. On peut également utiliser la propriété `String.length` sur un littéral de chaîne de caractère : -<pre class="brush: js">console.log("j'ai mangé une pomme".length) +```js +console.log("j'ai mangé une pomme".length) // Affichera le nombre de caractères (y compris les blancs). // Dans ce cas, 20. -</pre> +``` -<p>Il est préférable d'utiliser des littéraux de chaînes de caractères s'il n'est pas spécifiquement nécessaire d'utiliser un objet <code>String</code>. Voir la page sur l'objet <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String"><code>String</code></a> pour plus de détails sur les objets <code>String</code>.</p> +Il est préférable d'utiliser des littéraux de chaînes de caractères s'il n'est pas spécifiquement nécessaire d'utiliser un objet `String`. Voir la page sur l'objet [`String`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) pour plus de détails sur les objets `String`. -<p>Avec ECMAScript 2015, on peut également utiliser des littéraux sous forme de <em>gabarits</em> (<em>templates</em>) en utilisant le caractère accent grave (`) comme séparateur. Les gabarits de chaînes de caractères sont semblables aux fonctionnalités d'interpolation existantes en Python, Perl, etc. Ces gabarits permettent d'utiliser des balises afin d'adapter la construction de chaînes.</p> +Avec ECMAScript 2015, on peut également utiliser des littéraux sous forme de _gabarits_ (_templates_) en utilisant le caractère accent grave (\`) comme séparateur. Les gabarits de chaînes de caractères sont semblables aux fonctionnalités d'interpolation existantes en Python, Perl, etc. Ces gabarits permettent d'utiliser des balises afin d'adapter la construction de chaînes. -<pre class="brush: js">// Littéral simple pour une chaîne +```js +// Littéral simple pour une chaîne `Un saut de ligne '\n' en JavaScript.` // On peut écrire une chaîne sur plusieurs @@ -562,149 +574,102 @@ var nom = "Robert", jour = "aujourd'hui"; // On peut construire un préfixe HTTP // afin de construire plus facilement // des requêtes via des substitutions -POST`http://toto.org/truc?a=${a}&b=${b} +POST`http://toto.org/truc?a=${a}&b=${b} Content-Type: application/json X-Credentials: ${credentials} { "toto": ${toto}, - "truc": ${truc}}`(myOnReadyStateChangeHandler);</pre> - -<h4 id="Utilisation_des_caractères_spéciaux">Utilisation des caractères spéciaux</h4> - -<p>En plus des caractères « classiques », il est possible d'insérer des caractères spéciaux dans les chaînes de caractères. Voici un exemple :</p> - -<pre class="brush: js">"une ligne \n une autre ligne" -</pre> - -<p>Voici un tableau listant les caractères spéciaux qu'il est possible d'utiliser dans les chaînes de caractères JavaScript :</p> - -<table class="standard-table"> - <caption>Caractères spéciaux en JavaScript</caption> - <thead> - <tr> - <th scope="col">Caractère</th> - <th scope="col">Signification</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>\0</code></td> - <td>Octet null</td> - </tr> - <tr> - <td><code>\b</code></td> - <td>Retour arrière</td> - </tr> - <tr> - <td><code>\f</code></td> - <td>Saut de page</td> - </tr> - <tr> - <td><code>\n</code></td> - <td>Nouvelle ligne</td> - </tr> - <tr> - <td><code>\r</code></td> - <td>Retour chariot</td> - </tr> - <tr> - <td><code>\t</code></td> - <td>Tabulation</td> - </tr> - <tr> - <td><code>\v</code></td> - <td>Tabulation verticale</td> - </tr> - <tr> - <td><code>\'</code></td> - <td>Apostrophe ou guillemet droit simple</td> - </tr> - <tr> - <td><code>\"</code></td> - <td>Guillemet droit double</td> - </tr> - <tr> - <td><code>\\</code></td> - <td>Barre oblique inversée</td> - </tr> - <tr> - <td><code>\<em>XXX</em></code></td> - <td>Le caractère dont l'encodage Latin-1 est spécifié grâce à, au plus, 3 chiffres octaux<em> XXX</em> entre 0 et 377. \251, par exemple représente le caractère copyright.</td> - </tr> - <tr> - </tr> - <tr> - <td><code>\x<em>XX</em></code></td> - <td>Le caractère dont l'encodage Latin-1 est spécifié par deux chiffres hexadécimaux entre 00 et FF. Ainsi, \xA9 correspond à la séquence hexadécimale pour le caractère copyright.</td> - </tr> - <tr> - </tr> - <tr> - <td><code>\u<em>XXXX</em></code></td> - <td>Le caractère Unicode spécifié par quatre chiffres hexadécimaux <em>XXXX</em>. Ainsi, \u00A9 correspondra à la séquence Unicode du symbole copyright. Voir {{anch("Unicode escape sequences")}}.</td> - </tr> - <tr> - <td><code>\u{<em>XXXXX}</em></code></td> - <td>Échappement de codes Unicode. Par exemple, \u{2F804} est équivalent à la combinaison d'échappements « simples » \uD87E\uDC04.</td> - </tr> - </tbody> -</table> - -<h4 id="Les_caractères_d'échappement">Les caractères d'échappement</h4> - -<p>Pour les caractères qui ne font pas partie du tableau précédent, les barres obliques inversées (<em>backslash</em>) les précédant sont ignorées. Cependant, cet usage est obsolète et devrait être évité.</p> - -<p>En précédant d'une barre oblique inversée les guillemets droits doubles, on <em>échappe </em>ces caractères. Voici un exemple :</p> - -<pre class="brush: js">var citation = "Il lit \"Bug Jargal\" de V. Hugo."; + "truc": ${truc}}`(myOnReadyStateChangeHandler); +``` + +#### Utilisation des caractères spéciaux + +En plus des caractères « classiques », il est possible d'insérer des caractères spéciaux dans les chaînes de caractères. Voici un exemple : + +```js +"une ligne \n une autre ligne" +``` + +Voici un tableau listant les caractères spéciaux qu'il est possible d'utiliser dans les chaînes de caractères JavaScript : + +| Caractère | Signification | +| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `\0` | Octet null | +| `\b` | Retour arrière | +| `\f` | Saut de page | +| `\n` | Nouvelle ligne | +| `\r` | Retour chariot | +| `\t` | Tabulation | +| `\v` | Tabulation verticale | +| `\'` | Apostrophe ou guillemet droit simple | +| `\"` | Guillemet droit double | +| `\\` | Barre oblique inversée | +| `\XXX` | Le caractère dont l'encodage Latin-1 est spécifié grâce à, au plus, 3 chiffres octaux _XXX_ entre 0 et 377. \251, par exemple représente le caractère copyright. | +| | | +| `\xXX` | Le caractère dont l'encodage Latin-1 est spécifié par deux chiffres hexadécimaux entre 00 et FF. Ainsi, \xA9 correspond à la séquence hexadécimale pour le caractère copyright. | +| | | +| `\uXXXX` | Le caractère Unicode spécifié par quatre chiffres hexadécimaux _XXXX_. Ainsi, \u00A9 correspondra à la séquence Unicode du symbole copyright. Voir {{anch("Unicode escape sequences")}}. | +| `\u{XXXXX}` | Échappement de codes Unicode. Par exemple, \u{2F804} est équivalent à la combinaison d'échappements « simples » \uD87E\uDC04. | + +#### Les caractères d'échappement + +Pour les caractères qui ne font pas partie du tableau précédent, les barres obliques inversées (_backslash_) les précédant sont ignorées. Cependant, cet usage est obsolète et devrait être évité. + +En précédant d'une barre oblique inversée les guillemets droits doubles, on _échappe_ ces caractères. Voici un exemple : + +```js +var citation = "Il lit \"Bug Jargal\" de V. Hugo."; console.log(citation); -</pre> +``` -<p>Le résultat serait alors</p> +Le résultat serait alors -<pre class="eval">Il lit "Bug Jargal" de V. Hugo.</pre> + Il lit "Bug Jargal" de V. Hugo. -<p>Pour inclure une barre oblique inversée dans une chaîne de caractères, il faut aussi l'échapper. Par exemple, pour stocker le chemin <code>c:\temp</code> dans une chaîne de caractères, on utilisera le code suivant :</p> +Pour inclure une barre oblique inversée dans une chaîne de caractères, il faut aussi l'échapper. Par exemple, pour stocker le chemin `c:\temp` dans une chaîne de caractères, on utilisera le code suivant : -<pre class="brush: js">var chemin = "c:\\temp"; -</pre> +```js +var chemin = "c:\\temp"; +``` -<p>Il est également possible d'échapper des sauts de lignes de la même façon. La barre oblique inversée et le saut de ligne seront alors ignorés dans la valeur de la chaîne de caractères.</p> +Il est également possible d'échapper des sauts de lignes de la même façon. La barre oblique inversée et le saut de ligne seront alors ignorés dans la valeur de la chaîne de caractères. -<pre class="brush: js">var str = "cette chaîne \ +```js +var str = "cette chaîne \ est cassée \ sur plusieurs \ lignes." console.log(str); // cette chaîne est cassée sur plusieurs lignes. -</pre> +``` -<p>Avant ECMAScript 2015 (ES6), JavaScript ne disposait pas d'une syntaxe permettant de traiter les chaînes de caractères comme des contenus de fichier, il est possible d'ajouter un caractère de saut de ligne échappé et un saut de ligne en fin de ligne en utilisant cette façon :</p> +Avant ECMAScript 2015 (ES6), JavaScript ne disposait pas d'une syntaxe permettant de traiter les chaînes de caractères comme des contenus de fichier, il est possible d'ajouter un caractère de saut de ligne échappé et un saut de ligne en fin de ligne en utilisant cette façon : -<pre class="brush: js">var poème = +```js +var poème = "Les roses sont rouges,\n\ Les violettes sont bleues.\n\ Le miel est sucré,\n\ Et moi je suis." -</pre> +``` -<p>Grâce à ES6, on peut utiliser des <a href="https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres">littéraux de gabarits qui offrent de nouvelles fonctionnalités</a> dont une qui permet d'avoir des chaînes de caractères écrites sur plusieurs lignes :</p> +Grâce à ES6, on peut utiliser des [littéraux de gabarits qui offrent de nouvelles fonctionnalités](https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres) dont une qui permet d'avoir des chaînes de caractères écrites sur plusieurs lignes : -<pre class="brush: js">var poème = +```js +var poème = `Les roses sont rouges, Les violettes sont bleues, Le miel est sucré, -Et moi je suis.`</pre> +Et moi je suis.` +``` -<h2 id="En_savoir_plus">En savoir plus</h2> +## En savoir plus -<p>Ce chapitre est centré sur les bases de la syntaxe, les déclarations et les types utilisés en JavaScript. Pour en savoir plus sur les différents composants du langage, voir les chapitres suivants du guide:</p> +Ce chapitre est centré sur les bases de la syntaxe, les déclarations et les types utilisés en JavaScript. Pour en savoir plus sur les différents composants du langage, voir les chapitres suivants du guide: -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs">Contrôle du flux et gestion des erreurs</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_itération">Boucles et itération</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs">Expressions et opérateurs</a></li> -</ul> +- [Contrôle du flux et gestion des erreurs](/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs) +- [Boucles et itération](/fr/docs/Web/JavaScript/Guide/Boucles_et_itération) +- [Fonctions](/fr/docs/Web/JavaScript/Guide/Fonctions) +- [Expressions et opérateurs](/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs) -<p>Dans le chapitre suivant, on abordera les structures conditionnelles, permettant de diriger le flux d'instructions et la gestion des erreurs.</p> +Dans le chapitre suivant, on abordera les structures conditionnelles, permettant de diriger le flux d'instructions et la gestion des erreurs. -<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}}</p> +{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}} diff --git a/files/fr/web/javascript/guide/index.md b/files/fr/web/javascript/guide/index.md index ef708eef08..bcf109d502 100644 --- a/files/fr/web/javascript/guide/index.md +++ b/files/fr/web/javascript/guide/index.md @@ -6,164 +6,131 @@ tags: - JavaScript translation_of: Web/JavaScript/Guide --- -<div>{{jsSidebar("JavaScript Guide")}}</div> - -<p>Le guide JavaScript illustre comment utiliser <a href="/fr/docs/Web/JavaScript">JavaScript</a> et fournit un aperçu des fonctionnalités du langage. Pour des informations exhaustives à propos des fonctionnalités du langage, voir la <a href="/fr/docs/Web/JavaScript/Reference">référence JavaScript</a>.</p> - -<h2 id="Chapitres">Chapitres</h2> - -<p>Ce guide est divisé en plusieurs chapitres :</p> - -<h2 id="Introduction"><a href="/fr/docs/Web/JavaScript/Guide/Introduction">Introduction</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Introduction#o.c3.b9_trouver_des_informations_concernant_javascript">À propos de ce guide</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Introduction#qu'est-ce_que_javascript_.3f">À propos de JavaScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Introduction#javascript_and_java">JavaScript et Java</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Introduction#javascript_and_the_ecmascript_specification">ECMAScript</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Introduction#d.c3.a9marrer_avec_javascript">Les outils</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Introduction#coucou_monde_(hello_world)">Hello World</a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types">Grammaire et types</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#les_bases_du_langage">Syntaxe de base et commentaires</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#d.c3.a9clarations">Déclarations</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#les_port.c3.a9es_de_variables">Portées des variables</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#remont.c3.a9e_de_variables_(hoisting)">Remontée des variables</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#structures_de_donn.c3.a9es_et_types">Structures de données et types</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#litt.c3.a9raux">Littéraux</a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Contrôle du flux et gestion des erreurs</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#Instruction_if...else"><code>if...else</a></code></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#L%27instruction_switch"><code>switch</a></code></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#L%27instruction_try...catch"><code>try/catch/throw</a></code></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#Utiliser_les_objets_Error">Objets <code>Error</code></a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Loops_and_iteration">Itération et boucles</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_for"><code>for</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_while"><code>while</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_do...while"><code>do...while</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_break"><code>break</code></a>/<a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_continue">continue</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_for...in"><code>for..in</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Loops_and_iteration#l'instruction_for...of"><code>for..of</code></a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Functions">Fonctions</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Functions#d.c3.a9finir_des_fonctions">Définir des fonctions</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Functions#appeler_des_fonctions">Appeler des fonctions</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Functions#port.c3.a9e_d'une_fonction">Portées des fonctions</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Functions#fermetures_(closures)">Fermetures (<em>closures</em>)</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Functions#utiliser_l'objet_arguments">Arguments</a> et <a href="/fr/docs/Web/JavaScript/Guide/Functions#param.c3.a8tres_des_fonctions">paramètres</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Functions#fonctions_fl.c3.a9ch.c3.a9es">Fonctions fléchées</a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions et opérateurs</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_d%27affectation">Affectation</a> et <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_de_comparaison">comparaisons</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#op.c3.a9rateurs_arithm.c3.a9tiques">Opérateurs arithmétiques</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_binaires">Opérateurs binaires</a> et <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_logiques">logiques</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateur_conditionnel_ternaire">Opérateur conditionnel</a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates">Nombres et dates</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#nombres">Littéraux numériques</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#l'objet_number">Objet <code>Number</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#l'objet_math">Objet <code>Math</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#l'objet_date">Objet <code>Date</code></a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting">Formatage du texte</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting#les_litt.c3.a9raux_de_cha.c3.aenes_de_caract.c3.a8res">Littéraux de chaînes de caractères</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting#les_objets_string">Objet <code>String</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting#les_litt%c3%a9raux_de_gabarits">Littéraux de gabarits</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting#internationalisation">Internationalisation</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Text_formatting#les_expressions_rationnelles">Expressions rationnelles</a></li> -</ul> - - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Indexed_collections#le_type_array">Collections indexées</a></h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#array_object">Tableaux</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Indexed_collections#les_tableaux_typ.c3.a9s">Tableaux typés</a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Keyed_collections">Collections avec clés</a> - <code><a href="/fr/docs/Web/JavaScript/Guide/Keyed_collections#le_type_map">Map</a></code></h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#weakmap_object"><code>WeakMap</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Keyed_collections#le_type_set"><code>Set</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Keyed_collections#le_type_weakset"><code>WeakSet</code></a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Working_with_Objects">Utiliser les objets</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Working_with_Objects#les_objets_et_les_propri.c3.a9t.c3.a9s">Objets et propriétés</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Working_with_Objects#cr.c3.a9er_de_nouveaux_objets">Création d'objets</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Working_with_Objects#d.c3.a9finir_des_m.c3.a9thodes">Définition de méthodes</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Working_with_Objects#d.c3.a9finir_des_accesseurs_et_des_mutateurs_(getters_et_setters)">Accesseurs et mutateurs</a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Le modèle objet JavaScript en détails</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#langages_de_prototypes_.2f_langages_de_classes">Modèle à base de prototypes</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#la_cr.c3.a9ation_de_la_hi.c3.a9rarchie">Créer des hiérarchies d'objets</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#l'h.c3.a9ritage_de_propri.c3.a9t.c3.a9s_.3a_les_subtilit.c3.a9s">Héritage</a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Using_promises">Promesses</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Using_promises#garanties">Garanties</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Using_promises#cha%c3%aenage_des_promesses">Chaînage</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Using_promises#propagation_des_erreurs">Propagation des erreurs</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Using_promises#composition">Composition</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Using_promises#gestion_du_temps">Gestion du temps</a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators">Itérateurs et générateurs</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators#it.c3.a9rateurs">Itérateurs</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators#it.c3.a9rables">Itérables</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators#g.c3.a9n.c3.a9rateurs">Générateurs</a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Meta_programming">Métaprogrammation</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Meta_programming#les_proxies"><code>Proxy</code></a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Meta_programming#les_gestionnaires_et_les_trappes">Gestionnaires et trappes</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Meta_programming#proxies_r.c3.a9vocables">Proxy révocable</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Meta_programming#r.c3.a9flexion"><code>Reflect</code></a></li> -</ul> - -<h2><a href="/fr/docs/Web/JavaScript/Guide/Modules">Modules JavaScript</a></h2> - -<ul> - <li><a href="/fr/docs/Web/JavaScript/Guide/Modules#exporting_module_features">Exporter</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Modules#importing_features_into_your_script">Importer</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Modules#default_exports_versus_named_exports">Exports par défaut</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Modules#renaming_imports_and_exports">Renommage</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Modules#aggregating_modules">Agrégation de modules</a></li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Modules#dynamic_module_loading">Chargement dynamique de modules</a></li> -</ul> - -<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> +{{jsSidebar("JavaScript Guide")}} + +Le guide JavaScript illustre comment utiliser [JavaScript](/fr/docs/Web/JavaScript) et fournit un aperçu des fonctionnalités du langage. Pour des informations exhaustives à propos des fonctionnalités du langage, voir la [référence JavaScript](/fr/docs/Web/JavaScript/Reference). + +## Chapitres + +Ce guide est divisé en plusieurs chapitres : + +## [Introduction](/fr/docs/Web/JavaScript/Guide/Introduction) + +- [À propos de ce guide](/fr/docs/Web/JavaScript/Guide/Introduction#o.c3.b9_trouver_des_informations_concernant_javascript) +- [À propos de JavaScript](/fr/docs/Web/JavaScript/Guide/Introduction#qu'est-ce_que_javascript_.3f) +- [JavaScript et Java](/fr/docs/Web/JavaScript/Guide/Introduction#javascript_and_java) +- [ECMAScript](/fr/docs/Web/JavaScript/Guide/Introduction#javascript_and_the_ecmascript_specification) +- [Les outils](/fr/docs/Web/JavaScript/Guide/Introduction#d.c3.a9marrer_avec_javascript) +- [Hello World](</fr/docs/Web/JavaScript/Guide/Introduction#coucou_monde_(hello_world)>) + +## [Grammaire et types](/fr/docs/Web/JavaScript/Guide/Grammar_and_types) + +- [Syntaxe de base et commentaires](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#les_bases_du_langage) +- [Déclarations](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#d.c3.a9clarations) +- [Portées des variables](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#les_port.c3.a9es_de_variables) +- [Remontée des variables](</fr/docs/Web/JavaScript/Guide/Grammar_and_types#remont.c3.a9e_de_variables_(hoisting)>) +- [Structures de données et types](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#structures_de_donn.c3.a9es_et_types) +- [Littéraux](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#litt.c3.a9raux) + +## [Contrôle du flux et gestion des erreurs](/fr/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) + +- [`if...else`](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#Instruction_if...else) +- [`switch`](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#L%27instruction_switch) +- [`try/catch/throw`](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#L%27instruction_try...catch) +- [Objets `Error`](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#Utiliser_les_objets_Error) + +## [Itération et boucles](/fr/docs/Web/JavaScript/Guide/Loops_and_iteration) + +- [`for`](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_for) +- [`while`](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_while) +- [`do...while`](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_do...while) +- [`break`](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_break)/[continue](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_continue) +- [`for..in`](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_for...in) +- [`for..of`](/fr/docs/Web/JavaScript/Guide/Loops_and_iteration#l'instruction_for...of) + +## [Fonctions](/fr/docs/Web/JavaScript/Guide/Functions) + +- [Définir des fonctions](/fr/docs/Web/JavaScript/Guide/Functions#d.c3.a9finir_des_fonctions) +- [Appeler des fonctions](/fr/docs/Web/JavaScript/Guide/Functions#appeler_des_fonctions) +- [Portées des fonctions](/fr/docs/Web/JavaScript/Guide/Functions#port.c3.a9e_d'une_fonction) +- [Fermetures (_closures_)](</fr/docs/Web/JavaScript/Guide/Functions#fermetures_(closures)>) +- [Arguments](/fr/docs/Web/JavaScript/Guide/Functions#utiliser_l'objet_arguments) et [paramètres](/fr/docs/Web/JavaScript/Guide/Functions#param.c3.a8tres_des_fonctions) +- [Fonctions fléchées](/fr/docs/Web/JavaScript/Guide/Functions#fonctions_fl.c3.a9ch.c3.a9es) + +## [Expressions et opérateurs](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators) + +- [Affectation](/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_d%27affectation) et [comparaisons](/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_de_comparaison) +- [Opérateurs arithmétiques](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#op.c3.a9rateurs_arithm.c3.a9tiques) +- [Opérateurs binaires](/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_binaires) et [logiques](/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_logiques) +- [Opérateur conditionnel](/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateur_conditionnel_ternaire) + +## [Nombres et dates](/fr/docs/Web/JavaScript/Guide/Numbers_and_dates) + +- [Littéraux numériques](/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#nombres) +- [Objet `Number`](/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#l'objet_number) +- [Objet `Math`](/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#l'objet_math) +- [Objet `Date`](/fr/docs/Web/JavaScript/Guide/Numbers_and_dates#l'objet_date) + +## [Formatage du texte](/fr/docs/Web/JavaScript/Guide/Text_formatting) + +- [Littéraux de chaînes de caractères](/fr/docs/Web/JavaScript/Guide/Text_formatting#les_litt.c3.a9raux_de_cha.c3.aenes_de_caract.c3.a8res) +- [Objet `String`](/fr/docs/Web/JavaScript/Guide/Text_formatting#les_objets_string) +- [Littéraux de gabarits](/fr/docs/Web/JavaScript/Guide/Text_formatting#les_litt%c3%a9raux_de_gabarits) +- [Internationalisation](/fr/docs/Web/JavaScript/Guide/Text_formatting#internationalisation) +- [Expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Text_formatting#les_expressions_rationnelles) + +## [Collections indexées](/fr/docs/Web/JavaScript/Guide/Indexed_collections#le_type_array) + +- [Tableaux](/en-US/docs/Web/JavaScript/Guide/Indexed_collections#array_object) +- [Tableaux typés](/fr/docs/Web/JavaScript/Guide/Indexed_collections#les_tableaux_typ.c3.a9s) + +## [Collections avec clés](/fr/docs/Web/JavaScript/Guide/Keyed_collections) - [`Map`](/fr/docs/Web/JavaScript/Guide/Keyed_collections#le_type_map) + +- [`WeakMap`](/en-US/docs/Web/JavaScript/Guide/Keyed_collections#weakmap_object) +- [`Set`](/fr/docs/Web/JavaScript/Guide/Keyed_collections#le_type_set) +- [`WeakSet`](/fr/docs/Web/JavaScript/Guide/Keyed_collections#le_type_weakset) + +## [Utiliser les objets](/fr/docs/Web/JavaScript/Guide/Working_with_Objects) + +- [Objets et propriétés](/fr/docs/Web/JavaScript/Guide/Working_with_Objects#les_objets_et_les_propri.c3.a9t.c3.a9s) +- [Création d'objets](/fr/docs/Web/JavaScript/Guide/Working_with_Objects#cr.c3.a9er_de_nouveaux_objets) +- [Définition de méthodes](/fr/docs/Web/JavaScript/Guide/Working_with_Objects#d.c3.a9finir_des_m.c3.a9thodes) +- [Accesseurs et mutateurs](</fr/docs/Web/JavaScript/Guide/Working_with_Objects#d.c3.a9finir_des_accesseurs_et_des_mutateurs_(getters_et_setters)>) + +## [Le modèle objet JavaScript en détails](/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model) + +- [Modèle à base de prototypes](/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#langages_de_prototypes_.2f_langages_de_classes) +- [Créer des hiérarchies d'objets](/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#la_cr.c3.a9ation_de_la_hi.c3.a9rarchie) +- [Héritage](/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#l'h.c3.a9ritage_de_propri.c3.a9t.c3.a9s_.3a_les_subtilit.c3.a9s) + +## [Promesses](/fr/docs/Web/JavaScript/Guide/Using_promises) + +- [Garanties](/fr/docs/Web/JavaScript/Guide/Using_promises#garanties) +- [Chaînage](/fr/docs/Web/JavaScript/Guide/Using_promises#cha%c3%aenage_des_promesses) +- [Propagation des erreurs](/fr/docs/Web/JavaScript/Guide/Using_promises#propagation_des_erreurs) +- [Composition](/fr/docs/Web/JavaScript/Guide/Using_promises#composition) +- [Gestion du temps](/fr/docs/Web/JavaScript/Guide/Using_promises#gestion_du_temps) + +## [Itérateurs et générateurs](/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators) + +- [Itérateurs](/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators#it.c3.a9rateurs) +- [Itérables](/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators#it.c3.a9rables) +- [Générateurs](/fr/docs/Web/JavaScript/Guide/Iterators_and_Generators#g.c3.a9n.c3.a9rateurs) + +## [Métaprogrammation](/fr/docs/Web/JavaScript/Guide/Meta_programming) + +- [`Proxy`](/fr/docs/Web/JavaScript/Guide/Meta_programming#les_proxies) +- [Gestionnaires et trappes](/fr/docs/Web/JavaScript/Guide/Meta_programming#les_gestionnaires_et_les_trappes) +- [Proxy révocable](/fr/docs/Web/JavaScript/Guide/Meta_programming#proxies_r.c3.a9vocables) +- [`Reflect`](/fr/docs/Web/JavaScript/Guide/Meta_programming#r.c3.a9flexion) + +## [Modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules) + +- [Exporter](/fr/docs/Web/JavaScript/Guide/Modules#exporting_module_features) +- [Importer](/fr/docs/Web/JavaScript/Guide/Modules#importing_features_into_your_script) +- [Exports par défaut](/fr/docs/Web/JavaScript/Guide/Modules#default_exports_versus_named_exports) +- [Renommage](/fr/docs/Web/JavaScript/Guide/Modules#renaming_imports_and_exports) +- [Agrégation de modules](/fr/docs/Web/JavaScript/Guide/Modules#aggregating_modules) +- [Chargement dynamique de modules](/fr/docs/Web/JavaScript/Guide/Modules#dynamic_module_loading) + +{{Next("Web/JavaScript/Guide/Introduction")}} diff --git a/files/fr/web/javascript/guide/indexed_collections/index.md b/files/fr/web/javascript/guide/indexed_collections/index.md index 739de18bcc..8e1f789563 100644 --- a/files/fr/web/javascript/guide/indexed_collections/index.md +++ b/files/fr/web/javascript/guide/indexed_collections/index.md @@ -8,131 +8,139 @@ tags: translation_of: Web/JavaScript/Guide/Indexed_collections original_slug: Web/JavaScript/Guide/Collections_indexées --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}} -<p>Ce chapitre présente les collections de données qui sont ordonnées par un indice. Cela inclue les tableaux et les objets semblables à des tableaux que sont les objets {{jsxref("Array")}} et les objets {{jsxref("TypedArray")}}.</p> +Ce chapitre présente les collections de données qui sont ordonnées par un indice. Cela inclue les tableaux et les objets semblables à des tableaux que sont les objets {{jsxref("Array")}} et les objets {{jsxref("TypedArray")}}. -<h2 id="Le_type_Array">Le type <code>Array</code></h2> +## Le type `Array` -<p>Un <em>tableau</em> (<em>array</em> en anglais) est un ensemble ordonné de valeurs auxquelles on peut faire référence avec un nom et un indice. Par exemple, si on a un tableau <code>emp</code> qui contient les noms d'employés indexés par leurs numéros d'employé, on pourrait utiliser <code>emp[1]</code> pour accéder à l'employé n°1, <code>emp[2]</code> pour accéder au deuxième et ainsi de suite.</p> +Un _tableau_ (_array_ en anglais) est un ensemble ordonné de valeurs auxquelles on peut faire référence avec un nom et un indice. Par exemple, si on a un tableau `emp` qui contient les noms d'employés indexés par leurs numéros d'employé, on pourrait utiliser `emp[1]` pour accéder à l'employé n°1, `emp[2]` pour accéder au deuxième et ainsi de suite. -<p>JavaScript ne possède pas de type particulier pour représenter un tableau de données. En revanche, il est possible d'utiliser l'objet natif <code>Array</code> ainsi que ses méthodes pour manipuler des tableaux. L'objet <code>Array</code> possède plusieurs méthodes qui permettent de manipuler les tableaux pour les fusionner, les inverser, les trier, etc. Il possède une propriété de longueur ainsi que d'autres propriétés qui peuvent être utilisées avec les expressions rationnelles.</p> +JavaScript ne possède pas de type particulier pour représenter un tableau de données. En revanche, il est possible d'utiliser l'objet natif `Array` ainsi que ses méthodes pour manipuler des tableaux. L'objet `Array` possède plusieurs méthodes qui permettent de manipuler les tableaux pour les fusionner, les inverser, les trier, etc. Il possède une propriété de longueur ainsi que d'autres propriétés qui peuvent être utilisées avec les expressions rationnelles. -<h3 id="Créer_un_tableau">Créer un tableau</h3> +### Créer un tableau -<p>Les instructions qui suivent sont équivalentes et permettent de créer le même tableau :</p> +Les instructions qui suivent sont équivalentes et permettent de créer le même tableau : -<pre class="brush: js notranslate">var arr = new Array(élément0, élément1, ..., élémentN); +```js +var arr = new Array(élément0, élément1, ..., élémentN); var arr = Array(élément0, élément1, ..., élémentN); var arr = [élément0, élément1, ..., élémentN]; -</pre> +``` -<p><code>élément0, élément1, ..., élémentN</code> est une liste de valeurs qui formeront les éléments du tableau. Lorsque ces valeurs sont définies, le tableau initialisera la valeur des éléments correspondants. La propriété <code>length</code> du tableau permet de connaître le nombre d'arguments du tableau.</p> +`élément0, élément1, ..., élémentN` est une liste de valeurs qui formeront les éléments du tableau. Lorsque ces valeurs sont définies, le tableau initialisera la valeur des éléments correspondants. La propriété `length` du tableau permet de connaître le nombre d'arguments du tableau. -<p>Parmi les instructions précédentes, une utilise des crochets, on appelle ceci un « littéral de tableau » ou un « initialisateur de tableau ». Cette notation est plus courte que les autres et est souvent préférée pour sa lisibilité. Pour plus d'informations sur cette notation, voir la page sur <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire">les littéraux de tableaux</a> pour plus détails.</p> +Parmi les instructions précédentes, une utilise des crochets, on appelle ceci un « littéral de tableau » ou un « initialisateur de tableau ». Cette notation est plus courte que les autres et est souvent préférée pour sa lisibilité. Pour plus d'informations sur cette notation, voir la page sur [les littéraux de tableaux](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire) pour plus détails. -<p>Afin de créer un tableau de longueur non nulle mais sans aucun élément initialisé, on peut utiliser l'une des deux instructions suivantes :</p> +Afin de créer un tableau de longueur non nulle mais sans aucun élément initialisé, on peut utiliser l'une des deux instructions suivantes : -<pre class="brush: js notranslate">var arr = new Array(longueurTableau); +```js +var arr = new Array(longueurTableau); var arr = Array(longueurTableau); // Cela aura le même effet que : var arr = []; arr.length = longueurTableau; -</pre> +``` -<div class="note"> -<p><strong>Note :</strong> Dans le code ci-dessus <code>longueurTableau</code> doit être un nombre. Si ce n'est pas le cas, un tableau d'un seul élément (ayant la valeur fournie) sera créé. <code>arr.length</code> renverra <code>longueurTableau</code>, mais le tableau ne contiendra que des éléments « vides » non définis. Si on utilise une boucle {{jsxref("Instructions/for...in")}} sur ce tableau, on ne trouvera aucun élément.</p> -</div> +> **Note :** Dans le code ci-dessus `longueurTableau` doit être un nombre. Si ce n'est pas le cas, un tableau d'un seul élément (ayant la valeur fournie) sera créé. `arr.length` renverra `longueurTableau`, mais le tableau ne contiendra que des éléments « vides » non définis. Si on utilise une boucle {{jsxref("Instructions/for...in")}} sur ce tableau, on ne trouvera aucun élément. -<p>On a vu comment créer un tableau, il est aussi possible d'affecter des tableaux à des propriétés d'objets (que ce soit lors de leur création ou pour les modifier) :</p> +On a vu comment créer un tableau, il est aussi possible d'affecter des tableaux à des propriétés d'objets (que ce soit lors de leur création ou pour les modifier) : -<pre class="brush: js notranslate">var obj = {}; +```js +var obj = {}; // ... obj.prop = [élément0, élément1, ..., élémentN]; // OU var obj = {prop: [élément0, élément1, ...., élémentN]} -</pre> +``` -<p>Si on souhaite initialiser un tableau avec un seul élément et que cet élément est un nombre, il est nécessaire d'utiliser la notation littérale. En effet, si un nombre est passé à la fonction <code>Array()</code> pour construire le tableau, celui-ci sera interprété comme une longueur et non comme la valeur d'un élément.</p> +Si on souhaite initialiser un tableau avec un seul élément et que cet élément est un nombre, il est nécessaire d'utiliser la notation littérale. En effet, si un nombre est passé à la fonction `Array()` pour construire le tableau, celui-ci sera interprété comme une longueur et non comme la valeur d'un élément. -<pre class="brush: js notranslate">var arr1 = [42]; // Le tableau créé contient bien un élément qui vaut 42 +```js +var arr1 = [42]; // Le tableau créé contient bien un élément qui vaut 42 var arr2 = Array(42); // Crée un tableau sans élément // mais dont arr.length vaut 42 // Le code ci-dessus est équivalent à var arr = []; arr.length = 42 ; -</pre> +``` -<p>Si N est un nombre décimal dont la partie fractionnaire n'est pas nulle, tout appel à <code>Array(N)</code> renverra une exception <code>RangeError</code>. Par exemple :</p> +Si N est un nombre décimal dont la partie fractionnaire n'est pas nulle, tout appel à `Array(N)` renverra une exception `RangeError`. Par exemple : -<pre class="brush: js notranslate">var arr = Array(9.3); // RangeError: Invalid array length -</pre> +```js +var arr = Array(9.3); // RangeError: Invalid array length +``` -<p>Si on souhaite créer un tableau d'un seul élément et ce quel que soit le type de données, il sera préférable d'utiliser les littéraux de tableaux. Sinon, on peut créer un tableau vide puis lui ajouter un seul élément.</p> +Si on souhaite créer un tableau d'un seul élément et ce quel que soit le type de données, il sera préférable d'utiliser les littéraux de tableaux. Sinon, on peut créer un tableau vide puis lui ajouter un seul élément. -<p>Avec ES2015 (anciennement ECMAScript 6), on peut utiliser la méthode {{jsxref("Array.of")}} afin de créer un tableau composé d'un seul élément :</p> +Avec ES2015 (anciennement ECMAScript 6), on peut utiliser la méthode {{jsxref("Array.of")}} afin de créer un tableau composé d'un seul élément : -<pre class="brush: js notranslate">let monTableau = Array.of("Joconde"); // monTableau contient uniquement "Joconde"</pre> +```js +let monTableau = Array.of("Joconde"); // monTableau contient uniquement "Joconde" +``` -<h3 id="Remplir_un_tableau">Remplir un tableau</h3> +### Remplir un tableau -<p>Il est possible de remplir un tableau en affectant des valeurs à ses éléments. Par exemple :</p> +Il est possible de remplir un tableau en affectant des valeurs à ses éléments. Par exemple : -<pre class="brush: js notranslate">var emp = []; +```js +var emp = []; emp[0] = "Casey Jones"; emp[1] = "Phil Lesh"; emp[2] = "August West"; -</pre> +``` -<div class="note"> -<p><strong>Note :</strong> Si on utilise une valeur non entière pour désigner un élément du tableau, cela créera une propriété sur l'objet plutôt qu'un élément du tableau :</p> +> **Note :** Si on utilise une valeur non entière pour désigner un élément du tableau, cela créera une propriété sur l'objet plutôt qu'un élément du tableau : +> +> ```js +> var arr = []; +> arr[3.4] = "Oranges"; +> console.log(arr.length); // 0 +> console.log(arr.hasOwnProperty(3.4)); // true +> ``` -<pre class="brush: js notranslate">var arr = []; -arr[3.4] = "Oranges"; -console.log(arr.length); // 0 -console.log(arr.hasOwnProperty(3.4)); // true -</pre> -</div> +Il est aussi possible de remplir un tableau directement lors de sa création : -<p>Il est aussi possible de remplir un tableau directement lors de sa création :</p> - -<pre class="brush: js notranslate">var monTableau = new Array("Coucou", maVar, 3.14159); +```js +var monTableau = new Array("Coucou", maVar, 3.14159); var monTableau = ["Mangue", "Pomme", "Orange"] -</pre> - -<h3 id="Faire_référence_aux_éléments_dun_tableau">Faire référence aux éléments d'un tableau</h3> +``` -<p>Il est possible de faire référence aux éléments d'un tableau en utilisant un nombre ordinal lié à l'élément. Ainsi, si on définit le tableau suivant :</p> +### Faire référence aux éléments d'un tableau -<pre class="brush: js notranslate">var monTableau = ["Air", "Eau", "Feu"]; -</pre> +Il est possible de faire référence aux éléments d'un tableau en utilisant un nombre ordinal lié à l'élément. Ainsi, si on définit le tableau suivant : -<p>On pourra accéder au premier élément du tableau en utilisant <code>monTableau[0]</code>, on accèdera au deuxième élément avec <code>monTableau[1]</code>. Les indices des éléments sont comptés à partir de 0.</p> +```js +var monTableau = ["Air", "Eau", "Feu"]; +``` -<div class="note"> -<p><strong>Note :</strong> Les crochets peuvent également être utilisés pour faire référence aux propriétés du tableau (les tableaux sont des objets JavaScript à part entière). On pourra donc avoir :</p> +On pourra accéder au premier élément du tableau en utilisant `monTableau[0]`, on accèdera au deuxième élément avec `monTableau[1]`. Les indices des éléments sont comptés à partir de 0. -<pre class="brush: js notranslate">var arr = ["un", "deux", "trois"]; -arr[2]; // "trois" - on accède à un élément du tableau -arr["length"]; // 3 - on accède à une propriété du tableau -</pre> -</div> +> **Note :** Les crochets peuvent également être utilisés pour faire référence aux propriétés du tableau (les tableaux sont des objets JavaScript à part entière). On pourra donc avoir : +> +> ```js +> var arr = ["un", "deux", "trois"]; +> arr[2]; // "trois" - on accède à un élément du tableau +> arr["length"]; // 3 - on accède à une propriété du tableau +> ``` -<h3 id="Comprendre_la_propriété_length">Comprendre la propriété <code>length</code></h3> +### Comprendre la propriété `length` -<p>En termes d'implémentation, les tableaux JavaScript stockent leurs éléments comme des propriétés normales, l'indice étant utilisé comme nom pour désigner la valeur de la propriété. La propriété <code>length</code> est elle un peu spéciale : elle renvoie toujours la valeur du plus grand indice du tableau plus 1. Dans l'exemple suivant, "Biduche" est placé à l'indice 30, <code>chats.length</code> renvoie donc 30 + 1). On rappelle que les indices des tableaux JavaScript commencent à partir de 0 et pas à partir de 1. Cela signifie que la valeur de la propriété <code><code>length</code></code> sera plus grande, de 1, par rapport à l'indice le plus élevé :</p> +En termes d'implémentation, les tableaux JavaScript stockent leurs éléments comme des propriétés normales, l'indice étant utilisé comme nom pour désigner la valeur de la propriété. La propriété `length` est elle un peu spéciale : elle renvoie toujours la valeur du plus grand indice du tableau plus 1. Dans l'exemple suivant, "Biduche" est placé à l'indice 30, `chats.length` renvoie donc 30 + 1). On rappelle que les indices des tableaux JavaScript commencent à partir de 0 et pas à partir de 1. Cela signifie que la valeur de la propriété `length` sera plus grande, de 1, par rapport à l'indice le plus élevé : -<pre class="brush: js notranslate">var chats = []; +```js +var chats = []; chats[30] = ['Biduche']; console.log(chats.length); // 31 -</pre> +``` -<p>Il est aussi possible d'affecter une valeur à la propriété <code>length</code>. Si la valeur fournie est inférieure au nombre d'éléments stockés, cela tronquera la tableau. Si la valeur est 0, cela videra le tableau :</p> +Il est aussi possible d'affecter une valeur à la propriété `length`. Si la valeur fournie est inférieure au nombre d'éléments stockés, cela tronquera la tableau. Si la valeur est 0, cela videra le tableau : -<pre class="brush: js notranslate">var chats = ['Marie', 'Toulouse', 'Berlioz']; +```js +var chats = ['Marie', 'Toulouse', 'Berlioz']; console.log(chats.length); // 3 chats.length = 2; @@ -142,47 +150,53 @@ chats.length = 0; console.log(chats); // affiche [], le tableau est vide chats.length = 3; -console.log(chats); // [ <3 empty slots> ] -</pre> +console.log(chats); // [ <3 empty slots> ] +``` -<h3 id="Parcourir_un_tableau">Parcourir un tableau</h3> +### Parcourir un tableau -<p>Un tableau est une structure de données qui se prête particulièrement aux boucles, on pourra utiliser ces dernières pour parcourir les éléments du tableau de façon itérative. Voici un exemple de parcours simple :</p> +Un tableau est une structure de données qui se prête particulièrement aux boucles, on pourra utiliser ces dernières pour parcourir les éléments du tableau de façon itérative. Voici un exemple de parcours simple : -<pre class="brush: js notranslate">var couleurs = ['rouge', 'vert', 'bleu']; -for (var i = 0; i < couleurs.length; i++) { +```js +var couleurs = ['rouge', 'vert', 'bleu']; +for (var i = 0; i < couleurs.length; i++) { console.log(couleurs[i]); } -</pre> +``` -<p>Si on sait qu'aucun des éléments ne vaut <code>false</code> dans un contexte booléen (par exemple, si le tableau contient des nœuds du <a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">DOM</a>), on peut utiliser une formulation encore plus concise :</p> +Si on sait qu'aucun des éléments ne vaut `false` dans un contexte booléen (par exemple, si le tableau contient des nœuds du [DOM](/fr/docs/Web/API/Référence_du_DOM_Gecko)), on peut utiliser une formulation encore plus concise : -<pre class="brush: js notranslate">var divs = document.getElementsByTagName('div'); +```js +var divs = document.getElementsByTagName('div'); for (var i = 0, div; div = divs[i]; i++) { /* On effectue un traitement sur les div */ } -</pre> +``` -<p>Cette syntaxe permet d'éviter d'avoir à vérifier la longueur du tableau et de gérer l'affectation de la variable <code>div</code> pour chaque élément du tableau.</p> +Cette syntaxe permet d'éviter d'avoir à vérifier la longueur du tableau et de gérer l'affectation de la variable `div` pour chaque élément du tableau. -<p>La méthode {{jsxref("Array.forEach", "forEach()")}} fournit une autre méthode pour parcourir un tableau :</p> +La méthode {{jsxref("Array.forEach", "forEach()")}} fournit une autre méthode pour parcourir un tableau : -<pre class="brush: js notranslate">var couleurs = ['rouge', 'vert', 'bleu']; +```js +var couleurs = ['rouge', 'vert', 'bleu']; couleurs.forEach(function(couleur) { console.log(couleur); }); -</pre> +``` -<p>Avec les fonctions fléchées (apparues avec ES6 / ECMAScript 2015), on peut obtenir un code plus concis :</p> +Avec les fonctions fléchées (apparues avec ES6 / ECMAScript 2015), on peut obtenir un code plus concis : -<pre class="brush: js notranslate">var couleurs = ['rouge', 'vert', 'bleu']; -couleurs.forEach(couleur => console.log(couleur));</pre> +```js +var couleurs = ['rouge', 'vert', 'bleu']; +couleurs.forEach(couleur => console.log(couleur)); +``` -<p>La fonction passée comme argument à <code>forEach()</code> est exécutée une fois pour chacun des éléments du tableau (l'élément du tableau sera passé comme argument de cette fonction). Les éléments qui n'ont pas de valeur affectée ne sont pas parcourus lors d'une boucle <code>forEach</code>.</p> +La fonction passée comme argument à `forEach()` est exécutée une fois pour chacun des éléments du tableau (l'élément du tableau sera passé comme argument de cette fonction). Les éléments qui n'ont pas de valeur affectée ne sont pas parcourus lors d'une boucle `forEach`. -<p>On notera que les éléments ne sont pas parcourus lorsqu'ils n'ont pas eu de valeur d'affectée. Cependant, si on a affecté la valeur {{jsxref("undefined")}} de façon explicite à un élément, il sera pris en compte lors de la boucle :</p> +On notera que les éléments ne sont pas parcourus lorsqu'ils n'ont pas eu de valeur d'affectée. Cependant, si on a affecté la valeur {{jsxref("undefined")}} de façon explicite à un élément, il sera pris en compte lors de la boucle : -<pre class="brush: js notranslate">var tableau = ['premier', 'deuxième', , 'quatrième']; +```js +var tableau = ['premier', 'deuxième', , 'quatrième']; // affiche ['premier', 'deuxième', 'quatrième']; tableau.forEach(function(élément) { @@ -196,231 +210,264 @@ var tableau = ['premier', 'deuxième', undefined, 'quatrième']; // renvoie ['premier', 'deuxième', undefined, 'quatrième']; tableau.forEach(function(élément) { console.log(élément); -})</pre> - -<p>Étant donné que les éléments des tableaux sont stockés comme des propriétés classiques, il n'est pas conseillé d'utiliser des boucles {{jsxref("Instructions/for...in")}} pour parcourir les tableaux car cela listerait également les propriétés énumérables (en plus des éléments).</p> - -<h3 id="Méthodes_des_tableaux">Méthodes des tableaux</h3> - -<p>L'objet <code>Array</code> possède les méthodes suivantes :</p> - -<ul> - <li>{{jsxref("Array.concat", "concat()")}} permet de fusionner deux ou plusieurs tableaux et de renvoyer le résultat dans un nouveau tableau : - <pre class="brush: js notranslate">var monTableau = new Array("1", "2", "3"); -monTableau = monTableau.concat("a", "b", "c"); // monTableau is now ["1", "2", "3", "a", "b", "c"] -</pre> - </li> - <li>{{jsxref("Array.join", "join(délimiteur = ',')")}} permet de fusionner les éléments du tableau en une chaîne de caractères : - <pre class="brush: js notranslate">var monTableau = new Array("Air", "Eau", "Feu"); -var list = monTableau.join(" - "); // list sera "Air - Eau - Feu" -</pre> - </li> - <li>{{jsxref("Array.push", "push()")}} permet d'ajouter un ou plusieurs éléments à la fin d'un tableau et renvoie la longueur du tableau : - <pre class="brush: js notranslate">var monTableau = new Array("1", "2"); -monTableau.push("3"); // monTableau vaut désormais ["1", "2", "3"] -</pre> - </li> - <li>{{jsxref("Array.pop", "pop()")}} permet de retirer le dernier élément (le plus à droite) du tableau et renvoie cet élément : - <pre class="brush: js notranslate">var monTableau = new Array("1", "2", "3"); -var dernier = monTableau.pop(); // monTableau vaut désormais ["1", "2"], dernier = "3" -</pre> - </li> - <li>{{jsxref("Array.shift", "shift()")}} retire le premier élément d'un tableau (le plus à gauche) et renvoie cet élément : - <pre class="brush: js notranslate">var monTableau = new Array("1", "2", "3"); -var premier = monTableau.shift(); // monTableau vaut désormais ["2", "3"], premier vaut "1" -</pre> - </li> - <li>{{jsxref("Array.unshift", "unshift()")}} ajoute un ou plusieurs éléments au début du tableau et renvoie la longueur du tableau ainsi modifié : - <pre class="brush: js notranslate">var monTableau = new Array("1", "2", "3"); -monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]</pre> - </li> - <li>{{jsxref("Array.slice", "slice(indice_début, indice_fin)")}} extrait une portion d'un tableau et renvoie un nouveau tableau avec ce fragment : - <pre class="brush: js notranslate">var monTableau = new Array ("a", "b", "c", "d", "e"); -monTableau = monTableau.slice(1, 4); // extrait les éléments entre l'indice 1 et jusqu'à - // celui d'indice 3 (4-1), elle renvoie - // [ "b", "c", "d"] -</pre> - </li> - <li>{{jsxref("Array.splice", "splice(indice, nbASupprimer, ajouterElement1, ajouterElement2, ...)")}} retire des éléments du tableau et (éventuellement) les remplace : - <pre class="brush: js notranslate">var monTableau = new Array ("1", "2", "3", "4", "5"); -monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut désormais ["1", "a", "b", "c", "d", "5"] - // Le code remplace à partir de l'indice 1 (où il y avait la valeur "2"), supprime trois éléments puis - // insère les arguments fournis à la suite. -</pre> - </li> - <li>{{jsxref("Array.reverse", "reverse()")}} transpose les éléments du tableau à même ce tableau : le premier élément devient le dernier, le dernier devient le premier et ainsi de suite : - <pre class="brush: js notranslate">var monTableau = new Array ("1", "2", "3"); -monTableau.reverse(); // monTableau vaut maintenant [ "3", "2", "1" ] -</pre> - </li> - <li>{{jsxref("Array.sort", "sort()")}} trie les éléments d'un tableau à même ce tableau : - <pre class="brush: js notranslate">var monTableau = new Array("Air", "Feu", "Eau"); -monTableau.sort(); // trie le tableau [ "Air", "Eau", "Feu" ] -</pre> - - <p><code>sort()</code> peut également utiliser une fonction de rappel (<em>callback</em>) qui détermine comment les éléments sont comparés. La fonction compare deux arguments et renvoie une valeur selon les règles suivantes :</p> - - <ul> - <li>Si <code>a</code> est inférieur à <code>b</code> selon l'ordre, renvoie -1 (ou un autre nombre négatif)</li> - <li>Si <code>a</code> est supérieur à <code>b</code> selon l'ordre, renvoie 1 (ou un autre nombre positif)</li> - <li>Si <code>a</code> et <code>b</code> sont considérés égaux, renvoie 0.</li> - </ul> - - <p>Par exemple, on peut utilise la fonction suivante pour trier par rapport à la dernière lettre du mot :</p> - - <pre class="brush: js notranslate">var sortFn = function(a, b){ - if (a[a.length - 1] < b[b.length - 1]) return -1; - if (a[a.length - 1] > b[b.length - 1]) return 1; - if (a[a.length - 1] == b[b.length - 1]) return 0; -} -monTableau.sort(sortFn); // le tableau devient = ["Air","Feu","Eau"]</pre> - </li> -</ul> - -<p>Du code permettant d'émuler ces fonctions est disponible sur chacune des pages (<em>polyfill</em>). Le support natif de ces fonctionnalités dans les différents navigateurs peut être trouvé <a href="http://www.robertnyman.com/javascript/">ici</a><a href="http://www.robertnyman.com/javascript/">.</a></p> - -<ul> - <li>{{jsxref("Array.indexOf", "indexOf(élémentRecherché[, indiceDépart])")}} recherche la valeur <code>élémentRecherché</code> dans le tableau et renvoie l'indice du premier élément qui correspond : - - <pre class="brush: js notranslate">var a = ['a', 'b', 'a', 'b', 'a']; -console.log(a.indexOf('b')); // Affiche 1 -// On recherche après la première correspondance : -console.log(a.indexOf('b', 2)); // Affiche 3 -console.log(a.indexOf('z')); // Affiche -1 car 'z' n'a pas été trouvé -</pre> - </li> - <li>{{jsxref("Array.lastIndexOf", "lastIndexOf(élémentRecherché[, fromIndex])")}} fonctionne comme <code>indexOf</code>, mais recherche à partir de la fin du tableau : - <pre class="brush: js notranslate">var a = ['a', 'b', 'c', 'd', 'a', 'b']; -console.log(a.lastIndexOf('b')); // Affiche 5 -// On continue la recherche après la première correspondance en fin de tableau -console.log(a.lastIndexOf('b', 4)); // Affiche 1 -console.log(a.lastIndexOf('z')); // Affiche -1 -</pre> - </li> - <li>{{jsxref("Array.forEach", "forEach(callback[, objetThis])")}} exécute la fonction <code>callback</code> sur chaque élément du tableau. - <pre class="brush: js notranslate">var a = ['a', 'b', 'c']; -a.forEach(console.log); // Affichera la valeur de chaque élément dans la console -</pre> - </li> - <li>{{jsxref("Array.map", "map(callback[, objetThis])")}} renvoie un nouveau tableau dont les éléments sont les images des éléments du tableau courant par la fonction <code>callback</code> : - <pre class="brush: js notranslate">var a1 = ['a', 'b', 'c']; -var a2 = a1.map(function(item) { return item.toUpperCase(); }); -console.log(a2); // affichera A,B,C dans la console -</pre> - </li> - <li>{{jsxref("Array.filter", "filter(callback[, objetThis])")}} renvoie un nouveau tableau qui contient les éléments du tableau courant pour lesquels <code>callback</code> a renvoyé <code>true</code>. - <pre class="brush: js notranslate">var a1 = ['a', 10, 'b', 20, 'c', 30]; -var a2 = a1.filter(function(item) { return typeof item == 'number'; }); -console.log(a2); // Affichera 10,20,30 dans la console -</pre> - </li> - <li>{{jsxref("Array.every", "every(callback[, objetThis])")}} renvoie <code>true</code> si <code>callback</code> renvoie <code>true</code> pour chaque élément du tableau. - <pre class="brush: js notranslate">function isNumber(value){ - return typeof value === 'number'; -} -var a1 = [1, 2, 3]; -console.log(a1.every(isNumber)); // affiche true -var a2 = [1, '2', 3]; -console.log(a2.every(isNumber)); // affiche false -</pre> - </li> - <li>{{jsxref("Array.some", "some(callback[, objetThis])")}} renvoie <code>true</code> si <code>callback</code> renvoie <code>true</code> pour au moins un élément du tableau. - <pre class="brush: js notranslate">function isNumber(value){ - return typeof value === 'number'; -} -var a1 = [1, 2, 3]; -console.log(a1.some(isNumber)); // Affiche true -var a2 = [1, '2', 3]; -console.log(a2.some(isNumber)); // Affiche true -var a3 = ['1', '2', '3']; -console.log(a3.some(isNumber)); // Affiche false -</pre> - </li> -</ul> +}) +``` + +Étant donné que les éléments des tableaux sont stockés comme des propriétés classiques, il n'est pas conseillé d'utiliser des boucles {{jsxref("Instructions/for...in")}} pour parcourir les tableaux car cela listerait également les propriétés énumérables (en plus des éléments). + +### Méthodes des tableaux + +L'objet `Array` possède les méthodes suivantes : + +- {{jsxref("Array.concat", "concat()")}} permet de fusionner deux ou plusieurs tableaux et de renvoyer le résultat dans un nouveau tableau : + + ```js + var monTableau = new Array("1", "2", "3"); + monTableau = monTableau.concat("a", "b", "c"); // monTableau is now ["1", "2", "3", "a", "b", "c"] + ``` + +- {{jsxref("Array.join", "join(délimiteur = ',')")}} permet de fusionner les éléments du tableau en une chaîne de caractères : + + ```js + var monTableau = new Array("Air", "Eau", "Feu"); + var list = monTableau.join(" - "); // list sera "Air - Eau - Feu" + ``` + +- {{jsxref("Array.push", "push()")}} permet d'ajouter un ou plusieurs éléments à la fin d'un tableau et renvoie la longueur du tableau : + + ```js + var monTableau = new Array("1", "2"); + monTableau.push("3"); // monTableau vaut désormais ["1", "2", "3"] + ``` + +- {{jsxref("Array.pop", "pop()")}} permet de retirer le dernier élément (le plus à droite) du tableau et renvoie cet élément : + + ```js + var monTableau = new Array("1", "2", "3"); + var dernier = monTableau.pop(); // monTableau vaut désormais ["1", "2"], dernier = "3" + ``` + +- {{jsxref("Array.shift", "shift()")}} retire le premier élément d'un tableau (le plus à gauche) et renvoie cet élément : + + ```js + var monTableau = new Array("1", "2", "3"); + var premier = monTableau.shift(); // monTableau vaut désormais ["2", "3"], premier vaut "1" + ``` + +- {{jsxref("Array.unshift", "unshift()")}} ajoute un ou plusieurs éléments au début du tableau et renvoie la longueur du tableau ainsi modifié : + + ```js + var monTableau = new Array("1", "2", "3"); + monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"] + ``` + +- {{jsxref("Array.slice", "slice(indice_début, indice_fin)")}} extrait une portion d'un tableau et renvoie un nouveau tableau avec ce fragment : + + ```js + var monTableau = new Array ("a", "b", "c", "d", "e"); + monTableau = monTableau.slice(1, 4); // extrait les éléments entre l'indice 1 et jusqu'à + // celui d'indice 3 (4-1), elle renvoie + // [ "b", "c", "d"] + ``` + +- {{jsxref("Array.splice", "splice(indice, nbASupprimer, ajouterElement1, ajouterElement2, ...)")}} retire des éléments du tableau et (éventuellement) les remplace : + + ```js + var monTableau = new Array ("1", "2", "3", "4", "5"); + monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut désormais ["1", "a", "b", "c", "d", "5"] + // Le code remplace à partir de l'indice 1 (où il y avait la valeur "2"), supprime trois éléments puis + // insère les arguments fournis à la suite. + ``` -<p>Les méthodes présentées ci-avant qui prennent une fonction de rappel (<em>callback</em>) en argument sont appelées méthodes itératives car elles parcourent le tableau de façon itérative. Chacune de ces méthodes peut prendre en compte un deuxième argument (optionnel) qui sera l'objet <code>this</code> pris en compte par le <em>callback</em>. Si ce deuxième argument n'est pas fourni, <code>this</code> vaudra la valeur de l'objet global.</p> +- {{jsxref("Array.reverse", "reverse()")}} transpose les éléments du tableau à même ce tableau : le premier élément devient le dernier, le dernier devient le premier et ainsi de suite : -<p>La fonction de rappel est appelée avec trois arguments : le premier étant la valeur de l'élément courant, le deuxième est l'indice de cet élément et le troisième représente le tableau lui-même. Les fonctions JavaScript ignorent les arguments supplémentaires qui ne sont pas déclarés explicitement dans la liste des paramètres, on peut donc utiliser une fonction prenant un seul argument comme fonction de rappel.</p> + ```js + var monTableau = new Array ("1", "2", "3"); + monTableau.reverse(); // monTableau vaut maintenant [ "3", "2", "1" ] + ``` -<ul> - <li>{{jsxref("Array.reduce", "reduce(callback[, valeurInitiale])")}} applique <code>callback(premièreValeur, secondeValeur)</code> au fur et à mesure sur le tableau pour le réduire en une seule valeur, c'est cette valeur qui est renvoyée par la fonction : +- {{jsxref("Array.sort", "sort()")}} trie les éléments d'un tableau à même ce tableau : - <pre class="brush: js notranslate">var a = [10, 20, 30]; -var total = a.reduce(function(premier, deuxième) { return premier + deuxième; }, 0); -console.log(total) // Affiche 60 -</pre> - </li> - <li>{{jsxref("Array.reduceRight", "reduceRight(callback[, valeurInitiale])")}} fonctionne comme <code>reduce()</code>, mais débute avec le dernier élément (parcourt le tableau de droite à gauche).</li> -</ul> + ```js + var monTableau = new Array("Air", "Feu", "Eau"); + monTableau.sort(); // trie le tableau [ "Air", "Eau", "Feu" ] + ``` -<p><code>reduce()</code> et <code>reduceRight()</code> sont à utiliser lorsqu'on souhaite n'obtenir qu'une seule valeur, récursivement, à partir des différents éléments du tableau. Pour plus d'informations sur l'utilisation d'une valeur d'initialisation pour ces deux fonctions, se référer à leurs pages : {{jsxref("Array.reduceRight")}} et {{jsxref("Array.reduce")}}</p> + `sort()` peut également utiliser une fonction de rappel (_callback_) qui détermine comment les éléments sont comparés. La fonction compare deux arguments et renvoie une valeur selon les règles suivantes : -<h3 id="Tableaux_multi-dimensionnels">Tableaux multi-dimensionnels</h3> + - Si `a` est inférieur à `b` selon l'ordre, renvoie -1 (ou un autre nombre négatif) + - Si `a` est supérieur à `b` selon l'ordre, renvoie 1 (ou un autre nombre positif) + - Si `a` et `b` sont considérés égaux, renvoie 0. -<p>Les tableaux peuvent être imbriqués les uns dans les autres. Cela signifie qu'un tableau peut avoir un élément dont la valeur est un tableau. En utilisant ce comportement, on peut donc créer des matrices, voire des tableaux à plusieurs dimensions.</p> + Par exemple, on peut utilise la fonction suivante pour trier par rapport à la dernière lettre du mot : -<p>Par exemple, avec le code suivant :</p> + ```js + var sortFn = function(a, b){ + if (a[a.length - 1] < b[b.length - 1]) return -1; + if (a[a.length - 1] > b[b.length - 1]) return 1; + if (a[a.length - 1] == b[b.length - 1]) return 0; + } + monTableau.sort(sortFn); // le tableau devient = ["Air","Feu","Eau"] + ``` -<pre class="brush: js notranslate">var a = new Array(4); -for (i = 0; i < 4; i++) { +Du code permettant d'émuler ces fonctions est disponible sur chacune des pages (_polyfill_). Le support natif de ces fonctionnalités dans les différents navigateurs peut être trouvé [ici](http://www.robertnyman.com/javascript/)[.](http://www.robertnyman.com/javascript/) + +- {{jsxref("Array.indexOf", "indexOf(élémentRecherché[, indiceDépart])")}} recherche la valeur `élémentRecherché` dans le tableau et renvoie l'indice du premier élément qui correspond : + + ```js + var a = ['a', 'b', 'a', 'b', 'a']; + console.log(a.indexOf('b')); // Affiche 1 + // On recherche après la première correspondance : + console.log(a.indexOf('b', 2)); // Affiche 3 + console.log(a.indexOf('z')); // Affiche -1 car 'z' n'a pas été trouvé + ``` + +- {{jsxref("Array.lastIndexOf", "lastIndexOf(élémentRecherché[, fromIndex])")}} fonctionne comme `indexOf`, mais recherche à partir de la fin du tableau : + + ```js + var a = ['a', 'b', 'c', 'd', 'a', 'b']; + console.log(a.lastIndexOf('b')); // Affiche 5 + // On continue la recherche après la première correspondance en fin de tableau + console.log(a.lastIndexOf('b', 4)); // Affiche 1 + console.log(a.lastIndexOf('z')); // Affiche -1 + ``` + +- {{jsxref("Array.forEach", "forEach(callback[, objetThis])")}} exécute la fonction `callback` sur chaque élément du tableau. + + ```js + var a = ['a', 'b', 'c']; + a.forEach(console.log); // Affichera la valeur de chaque élément dans la console + ``` + +- {{jsxref("Array.map", "map(callback[, objetThis])")}} renvoie un nouveau tableau dont les éléments sont les images des éléments du tableau courant par la fonction `callback` : + + ```js + var a1 = ['a', 'b', 'c']; + var a2 = a1.map(function(item) { return item.toUpperCase(); }); + console.log(a2); // affichera A,B,C dans la console + ``` + +- {{jsxref("Array.filter", "filter(callback[, objetThis])")}} renvoie un nouveau tableau qui contient les éléments du tableau courant pour lesquels `callback` a renvoyé `true`. + + ```js + var a1 = ['a', 10, 'b', 20, 'c', 30]; + var a2 = a1.filter(function(item) { return typeof item == 'number'; }); + console.log(a2); // Affichera 10,20,30 dans la console + ``` + +- {{jsxref("Array.every", "every(callback[, objetThis])")}} renvoie `true` si `callback` renvoie `true` pour chaque élément du tableau. + + ```js + function isNumber(value){ + return typeof value === 'number'; + } + var a1 = [1, 2, 3]; + console.log(a1.every(isNumber)); // affiche true + var a2 = [1, '2', 3]; + console.log(a2.every(isNumber)); // affiche false + ``` + +- {{jsxref("Array.some", "some(callback[, objetThis])")}} renvoie `true` si `callback` renvoie `true` pour au moins un élément du tableau. + + ```js + function isNumber(value){ + return typeof value === 'number'; + } + var a1 = [1, 2, 3]; + console.log(a1.some(isNumber)); // Affiche true + var a2 = [1, '2', 3]; + console.log(a2.some(isNumber)); // Affiche true + var a3 = ['1', '2', '3']; + console.log(a3.some(isNumber)); // Affiche false + ``` + +Les méthodes présentées ci-avant qui prennent une fonction de rappel (_callback_) en argument sont appelées méthodes itératives car elles parcourent le tableau de façon itérative. Chacune de ces méthodes peut prendre en compte un deuxième argument (optionnel) qui sera l'objet `this` pris en compte par le _callback_. Si ce deuxième argument n'est pas fourni, `this` vaudra la valeur de l'objet global. + +La fonction de rappel est appelée avec trois arguments : le premier étant la valeur de l'élément courant, le deuxième est l'indice de cet élément et le troisième représente le tableau lui-même. Les fonctions JavaScript ignorent les arguments supplémentaires qui ne sont pas déclarés explicitement dans la liste des paramètres, on peut donc utiliser une fonction prenant un seul argument comme fonction de rappel. + +- {{jsxref("Array.reduce", "reduce(callback[, valeurInitiale])")}} applique `callback(premièreValeur, secondeValeur)` au fur et à mesure sur le tableau pour le réduire en une seule valeur, c'est cette valeur qui est renvoyée par la fonction : + + ```js + var a = [10, 20, 30]; + var total = a.reduce(function(premier, deuxième) { return premier + deuxième; }, 0); + console.log(total) // Affiche 60 + ``` + +- {{jsxref("Array.reduceRight", "reduceRight(callback[, valeurInitiale])")}} fonctionne comme `reduce()`, mais débute avec le dernier élément (parcourt le tableau de droite à gauche). + +`reduce()` et `reduceRight()` sont à utiliser lorsqu'on souhaite n'obtenir qu'une seule valeur, récursivement, à partir des différents éléments du tableau. Pour plus d'informations sur l'utilisation d'une valeur d'initialisation pour ces deux fonctions, se référer à leurs pages : {{jsxref("Array.reduceRight")}} et {{jsxref("Array.reduce")}} + +### Tableaux multi-dimensionnels + +Les tableaux peuvent être imbriqués les uns dans les autres. Cela signifie qu'un tableau peut avoir un élément dont la valeur est un tableau. En utilisant ce comportement, on peut donc créer des matrices, voire des tableaux à plusieurs dimensions. + +Par exemple, avec le code suivant : + +```js +var a = new Array(4); +for (i = 0; i < 4; i++) { a[i] = new Array(4); - for (j = 0; j < 4; j++) { + for (j = 0; j < 4; j++) { a[i][j] = "[" + i + "," + j + "]"; } } -</pre> +``` -<p>On pourra avoir le tableau suivant sur deux dimensions :</p> +On pourra avoir le tableau suivant sur deux dimensions : -<pre class="brush: js notranslate">Ligne 0 : [0,0] [0,1] [0,2] [0,3] +```js +Ligne 0 : [0,0] [0,1] [0,2] [0,3] Ligne 1 : [1,0] [1,1] [1,2] [1,3] Ligne 2 : [2,0] [2,1] [2,2] [2,3] Ligne 3 : [3,0] [3,1] [3,2] [3,3] -</pre> +``` -<h3 id="Les_tableaux_et_les_expressions_rationnelles">Les tableaux et les expressions rationnelles</h3> +### Les tableaux et les expressions rationnelles -<p>Lorsqu'un tableau est le résultat d'une correspondance entre une expression rationnelle et une chaîne de caractères, les éléments et propriétés du tableau fournissent des informations sur la correspondance. Les méthodes suivantes peuvent renvoyer un tableau : {{jsxref("Objets_globaux/RegExp/exec","RegExp.exec()")}}, {{jsxref("Objets_globaux/String/match/exec","String.match()")}}, {{jsxref("Objets_globaux/String/split","String.split()")}}. Pour plus d'informations sur les tableaux et les expressions rationnelles, voir le chapitre du guide JavaScript sur <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">les expressions rationnelles</a>.</p> +Lorsqu'un tableau est le résultat d'une correspondance entre une expression rationnelle et une chaîne de caractères, les éléments et propriétés du tableau fournissent des informations sur la correspondance. Les méthodes suivantes peuvent renvoyer un tableau : {{jsxref("Objets_globaux/RegExp/exec","RegExp.exec()")}}, {{jsxref("Objets_globaux/String/match/exec","String.match()")}}, {{jsxref("Objets_globaux/String/split","String.split()")}}. Pour plus d'informations sur les tableaux et les expressions rationnelles, voir le chapitre du guide JavaScript sur [les expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Expressions_régulières). -<h3 id="Manipuler_des_objets_semblables_à_des_tableaux">Manipuler des objets semblables à des tableaux</h3> +### Manipuler des objets semblables à des tableaux -<p>Certains objets JavaScript tels que {{domxref("NodeList")}} (renvoyé par {{domxref("document.getElementsByTagName()")}}) ou l'objet <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a> (disponible au sein d'une fonction) ressemblent à des tableaux mais n'en sont pas (ils n'ont pas toutes les méthodes décrites ci-avant par exemple). Ainsi, l'objet <code>arguments</code> fournit une propriété {{jsxref("Objets_globaux/Function/length","length")}} mais n'implémente pas la méthode {{jsxref("Array.forEach", "forEach()")}}.</p> +Certains objets JavaScript tels que {{domxref("NodeList")}} (renvoyé par {{domxref("document.getElementsByTagName()")}}) ou l'objet [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) (disponible au sein d'une fonction) ressemblent à des tableaux mais n'en sont pas (ils n'ont pas toutes les méthodes décrites ci-avant par exemple). Ainsi, l'objet `arguments` fournit une propriété {{jsxref("Objets_globaux/Function/length","length")}} mais n'implémente pas la méthode {{jsxref("Array.forEach", "forEach()")}}. -<p>Les méthodes du prototype des tableaux permettent d'utiliser les méthodes d'objets <code>Array</code> sur des objets semblables à des tableaux :</p> +Les méthodes du prototype des tableaux permettent d'utiliser les méthodes d'objets `Array` sur des objets semblables à des tableaux : -<pre class="brush: js notranslate"> function alertArguments() { +```js + function alertArguments() { Array.prototype.forEach.call(arguments, function(item) { console.log(item); }); } -</pre> +``` -<p>Il est possible d'utiliser ces méthodes génériques sur des chaînes de caractères :</p> +Il est possible d'utiliser ces méthodes génériques sur des chaînes de caractères : -<pre class="brush: js notranslate">Array.prototype.forEach.call("une chaîne", function(chr) { +```js +Array.prototype.forEach.call("une chaîne", function(chr) { console.log(chr); -});</pre> +}); +``` -<h2 id="Les_tableaux_typés">Les tableaux typés</h2> +## Les tableaux typés -<p><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés JavaScript</a> sont des objets semblables à des tableaux qui fournissent un moyen d'accéder à des données binaires. Comme on l'a vu ci-avant, les objets {{jsxref("Array")}} grandissent et rétrécissent dynamiquement et peuvent contenir n'importe quelle valeur JavaScript. Les moteurs JavaScript effectuent des optimisations afin que les tableaux puissent être utilisés rapidement. Cependant, avec le développement des applications web, les applications viennent à manipuler des données audio, vidéo, binaires et accèdent à des données brutes via les <a href="/fr/docs/WebSockets">WebSockets</a> d'autres outils. Il apparaît donc nécessaire d'avoir les outils JavaScript pertinents pour manipuler efficacement des données binaires, organisées au sein de tableaux typés.</p> +[Les tableaux typés JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés) sont des objets semblables à des tableaux qui fournissent un moyen d'accéder à des données binaires. Comme on l'a vu ci-avant, les objets {{jsxref("Array")}} grandissent et rétrécissent dynamiquement et peuvent contenir n'importe quelle valeur JavaScript. Les moteurs JavaScript effectuent des optimisations afin que les tableaux puissent être utilisés rapidement. Cependant, avec le développement des applications web, les applications viennent à manipuler des données audio, vidéo, binaires et accèdent à des données brutes via les [WebSockets](/fr/docs/WebSockets) d'autres outils. Il apparaît donc nécessaire d'avoir les outils JavaScript pertinents pour manipuler efficacement des données binaires, organisées au sein de tableaux typés. -<h3 id="Les_vues_et_les_tampons_de_mémoire_buffers_larchitecture_des_tableaux_typés">Les vues et les tampons de mémoire (<em>buffers</em>) : l'architecture des tableaux typés</h3> +### Les vues et les tampons de mémoire (_buffers_) : l'architecture des tableaux typés -<p>Afin de permettre un maximum de flexibilité et d'efficacité, les tableaux typés JavaScript séparent l'implémentation entre <strong>les tampons (<em>buffers</em>)</strong> et <strong>les vues (<em>views</em>)</strong>. Un tampon de mémoire, implémenté par l'objet {{jsxref("ArrayBuffer")}}, est un objet représentant un fragment de données. Un tampon n'a pas de format a proprement parler et il ne fournit aucun mécanisme pour accéder à son contenu. Afin d'accéder à la mémoire contenu dans le tampon, on a besoin d'utiliser une vue. Une vue fournit un contexte, c'est-à-dire un type de donnée, un indice de départ et un nombre d'éléments, qui permet de traiter les données initiales comme un vrai tableau typé.</p> +Afin de permettre un maximum de flexibilité et d'efficacité, les tableaux typés JavaScript séparent l'implémentation entre **les tampons (_buffers_)** et **les vues (_views_)**. Un tampon de mémoire, implémenté par l'objet {{jsxref("ArrayBuffer")}}, est un objet représentant un fragment de données. Un tampon n'a pas de format a proprement parler et il ne fournit aucun mécanisme pour accéder à son contenu. Afin d'accéder à la mémoire contenu dans le tampon, on a besoin d'utiliser une vue. Une vue fournit un contexte, c'est-à-dire un type de donnée, un indice de départ et un nombre d'éléments, qui permet de traiter les données initiales comme un vrai tableau typé. -<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png"></p> + -<h3 id="ArrayBuffer"><code>ArrayBuffer</code></h3> +### `ArrayBuffer` -<p>Le type {{jsxref("ArrayBuffer")}} est un type de donnée utilisé pour représenter un tampon de données binaire générique dont la longueur est fixée. Un tampon de données ne peut pas être manipulé directement. Pour manipuler les données, il faut créer une vue sur le tableau typé ou un objet {{jsxref("DataView")}} qui représente le tampon dans un format spécifique et qui pourra être utilisé pour lire et écrire des informations du tampon.</p> +Le type {{jsxref("ArrayBuffer")}} est un type de donnée utilisé pour représenter un tampon de données binaire générique dont la longueur est fixée. Un tampon de données ne peut pas être manipulé directement. Pour manipuler les données, il faut créer une vue sur le tableau typé ou un objet {{jsxref("DataView")}} qui représente le tampon dans un format spécifique et qui pourra être utilisé pour lire et écrire des informations du tampon. -<h3 id="Les_vues_qui_sont_des_tableaux_typés">Les vues qui sont des tableaux typés</h3> +### Les vues qui sont des tableaux typés -<p>Les vues de tableaux typés possèdent des noms explicites et fournissent des vues pour les types numériques usuels tels que <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> et ainsi de suite. Il existe un type de vue spécial qui est <code>Uint8ClampedArray</code>. Ce type ramène les différentes valeurs exploitées entre 0 et 255. Cela peut notamment être utile pour <a href="/fr/docs/Web/API/ImageData">le traitement des données d'un canvas</a>.</p> +Les vues de tableaux typés possèdent des noms explicites et fournissent des vues pour les types numériques usuels tels que `Int8`, `Uint32`, `Float64` et ainsi de suite. Il existe un type de vue spécial qui est `Uint8ClampedArray`. Ce type ramène les différentes valeurs exploitées entre 0 et 255. Cela peut notamment être utile pour [le traitement des données d'un canvas](/fr/docs/Web/API/ImageData). -<p>{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}}</p> +{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}} -<p>Pour plus d'informations sur les tableaux typés, voir <a href="/fr/docs/Web/JavaScript/Tableaux_typés">l'article de la référence</a> sur les différents objets {{jsxref("TypedArray")}}.</p> +Pour plus d'informations sur les tableaux typés, voir [l'article de la référence](/fr/docs/Web/JavaScript/Tableaux_typés) sur les différents objets {{jsxref("TypedArray")}}. -<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}}</p> +{{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}} diff --git a/files/fr/web/javascript/guide/introduction/index.md b/files/fr/web/javascript/guide/introduction/index.md index 7d99c7a165..cc8794cc3e 100644 --- a/files/fr/web/javascript/guide/introduction/index.md +++ b/files/fr/web/javascript/guide/introduction/index.md @@ -8,131 +8,111 @@ tags: - JavaScript translation_of: Web/JavaScript/Guide/Introduction --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}} -<p>Ce chapitre introduit JavaScript et présente certains de ses concepts fondamentaux.</p> +Ce chapitre introduit JavaScript et présente certains de ses concepts fondamentaux. -<h2 id="Ce_que_vous_devriez_déjà_savoir">Ce que vous devriez déjà savoir</h2> +## Ce que vous devriez déjà savoir -<p>Pour lire ce guide, il est conseillé d'avoir :</p> +Pour lire ce guide, il est conseillé d'avoir : -<ul> - <li>Une compréhension générale du fonctionnement d'Internet et du <a href="https://developer.mozilla.org/fr/docs/Glossaire/World_Wide_Web">World Wide Web</a> .</li> - <li>Une connaissance élémentaire du <em>HyperText Markup Language</em> ({{Glossary("HTML")}}).</li> - <li>Une expérience préalable en programmation. Si vous débutez la programmation, vous pouvez utiliser l'un des tutoriels listés sur la page <a href="/fr/docs/Web/JavaScript">JavaScript</a>.</li> -</ul> +- Une compréhension générale du fonctionnement d'Internet et du [World Wide Web](https://developer.mozilla.org/fr/docs/Glossaire/World_Wide_Web) . +- Une connaissance élémentaire du _HyperText Markup Language_ ({{Glossary("HTML")}}). +- Une expérience préalable en programmation. Si vous débutez la programmation, vous pouvez utiliser l'un des tutoriels listés sur la page [JavaScript](/fr/docs/Web/JavaScript). -<h2 id="Où_trouver_des_informations_concernant_JavaScript">Où trouver des informations concernant JavaScript</h2> +## Où trouver des informations concernant JavaScript -<p>La documentation MDN pour JavaScript comprend :</p> +La documentation MDN pour JavaScript comprend : -<ul> - <li><a href="/fr/docs/Apprendre">Apprendre le Web</a> : cette section fournit des informations destinées aux débutants et présente les concepts de bases autour de la programmation et d'Internet.</li> - <li><a href="/fr/docs/Web/JavaScript/Guide">Le guide JavaScript</a> (ce guide) fournit un aperçu du langage JavaScript et de ses objets.</li> - <li><a href="/fr/docs/Web/JavaScript/Reference">La référence JavaScript</a> fournit une référence détaillée sur les fonctionnalités de JavaScript.</li> -</ul> +- [Apprendre le Web](/fr/docs/Apprendre) : cette section fournit des informations destinées aux débutants et présente les concepts de bases autour de la programmation et d'Internet. +- [Le guide JavaScript](/fr/docs/Web/JavaScript/Guide) (ce guide) fournit un aperçu du langage JavaScript et de ses objets. +- [La référence JavaScript](/fr/docs/Web/JavaScript/Reference) fournit une référence détaillée sur les fonctionnalités de JavaScript. -<p>Si vous débutez en JavaScript, vous pouvez commencer par les articles de la section <a href="/fr/docs/Apprendre">Apprendre</a> et du <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a>. Une fois que vous maîtrisez les briques de bases, vous pourrez utiliser <a href="/fr/docs/Web/JavaScript/Reference">la référence JavaScript</a> pour obtenir des informations détaillées sur chacun des objets natifs et des instructions.</p> +Si vous débutez en JavaScript, vous pouvez commencer par les articles de la section [Apprendre](/fr/docs/Apprendre) et du [Guide JavaScript](/fr/docs/Web/JavaScript/Guide). Une fois que vous maîtrisez les briques de bases, vous pourrez utiliser [la référence JavaScript](/fr/docs/Web/JavaScript/Reference) pour obtenir des informations détaillées sur chacun des objets natifs et des instructions. -<h2 id="Quest-ce_que_JavaScript">Qu'est-ce que JavaScript ?</h2> +## Qu'est-ce que JavaScript ? -<p>JavaScript est un langage de script, multi-plateforme et orienté objet. C'est un langage léger qui doit faire partie d'un environnement hôte (un navigateur web par exemple) pour qu'il puisse être utilisé sur les objets de cet environnement.</p> +JavaScript est un langage de script, multi-plateforme et orienté objet. C'est un langage léger qui doit faire partie d'un environnement hôte (un navigateur web par exemple) pour qu'il puisse être utilisé sur les objets de cet environnement. -<p>JavaScript contient une bibliothèque standard d'objets tels que <code>Array</code>, <code>Date</code>, et <code>Math</code>, ainsi qu'un ensemble d'éléments de langage tels que les opérateurs, les structures de contrôles et les instructions. Ces fonctionnalités centrales et natives de JavaScript peuvent être étendues de plusieurs façons en fournissant d'autres objets, par exemple :</p> +JavaScript contient une bibliothèque standard d'objets tels que `Array`, `Date`, et `Math`, ainsi qu'un ensemble d'éléments de langage tels que les opérateurs, les structures de contrôles et les instructions. Ces fonctionnalités centrales et natives de JavaScript peuvent être étendues de plusieurs façons en fournissant d'autres objets, par exemple : -<ul> - <li><em>JavaScript côté client</em> étend ces éléments de base en fournissant des objets pour contrôler le navigateur et le <em>Document Object Model</em> (DOM). Par exemple, les extensions du langage côté client permettent de placer des éléments dans un formulaire HTML, de réagir aux événements déclenchés par l'utilisateur (les clics, la saisie d'un formulaire, les actions de navigation, etc.).</li> - <li><em>JavaScript côte serveur</em> étend ces éléments de base avec des objets utiles pour le fonctionnement sur un serveur tels que la possibilité de communiquer avec une base de données, manipuler des fichiers, passer d'une application à une autre, etc.</li> -</ul> +- _JavaScript côté client_ étend ces éléments de base en fournissant des objets pour contrôler le navigateur et le _Document Object Model_ (DOM). Par exemple, les extensions du langage côté client permettent de placer des éléments dans un formulaire HTML, de réagir aux événements déclenchés par l'utilisateur (les clics, la saisie d'un formulaire, les actions de navigation, etc.). +- _JavaScript côte serveur_ étend ces éléments de base avec des objets utiles pour le fonctionnement sur un serveur tels que la possibilité de communiquer avec une base de données, manipuler des fichiers, passer d'une application à une autre, etc. -<h2 id="JavaScript_et_Java">JavaScript et Java</h2> +## JavaScript et Java -<p>JavaScript et Java se ressemblent sur certains aspects mais ils sont fondamentalement différents l'un de l'autre. Le langage JavaScript ressemble à Java mais n'est pas typé statiquement et le typage de JavaScript est faible (alors qu'il est fort en Java). La syntaxe des expressions JavaScript est très proche de celle du Java avec les conventions de nommage et les constructions conditionnelles par exemple : c'est une des raisons qui a fait que le langage LiveScript a été renommé en JavaScript.</p> +JavaScript et Java se ressemblent sur certains aspects mais ils sont fondamentalement différents l'un de l'autre. Le langage JavaScript ressemble à Java mais n'est pas typé statiquement et le typage de JavaScript est faible (alors qu'il est fort en Java). La syntaxe des expressions JavaScript est très proche de celle du Java avec les conventions de nommage et les constructions conditionnelles par exemple : c'est une des raisons qui a fait que le langage LiveScript a été renommé en JavaScript. -<p>À la différence de Java qui est un système compilé et dont les classes sont déclarées, JavaScript est traité lors de l'exécution et possède quelques types de données pour représenter les nombres, les booléens et les chaînes de caractères (entre autres). JavaScript utilise un modèle basé sur les prototypes pour représenter les liens entre les objets alors que Java utilise un modèle plus courant basé sur les classes. Les prototypes permettent d'avoir un héritage dynamique. Ainsi, les caractéristiques héritées par un objet peuvent varier dans le temps. JavaScript supporte également les fonctions qui sont des objets à part entière et qui peuvent être des propriétés d'autres objets.</p> +À la différence de Java qui est un système compilé et dont les classes sont déclarées, JavaScript est traité lors de l'exécution et possède quelques types de données pour représenter les nombres, les booléens et les chaînes de caractères (entre autres). JavaScript utilise un modèle basé sur les prototypes pour représenter les liens entre les objets alors que Java utilise un modèle plus courant basé sur les classes. Les prototypes permettent d'avoir un héritage dynamique. Ainsi, les caractéristiques héritées par un objet peuvent varier dans le temps. JavaScript supporte également les fonctions qui sont des objets à part entière et qui peuvent être des propriétés d'autres objets. -<p>JavaScript est un langage plutôt « libre » comparé au Java. Il n'est pas nécessaire de déclarer toutes les variables, classes et méthodes. Il n'est pas nécessaire de savoir si une méthode est publique, privée ou protégée et il n'y a pas d'interfaces à implémenter. Les variables, les paramètres et les valeurs de retour des fonctions ne sont pas explicitement typés.</p> +JavaScript est un langage plutôt « libre » comparé au Java. Il n'est pas nécessaire de déclarer toutes les variables, classes et méthodes. Il n'est pas nécessaire de savoir si une méthode est publique, privée ou protégée et il n'y a pas d'interfaces à implémenter. Les variables, les paramètres et les valeurs de retour des fonctions ne sont pas explicitement typés. -<p>Java est un langage de programmation utilisant les classes, conçus pour être exécuté rapidement et garantir la sûreté du typage. Cela signifie par exemple qu'il n'est pas possible de transformer un entier Java en un objet ou qu'on ne peut pas accéder à des caractéristiques privées en corrompant le bytecode Java. Le modèle de classes utilisé par Java signifie qu'un programme n'est constitué que de classes et de méthodes. Cet héritage à base de classes, associé au typage fort font qu'on obtient des structures et des hiérarchies d'objets fortement couplées. Pour ces raisons, Java peut apparaître comme un langage plus complexe que JavaScript.</p> +Java est un langage de programmation utilisant les classes, conçus pour être exécuté rapidement et garantir la sûreté du typage. Cela signifie par exemple qu'il n'est pas possible de transformer un entier Java en un objet ou qu'on ne peut pas accéder à des caractéristiques privées en corrompant le bytecode Java. Le modèle de classes utilisé par Java signifie qu'un programme n'est constitué que de classes et de méthodes. Cet héritage à base de classes, associé au typage fort font qu'on obtient des structures et des hiérarchies d'objets fortement couplées. Pour ces raisons, Java peut apparaître comme un langage plus complexe que JavaScript. -<p>À l'inverse, JavaScript est un descendant de langages plus légers, dynamiquement typés tels que HyperTalk et dBASE. Ces langages de scripts visent un public plus large avec une syntaxe plus simple, des fonctionnalités natives spécialisées et des prérequis minimaux pour pouvoir créer des objets.</p> +À l'inverse, JavaScript est un descendant de langages plus légers, dynamiquement typés tels que HyperTalk et dBASE. Ces langages de scripts visent un public plus large avec une syntaxe plus simple, des fonctionnalités natives spécialisées et des prérequis minimaux pour pouvoir créer des objets. -<table class="standard-table"> - <caption>Comparaison synthétique entre JavaScript et Java</caption> - <thead> - <tr> - <th scope="col">JavaScript</th> - <th scope="col">Java</th> - </tr> - </thead> - <tbody> - <tr> - <td>Orienté objet. Aucune distinction entre les types et les objets. L'héritage est basé sur un mécanisme utilisant les prototypes et les propriétés et méthodes peuvent être ajoutées dynamiquement à n'importe quel objet.</td> - <td>Orienté objet, utilisant un modèle de classes. Les objets sont divisés entre les classes et les instances, l'héritage s'effectue via la hiérarchie des classes. Les classes et les instances ne peuvent pas recevoir de nouvelles propriétés ou méthodes dynamiquement.</td> - </tr> - <tr> - <td>Le type de données des variables n'est pas déclaré (typage dynamique).</td> - <td>Le type de données des variables doit être déclaré (typage statique).</td> - </tr> - </tbody> -</table> +| JavaScript | Java | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Orienté objet. Aucune distinction entre les types et les objets. L'héritage est basé sur un mécanisme utilisant les prototypes et les propriétés et méthodes peuvent être ajoutées dynamiquement à n'importe quel objet. | Orienté objet, utilisant un modèle de classes. Les objets sont divisés entre les classes et les instances, l'héritage s'effectue via la hiérarchie des classes. Les classes et les instances ne peuvent pas recevoir de nouvelles propriétés ou méthodes dynamiquement. | +| Le type de données des variables n'est pas déclaré (typage dynamique). | Le type de données des variables doit être déclaré (typage statique). | -<p>Pour plus d'informations sur les différences entre JavaScript et Java, voir le chapitre sur <a href="/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails">les détails du modèle objet JavaScript</a>.</p> +Pour plus d'informations sur les différences entre JavaScript et Java, voir le chapitre sur [les détails du modèle objet JavaScript](/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails). -<h2 id="JavaScript_et_la_spécification_ECMAScript">JavaScript et la spécification ECMAScript</h2> +## JavaScript et la spécification ECMAScript -<p>JavaScript est standardisé par <a href="https://www.ecma-international.org/">Ecma International</a> — une association européenne de standardisation des systèmes d'information et de communication (ECMA étant historiquement un acronyme pour <em>European Computer Manufacturers Association</em>) qui délivre un langage de programmation standardisé, international appelé ECMAScript. Ce langage se comporte de la même façon pour toutes les applications qui supportent ce standard. Les entreprises peuvent utiliser ce langage standard afin de développer leur implémentation de JavaScript. Le standard ECMAScript est documenté avec la spécification ECMA-262. Voir la page <a href="/fr/docs/Web/JavaScript/Nouveautés_et_historique_de_JavaScript">Nouveautés de JavaScript</a> pour en savoir plus sur les différentes versions de JavaScript et les différentes éditions de la spécification ECMAScript.</p> +JavaScript est standardisé par [Ecma International](https://www.ecma-international.org/) — une association européenne de standardisation des systèmes d'information et de communication (ECMA étant historiquement un acronyme pour _European Computer Manufacturers Association_) qui délivre un langage de programmation standardisé, international appelé ECMAScript. Ce langage se comporte de la même façon pour toutes les applications qui supportent ce standard. Les entreprises peuvent utiliser ce langage standard afin de développer leur implémentation de JavaScript. Le standard ECMAScript est documenté avec la spécification ECMA-262. Voir la page [Nouveautés de JavaScript](/fr/docs/Web/JavaScript/Nouveautés_et_historique_de_JavaScript) pour en savoir plus sur les différentes versions de JavaScript et les différentes éditions de la spécification ECMAScript. -<p>Le standard ECMA-262 est également approuvé par l'<a href="https://www.iso.ch/">ISO</a> (<em>International Organization for Standardization</em>) sous ISO-16262. La spécification peut également être trouvée sur <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">le site web d'Ecma International</a>. La spécification ECMAScript ne décrit pas le <em>Document Object Model</em> (DOM) qui est standardisé par le <a href="https://www.w3.org/">World Wide Web Consortium (W3C)</a> et <a href="https://whatwg.org">le WHATWG (Web Hypertext Application Technology Working Group)</a>. Le DOM définit la façon dont les documents HTML sont exposés aux scripts. Pour mieux comprendre les différentes technologies gravitant autour de JavaScript, voir l'article <a href="/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Aperçu des technologies JavaScript</a>.</p> +Le standard ECMA-262 est également approuvé par l'[ISO](https://www.iso.ch/) (_International Organization for Standardization_) sous ISO-16262. La spécification peut également être trouvée sur [le site web d'Ecma International](https://www.ecma-international.org/publications/standards/Ecma-262.htm). La spécification ECMAScript ne décrit pas le _Document Object Model_ (DOM) qui est standardisé par le [World Wide Web Consortium (W3C)](https://www.w3.org/) et [le WHATWG (Web Hypertext Application Technology Working Group)](https://whatwg.org). Le DOM définit la façon dont les documents HTML sont exposés aux scripts. Pour mieux comprendre les différentes technologies gravitant autour de JavaScript, voir l'article [Aperçu des technologies JavaScript](/fr/docs/Web/JavaScript/JavaScript_technologies_overview). -<h3 id="Documentation_JavaScript_et_spécification_ECMAScript">Documentation JavaScript et spécification ECMAScript</h3> +### Documentation JavaScript et spécification ECMAScript -<p>La spécification ECMAScript est un ensemble de conditions à respecter pour implémenter ECMAScript : cela est utile lorsqu'on souhaite implémenter des fonctionnalités standard du langage au sein d'une implémentation ou d'un moteur ECMAScript (tel que SpiderMonkey pour Firefox, ou V8 pour Chrome).</p> +La spécification ECMAScript est un ensemble de conditions à respecter pour implémenter ECMAScript : cela est utile lorsqu'on souhaite implémenter des fonctionnalités standard du langage au sein d'une implémentation ou d'un moteur ECMAScript (tel que SpiderMonkey pour Firefox, ou V8 pour Chrome). -<p>La spécification ECMAScript n'a pas pour but d'aider les développeurs à écrire des scripts. La documentation JavaScript permet d'obtenir des informations pour écrire des scripts JavaScript.</p> +La spécification ECMAScript n'a pas pour but d'aider les développeurs à écrire des scripts. La documentation JavaScript permet d'obtenir des informations pour écrire des scripts JavaScript. -<p>La spécification ECMAScript utilise parfois une terminologie et une syntaxe qui peuvent sembler étranges aux yeux d'un développeur JavaScript. Bien que la description du langage diffère entre ECMAScript et la documentation JavaScript, le langage lui-même reste le même. JavaScript supporte l'ensemble des fonctionnalités mises en avant dans la spécification ECMAScript.</p> +La spécification ECMAScript utilise parfois une terminologie et une syntaxe qui peuvent sembler étranges aux yeux d'un développeur JavaScript. Bien que la description du langage diffère entre ECMAScript et la documentation JavaScript, le langage lui-même reste le même. JavaScript supporte l'ensemble des fonctionnalités mises en avant dans la spécification ECMAScript. -<p>La documentation JavaScript décrit les aspects du langage qui pourront être utilisés par les développeurs JavaScript.</p> +La documentation JavaScript décrit les aspects du langage qui pourront être utilisés par les développeurs JavaScript. -<h2 id="Démarrer_avec_JavaScript">Démarrer avec JavaScript</h2> +## Démarrer avec JavaScript -<p>Pour commencer à développer en JavaScript, c'est très simple : il suffit d'avoir un navigateur web récent. Ce guide inclut certaines fonctionnalités de JavaScript qui ne sont disponibles que dans les dernières versions de Firefox, il est donc recommandé d'utiliser une version de Firefox à jour pour essayer les exemples fournis.</p> +Pour commencer à développer en JavaScript, c'est très simple : il suffit d'avoir un navigateur web récent. Ce guide inclut certaines fonctionnalités de JavaScript qui ne sont disponibles que dans les dernières versions de Firefox, il est donc recommandé d'utiliser une version de Firefox à jour pour essayer les exemples fournis. -<p>L'outil Web Console intégré à Firefox est utile pour expérimenter avec JavaScript. Vous pouvez l'utiliser selon deux modes : le mode de saisie à une ligne et le mode de saisie multiligne.</p> +L'outil Web Console intégré à Firefox est utile pour expérimenter avec JavaScript. Vous pouvez l'utiliser selon deux modes : le mode de saisie à une ligne et le mode de saisie multiligne. -<h3 id="La_console_web">La console web</h3> +### La console web -<p>La <a href="/fr/docs/Outils/Web_Console">console web</a> affiche des informations sur la page actuellement chargée, elle dispose également d'une <a href="/fr/docs/Outils/Web_Console#L'interpr.C3.A9teur_de_lignes_de_commande">ligne de commande</a> qui peut être utilisée pour exécuter des expressions JavaScript dans la page actuelle.</p> +La [console web](/fr/docs/Outils/Web_Console) affiche des informations sur la page actuellement chargée, elle dispose également d'une [ligne de commande](/fr/docs/Outils/Web_Console#L'interpr.C3.A9teur_de_lignes_de_commande) qui peut être utilisée pour exécuter des expressions JavaScript dans la page actuelle. -<p>Pour ouvrir la console, dans le menu, sélectionner « Développement » puis « Console web » (en passant par la barre d'outils, ce sera « Outils » puis « Développement web » puis « Console web »). Avec le clavier, on pourra utiliser la combinaison de touche <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> sur Windows et Linux ou <kbd>Cmd</kbd>-<kbd>Option</kbd>-<kbd>K</kbd> sur Mac. Une fois lancée, la console apparaît en base de la fenêtre du navigateur. En bas de la zone occupée par la console, il y a une ligne de commande qui peut être utilisée pour saisir des instructions JavaScript, le résultat de ces instructions sera affiché dans le panneau au dessus :</p> +Pour ouvrir la console, dans le menu, sélectionner « Développement » puis « Console web » (en passant par la barre d'outils, ce sera « Outils » puis « Développement web » puis « Console web »). Avec le clavier, on pourra utiliser la combinaison de touche <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> sur Windows et Linux ou <kbd>Cmd</kbd>-<kbd>Option</kbd>-<kbd>K</kbd> sur Mac. Une fois lancée, la console apparaît en base de la fenêtre du navigateur. En bas de la zone occupée par la console, il y a une ligne de commande qui peut être utilisée pour saisir des instructions JavaScript, le résultat de ces instructions sera affiché dans le panneau au dessus : -<p><img alt="Console web" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png"></p> + +La console fonctionne exactement de la même manière que `eval` : la dernière expression saisie est retournée. Pour simplifier, on peut imaginer que chaque fois qu'une expression est saisie dans la console, elle est en fait entourée de `console.log` autour de `eval`, comme suit: -<p>La console fonctionne exactement de la même manière que <code>eval</code> : la dernière expression saisie est retournée. Pour simplifier, on peut imaginer que chaque fois qu'une expression est saisie dans la console, elle est en fait entourée de <code>console.log</code> autour de <code>eval</code>, comme suit:</p> - -<pre class="brush: js">function saluer(votreNom) { - alert("Hello " + votreNom) +```js +function saluer(votreNom) { + alert("Hello " + votreNom) } console.log(eval('3 + 5')) -</pre> +``` -<h3 id="EditeurMultiligne">Le mode éditeur multiligne</h3> +### Le mode éditeur multiligne -<p>La console est pratique quand il s'agit d'exécuter des instructions ligne par ligne. Cependant dès qu'on souhaite exécuter un script plus complexe de plusieurs lignes, la console devient vite limitée. Pour ça, on pourra utiliser <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter#le_mode_%C3%A9diteur_multiligne">le mode éditeur multiligne</a>.</p> +La console est pratique quand il s'agit d'exécuter des instructions ligne par ligne. Cependant dès qu'on souhaite exécuter un script plus complexe de plusieurs lignes, la console devient vite limitée. Pour ça, on pourra utiliser [le mode éditeur multiligne](/fr/docs/Tools/Web_Console/The_command_line_interpreter#le_mode_%C3%A9diteur_multiligne). -<h3 id="Coucou_monde_hello_world">Coucou monde (<em>hello world</em>)</h3> +### Coucou monde (_hello world_) -<p>Pour commencer à écrire du JavaScript, ouvrez votre console web en mode éditeur multiligne et écrivez votre premier « <em>Hello world</em> » en JavaScript.</p> +Pour commencer à écrire du JavaScript, ouvrez votre console web en mode éditeur multiligne et écrivez votre premier « _Hello world_ » en JavaScript. -<pre class="brush: js">function saluer(utilisateur) { +```js +function saluer(utilisateur) { return "Bonjour " + utilisateur; } saluer("Alice"); // "Bonjour Alice" -</pre> +``` -<p>Dans les pages qui suivent, ce guide introduira la syntaxe du langage JavaScript ainsi que ses fonctionnalités ; vous pourrez ainsi écrire des applications plus complexes.</p> +Dans les pages qui suivent, ce guide introduira la syntaxe du langage JavaScript ainsi que ses fonctionnalités ; vous pourrez ainsi écrire des applications plus complexes. -<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}}</p> +{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}} diff --git a/files/fr/web/javascript/guide/iterators_and_generators/index.md b/files/fr/web/javascript/guide/iterators_and_generators/index.md index 87d1a5c28a..19d2248042 100644 --- a/files/fr/web/javascript/guide/iterators_and_generators/index.md +++ b/files/fr/web/javascript/guide/iterators_and_generators/index.md @@ -8,37 +8,36 @@ tags: translation_of: Web/JavaScript/Guide/Iterators_and_Generators original_slug: Web/JavaScript/Guide/iterateurs_et_generateurs --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}} -<p>Effectuer des traitements sur chacun des éléments d'une collection est une opération très fréquente. Il existe plusieurs outils natifs dans JavaScript pour parcourir une collection, les boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map">map()</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter">filter()</a></code>. Les itérateurs et les générateurs font de ce concept d'itération une fonctionnalité principale du langage et permettent d'adapter et de personnaliser le comportement des boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code>.</p> +Effectuer des traitements sur chacun des éléments d'une collection est une opération très fréquente. Il existe plusieurs outils natifs dans JavaScript pour parcourir une collection, les boucles [`for`](/fr/docs/Web/JavaScript/Reference/Instructions/for), [`map()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map), [`filter()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter). Les itérateurs et les générateurs font de ce concept d'itération une fonctionnalité principale du langage et permettent d'adapter et de personnaliser le comportement des boucles [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of). -<p>Pour plus de détails sur les mécanismes d'itération, voir les pages suivantes :</p> +Pour plus de détails sur les mécanismes d'itération, voir les pages suivantes : -<ul> - <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li> - <li>{{jsxref("Instructions/for...of","for...of")}}</li> - <li>{{jsxref("Instructions/function*","function*")}} et {{jsxref("Generator")}}</li> - <li>{{jsxref("Opérateurs/yield","yield")}} et {{jsxref("Opérateurs/yield*","yield*")}}</li> -</ul> +- [Les protocoles d'itération](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration) +- {{jsxref("Instructions/for...of","for...of")}} +- {{jsxref("Instructions/function*","function*")}} et {{jsxref("Generator")}} +- {{jsxref("Opérateurs/yield","yield")}} et {{jsxref("Opérateurs/yield*","yield*")}} -<h2 id="Itérateurs">Itérateurs</h2> +## Itérateurs -<p>Un itérateur est un objet sachant comment accéder aux éléments d'une collection un par un et qui connait leur position dans la collection. En JavaScript, un itérateur expose une méthode <code>next()</code> qui retourne l'élément suivant dans la séquence. Cette méthode renvoie un objet possédant deux propriétés : <code>done</code> et <code>value</code>.</p> +Un itérateur est un objet sachant comment accéder aux éléments d'une collection un par un et qui connait leur position dans la collection. En JavaScript, un itérateur expose une méthode `next()` qui retourne l'élément suivant dans la séquence. Cette méthode renvoie un objet possédant deux propriétés : `done` et `value`. -<p>Un itérateur est "terminé" lorsque l'appel à la méthode <code>next()</code> renvoie un objet dont la propriété <code>done</code> vaut <code>true</code>.</p> +Un itérateur est "terminé" lorsque l'appel à la méthode `next()` renvoie un objet dont la propriété `done` vaut `true`. -<p>Une fois créé, un itérateur peut être utilisé explicitement en appelant sa méthode <code>next()</code>, ou implicitement en utilisant la boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code>.</p> +Une fois créé, un itérateur peut être utilisé explicitement en appelant sa méthode `next()`, ou implicitement en utilisant la boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in). -<p>Voici un exemple d'une fonction créant un itérateur qui parcourt l'intervalle défini par ses arguments (depuis <code>debut</code> (inclus) jusqu'à <code>end</code> (exclus) et avec <code>pas</code> comme incrément. La valeur finale qui est renvoyée correspond à la taille de la séquence créée</p> +Voici un exemple d'une fonction créant un itérateur qui parcourt l'intervalle défini par ses arguments (depuis `debut` (inclus) jusqu'à `end` (exclus) et avec `pas` comme incrément. La valeur finale qui est renvoyée correspond à la taille de la séquence créée -<pre class="brush: js">function creerIterateurIntervalle(debut = 0, fin = Infinity, pas = 1) { +```js +function creerIterateurIntervalle(debut = 0, fin = Infinity, pas = 1) { let prochainIndex = debut; let nbIterations = 0; const rangeIterator = { next: function() { let resultat; - if (prochainIndex < fin) { + if (prochainIndex < fin) { resultat = { value: prochainIndex, done: false }; prochainIndex += pas; nbIterations++; @@ -48,11 +47,13 @@ original_slug: Web/JavaScript/Guide/iterateurs_et_generateurs } }; return rangeIterator; -}</pre> +} +``` -<p>On pourra alors utiliser cette fonction et l'itérateur de la façon suivante :</p> +On pourra alors utiliser cette fonction et l'itérateur de la façon suivante : -<pre class="brush: js">let it = creerIterateurIntervalle(1, 10, 2); +```js +let it = creerIterateurIntervalle(1, 10, 2); let resultat = it.next(); while (!resultat.done) { @@ -61,36 +62,38 @@ while (!resultat.done) { } console.log("La séquence parcourue contenait ", result.value, " éléments."); -</pre> +``` -<h2 id="Itérables">Itérables</h2> +## Itérables -<p>Un objet est considéré comme <strong>itérable</strong> s'il définit le comportement qu'il aura lors de l'itération (par exemple les valeurs qui seront utilisées dans une boucle {{jsxref("Instructions/for...of", "for...of")}}). Certains types natifs, tels qu'{{jsxref("Array")}} ou {{jsxref("Map")}}, possède un comportement par défaut pour les itérations, cependant d'autres types comme les Objets, ne possèdent pas ce comportement.</p> +Un objet est considéré comme **itérable** s'il définit le comportement qu'il aura lors de l'itération (par exemple les valeurs qui seront utilisées dans une boucle {{jsxref("Instructions/for...of", "for...of")}}). Certains types natifs, tels qu'{{jsxref("Array")}} ou {{jsxref("Map")}}, possède un comportement par défaut pour les itérations, cependant d'autres types comme les Objets, ne possèdent pas ce comportement. -<p>Pour qu'un objet soit <strong>itérable</strong>, un objet doit implémenter la méthode <strong>@@iterator</strong>, cela signifie que l'objet (ou un des objets de la <a href="/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes">chaîne de prototypes</a>) doit avoir une propriété avec la clé {{jsxref("Symbol.iterator")}}. Cette fonction doit également, même si ce n'est pas une obligation, renvoyer une nouvel opérateur à chaque appel.</p> +Pour qu'un objet soit **itérable**, un objet doit implémenter la méthode **@@iterator**, cela signifie que l'objet (ou un des objets de la [chaîne de prototypes](/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes)) doit avoir une propriété avec la clé {{jsxref("Symbol.iterator")}}. Cette fonction doit également, même si ce n'est pas une obligation, renvoyer une nouvel opérateur à chaque appel. -<h3 id="Itérables_personnalisés">Itérables personnalisés</h3> +### Itérables personnalisés -<p>Il est possible de définir ses propres itérables de cette façon :</p> +Il est possible de définir ses propres itérables de cette façon : -<pre class="brush: js">var monItérable = {}; +```js +var monItérable = {}; monItérable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; [...monItérable] // [1, 2, 3] -</pre> +``` -<h3 id="Itérables_natifs">Itérables natifs</h3> +### Itérables natifs -<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} et {{jsxref("Set")}} sont des itérables natifs car les prototypes de chacun ont tous une méthode {{jsxref("Symbol.iterator")}}.</p> +{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} et {{jsxref("Set")}} sont des itérables natifs car les prototypes de chacun ont tous une méthode {{jsxref("Symbol.iterator")}}. -<h3 id="Les_éléments_de_syntaxe_utilisant_des_itérables">Les éléments de syntaxe utilisant des itérables</h3> +### Les éléments de syntaxe utilisant des itérables -<p>Certaines instructions ou expressions utilisent des itérables, par exemple les boucles {{jsxref("Instructions/for...of","for...of")}} et {{jsxref("Opérateurs/yield*","yield*")}}.</p> +Certaines instructions ou expressions utilisent des itérables, par exemple les boucles {{jsxref("Instructions/for...of","for...of")}} et {{jsxref("Opérateurs/yield*","yield*")}}. -<pre class="brush: js">for(let value of ["a", "b", "c"]){ +```js +for(let value of ["a", "b", "c"]){ console.log(value) } // "a" @@ -107,16 +110,16 @@ gen().next() // { value:"a", done:false } [a, b, c] = new Set(["a", "b", "c"]) a // "a" +``` -</pre> - -<h2 id="Générateurs">Générateurs</h2> +## Générateurs -<p>Les itérateurs personnalisés sont un outil utile mais leur création peut s'avérer complexe et il faut maintenir leur état interne. Avec les générateurs, on peut définir une seule fonction qui est un algorithme itératif et qui peut maintenir son état.</p> +Les itérateurs personnalisés sont un outil utile mais leur création peut s'avérer complexe et il faut maintenir leur état interne. Avec les générateurs, on peut définir une seule fonction qui est un algorithme itératif et qui peut maintenir son état. -<p>Un générateur est un type de fonction spécial qui fonctionne comme une fabrique (<em>factory</em>) d'itérateurs. Une fonction devient un générateur lorsqu'elle contient une ou plusieurs expressions <code>yield</code> et qu'elle utilise la syntaxe <code>function*</code>.</p> +Un générateur est un type de fonction spécial qui fonctionne comme une fabrique (_factory_) d'itérateurs. Une fonction devient un générateur lorsqu'elle contient une ou plusieurs expressions `yield` et qu'elle utilise la syntaxe `function*`. -<pre class="brush: js">function* idMaker(){ +```js +function* idMaker(){ var index = 0; while(true) yield index++; @@ -127,17 +130,19 @@ var gen = idMaker(); console.log(gen.next().value); // 0 console.log(gen.next().value); // 1 console.log(gen.next().value); // 2 -// ...</pre> +// ... +``` -<h2 id="Générateurs_avancés">Générateurs avancés</h2> +## Générateurs avancés -<p>Les générateurs calculent les valeurs à fournir à la demande, ce qui leur permet de représenter efficacement des suites complexes à calculer, voire des séries infinies (comme vu dans l'exemple précédent).</p> +Les générateurs calculent les valeurs à fournir à la demande, ce qui leur permet de représenter efficacement des suites complexes à calculer, voire des séries infinies (comme vu dans l'exemple précédent). -<p>La méthode <code>next()</code> accepte également un argument qui pourra être utilisé pour modifier l'état interne du générateur. Une valeur passée à <code>next()</code> sera traitée comme le résultat de la dernière expression <code>yield</code> qui a interrompu le générateur. Une valeur passée au premier appel de <code>next()</code> sera toujours ignorée.</p> +La méthode `next()` accepte également un argument qui pourra être utilisé pour modifier l'état interne du générateur. Une valeur passée à `next()` sera traitée comme le résultat de la dernière expression `yield` qui a interrompu le générateur. Une valeur passée au premier appel de `next()` sera toujours ignorée. -<p>Par exemple, on peut avoir un générateur pour la suite de Fibonnaci et utiliser <code>next(x)</code> pour redémarrer la série :</p> +Par exemple, on peut avoir un générateur pour la suite de Fibonnaci et utiliser `next(x)` pour redémarrer la série : -<pre class="brush: js">function* fibonacci(){ +```js +function* fibonacci(){ var fn1 = 0; var fn2 = 1; while (true){ @@ -163,14 +168,15 @@ console.log(sequence.next().value); // 8 console.log(sequence.next(true).value); // 0 console.log(sequence.next().value); // 1 console.log(sequence.next().value); // 1 -console.log(sequence.next().value); // 2</pre> +console.log(sequence.next().value); // 2 +``` -<p>Il est possible de forcer un générateur à lever une exception en utilisant la méthode <code>throw()</code> en lui passant la valeur de l'exception en argument. Cette exception sera levée depuis l'état actuel du générateur, comme si le <code>yield</code> qui était en attente avait été une instruction <code>throw <em>valeur</em></code>.</p> +Il est possible de forcer un générateur à lever une exception en utilisant la méthode `throw()` en lui passant la valeur de l'exception en argument. Cette exception sera levée depuis l'état actuel du générateur, comme si le `yield` qui était en attente avait été une instruction `throw valeur`. -<p>Si le mot-clé <code>yield</code> n'est pas trouvé lors de la levée de l'exception, l'exception sera propagée jusqu'à l'appel de <code>throw()</code>, les appels à <code>next()</code> qui suivent renverront une valeur dont la propriété <code>done</code> sera <code>true</code>.</p> +Si le mot-clé `yield` n'est pas trouvé lors de la levée de l'exception, l'exception sera propagée jusqu'à l'appel de `throw()`, les appels à `next()` qui suivent renverront une valeur dont la propriété `done` sera `true`. -<p>Si l'exception n'est pas interceptée dans le générateur, elle se propagera jusqu'à l'appel de <code>throw()</code> et les appels suivants de <code>next()</code> renverront un objet dont la propriété <code>done </code>vaut <code>true</code>.</p> +Si l'exception n'est pas interceptée dans le générateur, elle se propagera jusqu'à l'appel de `throw()` et les appels suivants de `next()` renverront un objet dont la propriété `done `vaut `true`. -<p>Les générateurs possèdent une méthode <code>return(valeur)</code> qui permet de renvoyer une valeur donnée et de terminer le générateur.</p> +Les générateurs possèdent une méthode `return(valeur)` qui permet de renvoyer une valeur donnée et de terminer le générateur. -<p>{{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}}</p> +{{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}} diff --git a/files/fr/web/javascript/guide/keyed_collections/index.md b/files/fr/web/javascript/guide/keyed_collections/index.md index 9b93b1cc67..bef70f4b38 100644 --- a/files/fr/web/javascript/guide/keyed_collections/index.md +++ b/files/fr/web/javascript/guide/keyed_collections/index.md @@ -10,19 +10,20 @@ tags: translation_of: Web/JavaScript/Guide/Keyed_collections original_slug: Web/JavaScript/Guide/Collections_avec_clés --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}} -<p>Ce chapitre présente les collections de données qui sont ordonnées avec une clé. Les objets <code>Map</code> et <code>Set</code> contiennent des éléments sur lesquels on peut itérer dans leur ordre d'insertion.</p> +Ce chapitre présente les collections de données qui sont ordonnées avec une clé. Les objets `Map` et `Set` contiennent des éléments sur lesquels on peut itérer dans leur ordre d'insertion. -<h2 id="Maps">Maps</h2> +## Maps -<h3 id="Le_type_Map">Le type <code>Map</code></h3> +### Le type `Map` -<p>ECMAScript 2015 introduit une nouvelle structure de données pour faire correspondre des données entre elle. Un objet {{jsxref("Map")}} représente une collection de données qui sont des correspondances entre des clés ou valeurs et pour lequel on peut itérer dans l'ordre d'insertion pour lister les différentes clés / valeurs.</p> +ECMAScript 2015 introduit une nouvelle structure de données pour faire correspondre des données entre elle. Un objet {{jsxref("Map")}} représente une collection de données qui sont des correspondances entre des clés ou valeurs et pour lequel on peut itérer dans l'ordre d'insertion pour lister les différentes clés / valeurs. -<p>Le code suivant illustre certaines opérations basiques avec <code>Map</code>. Pour plus d'informations sur cet objet, voir également la page de référence {{jsxref("Map")}}. Il est possible d'utiliser une boucle {{jsxref("Instructions/for...of","for...of")}} pour renvoyer un tableau <code>[clé, valeur]</code> à chaque itération.</p> +Le code suivant illustre certaines opérations basiques avec `Map`. Pour plus d'informations sur cet objet, voir également la page de référence {{jsxref("Map")}}. Il est possible d'utiliser une boucle {{jsxref("Instructions/for...of","for...of")}} pour renvoyer un tableau `[clé, valeur]` à chaque itération. -<pre class="brush: js">var sayings = new Map(); +```js +var sayings = new Map(); sayings.set("dog", "woof"); sayings.set("cat", "meow"); sayings.set("elephant", "toot"); @@ -36,38 +37,35 @@ for (var [key, value] of sayings) { } // "cat goes meow" // "elephant goes toot" -</pre> +``` -<h3 id="Comparaison_entre_les_types_Object_et_Map">Comparaison entre les types <code>Object</code> et <code>Map</code></h3> +### Comparaison entre les types `Object` et `Map` -<p>Habituellement, les objets {{jsxref("Object", "objets", "", 1)}} ont été utilisés pour faire correspondre des chaînes avec des valeurs. Les objets permettent d'associer des clés avec des valeurs, de récupérer ces valeurs, de supprimer des clés, de détecter si quelque chose est enregistré dans une clé. Le type <code>Map</code> possède cependant certains avantages pour être utilisés comme <em>maps</em>.</p> +Habituellement, les objets {{jsxref("Object", "objets", "", 1)}} ont été utilisés pour faire correspondre des chaînes avec des valeurs. Les objets permettent d'associer des clés avec des valeurs, de récupérer ces valeurs, de supprimer des clés, de détecter si quelque chose est enregistré dans une clé. Le type `Map` possède cependant certains avantages pour être utilisés comme _maps_. -<ul> - <li>Les clés d'un objet de type <code>Object</code> sont des chaînes de caractères. Pour <code>Map</code>, une clé peut être une valeur de n'importe quel type.</li> - <li>On peut simplement obtenir la taille d'un objet <code>Map</code> alors qu'il faut tenir compte manuellement du nombre de clés contenue dans un objet <code>Object</code>.</li> - <li>Les itérations sur les <em>maps</em> se font dans l'ordre d'insertion des éléments.</li> - <li>Un objet de type <code>Object</code> possède un prototype, il y a donc des clés par défaut déjà présentes dans l'objet. (cela peut être surchargé en utilisant <code>map = Object.create(null)</code>).</li> -</ul> +- Les clés d'un objet de type `Object` sont des chaînes de caractères. Pour `Map`, une clé peut être une valeur de n'importe quel type. +- On peut simplement obtenir la taille d'un objet `Map` alors qu'il faut tenir compte manuellement du nombre de clés contenue dans un objet `Object`. +- Les itérations sur les _maps_ se font dans l'ordre d'insertion des éléments. +- Un objet de type `Object` possède un prototype, il y a donc des clés par défaut déjà présentes dans l'objet. (cela peut être surchargé en utilisant `map = Object.create(null)`). -<p>Pour savoir si on doit utiliser le type <code>Map</code> ou le type <code>Object</code>, on peut considérer les aspects suivants :</p> +Pour savoir si on doit utiliser le type `Map` ou le type `Object`, on peut considérer les aspects suivants : -<ul> - <li>On utilisera des <em>maps</em> plutôt que des objets lorsque les clés sont inconnues avant l'exécution et lorsque toutes les clés sont de même type et que les valeurs sont de même type.</li> - <li>On utilisera des <em>maps</em> lorsque les clés peuvent être des valeurs primitives autres que des chaînes de caractères (en effet, les objets considèrent toutes leurs clés comme des chaînes en convertissant les valeurs).</li> - <li>On utilisera des objets lorsqu'il y a une logique propre à des éléments individuels.</li> -</ul> +- On utilisera des _maps_ plutôt que des objets lorsque les clés sont inconnues avant l'exécution et lorsque toutes les clés sont de même type et que les valeurs sont de même type. +- On utilisera des _maps_ lorsque les clés peuvent être des valeurs primitives autres que des chaînes de caractères (en effet, les objets considèrent toutes leurs clés comme des chaînes en convertissant les valeurs). +- On utilisera des objets lorsqu'il y a une logique propre à des éléments individuels. -<h3 id="Le_type_WeakMap">Le type <code>WeakMap</code></h3> +### Le type `WeakMap` -<p>L'objet {{jsxref("WeakMap")}} est une collection de paires clés/valeurs pour lesquelles <strong>les clés sont uniquement des objets</strong> (les valeurs peuvent être d'un type arbitraire). Les références vers les objets sont des références « faibles ». Cela signifie qu'elles seront collectées par le ramasse-miettes s'il n'y a pas d'autres références vers cet objet. L'API <code>WeakMap</code> offre les mêmes fonctionnalités que l'API <code>Map</code>.</p> +L'objet {{jsxref("WeakMap")}} est une collection de paires clés/valeurs pour lesquelles **les clés sont uniquement des objets** (les valeurs peuvent être d'un type arbitraire). Les références vers les objets sont des références « faibles ». Cela signifie qu'elles seront collectées par le ramasse-miettes s'il n'y a pas d'autres références vers cet objet. L'API `WeakMap` offre les mêmes fonctionnalités que l'API `Map`. -<p>La différence entre le type <code>Map</code> et le type <code>WeakMap</code> est que les clés d'un objet <code>WeakMap</code> ne sont pas énumérables (c'est-à-dire qu'on n'a pas de méthode pour donner la liste des clés). S'il en existait une, la liste dépendrait de l'état d'avancement du ramasse-miettes, ce qui introduirait un non-déterminisme.</p> +La différence entre le type `Map` et le type `WeakMap` est que les clés d'un objet `WeakMap` ne sont pas énumérables (c'est-à-dire qu'on n'a pas de méthode pour donner la liste des clés). S'il en existait une, la liste dépendrait de l'état d'avancement du ramasse-miettes, ce qui introduirait un non-déterminisme. -<p>Pour plus d'informations et d'exemples, voir également le paragraphe « Pourquoi WeakMap ? » sur l'article {{jsxref("WeakMap")}} de la référence.</p> +Pour plus d'informations et d'exemples, voir également le paragraphe « Pourquoi WeakMap ? » sur l'article {{jsxref("WeakMap")}} de la référence. -<p>Un cas d'utilisation des objets <code>WeakMap</code> est le stockage de données privées d'un objet ou pour cacher certains détails d'implémentation. L'exemple qui suit est tiré du billet de blog de Nick Fitzgerald <a href="http://fitzgeraldnick.com/weblog/53/">« Masquer des détails d'implémentation avec les WeakMaps ECMAScript 6 »</a>. Les données et méthodes privées sont stockées dans l'objet WeakMap <code>privates</code>. Tout ce qui est exposé par l'instance et le prototype est public. Tout ce qui est en dehors est inaccessible car <code>privates</code> n'est pas exporté depuis le module :</p> +Un cas d'utilisation des objets `WeakMap` est le stockage de données privées d'un objet ou pour cacher certains détails d'implémentation. L'exemple qui suit est tiré du billet de blog de Nick Fitzgerald [« Masquer des détails d'implémentation avec les WeakMaps ECMAScript 6 »](http://fitzgeraldnick.com/weblog/53/). Les données et méthodes privées sont stockées dans l'objet WeakMap `privates`. Tout ce qui est exposé par l'instance et le prototype est public. Tout ce qui est en dehors est inaccessible car `privates` n'est pas exporté depuis le module : -<pre class="brush: js">const privates = new WeakMap(); +```js +const privates = new WeakMap(); function Public() { const me = { @@ -82,17 +80,18 @@ Public.prototype.method = function () { }; module.exports = Public; -</pre> +``` -<h2 id="Les_ensembles">Les ensembles</h2> +## Les ensembles -<h3 id="Le_type_Set">Le type <code>Set</code></h3> +### Le type `Set` -<p>Les objets {{jsxref("Set")}} sont des ensembles de valeurs. Il est possible de les parcourir dans l'ordre d'insertion des éléments. Une valeur d'un élément <code>Set</code> ne peut y apparaître qu'une seule fois, il est unique pour cette instance de <code>Set</code>.</p> +Les objets {{jsxref("Set")}} sont des ensembles de valeurs. Il est possible de les parcourir dans l'ordre d'insertion des éléments. Une valeur d'un élément `Set` ne peut y apparaître qu'une seule fois, il est unique pour cette instance de `Set`. -<p>Le code suivant illustre certaines opérations basiques avec <code>Set</code>. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète.</p> +Le code suivant illustre certaines opérations basiques avec `Set`. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète. -<pre class="brush: js">var monEnsemble = new Set(); +```js +var monEnsemble = new Set(); monEnsemble.add(1); monEnsemble.add("du texte"); monEnsemble.add("toto"); @@ -104,50 +103,45 @@ monEnsemble.size; // 2 for (let item of monEnsemble) console.log(item); // 1 // "du texte" -</pre> +``` -<h3 id="Convertir_des_tableaux_(Array)_en_ensembles_(Set)">Convertir des tableaux (<code>Array</code>) en ensembles (<code>Set</code>)</h3> +### Convertir des tableaux (`Array`) en ensembles (`Set`) -<p>Il est possible de créer un {{jsxref("Array")}} à partir d'un <code>Set</code> grâce à {{jsxref("Array.from")}} ou l'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">opérateur de décomposition</a>. Pour effectuer la conversion dans l'autre sens, on peut utiliser le constructeur <code>Set</code> avec un argument de type <code>Array</code>. Encore une fois, les objets <code>Set</code> stockent des valeurs uniques, les éléments dupliqués dans un tableau seront supprimés lors de la conversion.</p> +Il est possible de créer un {{jsxref("Array")}} à partir d'un `Set` grâce à {{jsxref("Array.from")}} ou l'[opérateur de décomposition](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition). Pour effectuer la conversion dans l'autre sens, on peut utiliser le constructeur `Set` avec un argument de type `Array`. Encore une fois, les objets `Set` stockent des valeurs uniques, les éléments dupliqués dans un tableau seront supprimés lors de la conversion. -<pre class="brush: js">Array.from(monSet); +```js +Array.from(monSet); [...monSet2]; monSet2 = new Set([1,2,3,4]); -</pre> +``` -<h3 id="Comparaison_entre_Array_et_Set">Comparaison entre <code>Array</code> et <code>Set</code></h3> +### Comparaison entre `Array` et `Set` -<p>Historiquement, on représentait des ensembles avec des tableaux JavaScript. Ce nouveau type, <code>Set</code>, possède certains avantages :</p> +Historiquement, on représentait des ensembles avec des tableaux JavaScript. Ce nouveau type, `Set`, possède certains avantages : -<ul> - <li>Lorsqu'on souhaite vérifier si un élément existe déjà dans un tableau, on est obligé d'utiliser {{jsxref("Array.indexOf", "indexOf")}} ce qui peut diminuer les performances.</li> - <li>Les objets <code>Set</code> permettent de supprimer les éléments avec leur valeur. Avec un tableau, il faudrait « découper » le tableau sur l'indice de l'élément.</li> - <li>Dans un tableau, la valeur {{jsxref("NaN")}} ne peut pas être trouvée avec la méthode <code>indexOf</code>.</li> - <li>Les objets <code>Set</code> permettent de stocker des valeurs uniques, il n'est pas nécessaire d'effectuer des vérifications manuellement.</li> -</ul> +- Lorsqu'on souhaite vérifier si un élément existe déjà dans un tableau, on est obligé d'utiliser {{jsxref("Array.indexOf", "indexOf")}} ce qui peut diminuer les performances. +- Les objets `Set` permettent de supprimer les éléments avec leur valeur. Avec un tableau, il faudrait « découper » le tableau sur l'indice de l'élément. +- Dans un tableau, la valeur {{jsxref("NaN")}} ne peut pas être trouvée avec la méthode `indexOf`. +- Les objets `Set` permettent de stocker des valeurs uniques, il n'est pas nécessaire d'effectuer des vérifications manuellement. -<h3 id="Le_type_WeakSet">Le type <code>WeakSet</code></h3> +### Le type `WeakSet` -<p>Les objets {{jsxref("WeakSet")}} sont des ensembles d'objets. Un objet d'un <code>WeakSet</code> ne peut y apparaître qu'une seule fois maximum. On ne peut pas itérer sur les objets <code>WeakSet</code> (ils ne sont pas énumérables).</p> +Les objets {{jsxref("WeakSet")}} sont des ensembles d'objets. Un objet d'un `WeakSet` ne peut y apparaître qu'une seule fois maximum. On ne peut pas itérer sur les objets `WeakSet` (ils ne sont pas énumérables). -<p>Les principales différences avec l'objet {{jsxref("Set")}} sont :</p> +Les principales différences avec l'objet {{jsxref("Set")}} sont : -<ul> - <li>Contrairement aux objets <code>Set</code>, les objets <code>WeakSet</code> sont des ensembles qui ne comprennent <strong>que des objets</strong>, les valeurs ne peuvent pas être d'un type arbitraire.</li> - <li>Les objets <code>WeakSet</code> utilisent des références faibles vers les objets. Ainsi, s'il n'y a pas d'autres références vers l'objet stocké dans le <code>WeakSet</code>, celui-ci pourra être collecté par le ramasse-miettes pour libérer de la mémoire. Cela signifie également qu'on ne peut pas maintenir une liste des différents objets contenus dans l'ensemble : les objets <code>WeakSet</code> ne sont pas énumérables.</li> -</ul> +- Contrairement aux objets `Set`, les objets `WeakSet` sont des ensembles qui ne comprennent **que des objets**, les valeurs ne peuvent pas être d'un type arbitraire. +- Les objets `WeakSet` utilisent des références faibles vers les objets. Ainsi, s'il n'y a pas d'autres références vers l'objet stocké dans le `WeakSet`, celui-ci pourra être collecté par le ramasse-miettes pour libérer de la mémoire. Cela signifie également qu'on ne peut pas maintenir une liste des différents objets contenus dans l'ensemble : les objets `WeakSet` ne sont pas énumérables. -<p>Les cas d'utilisations pour les objets <code>WeakSet</code> objects sont relativement limités. Ils empêcheront toute fuite mémoire donc on pourra, de façon sécurisée, les utiliser avec des éléments DOM qui pourront être des clés (pour les utiliser par ailleurs, etc.).</p> +Les cas d'utilisations pour les objets `WeakSet` objects sont relativement limités. Ils empêcheront toute fuite mémoire donc on pourra, de façon sécurisée, les utiliser avec des éléments DOM qui pourront être des clés (pour les utiliser par ailleurs, etc.). -<h2 id="Égalité_des_clés_et_des_valeurs_avec_Map_et_Set">Égalité des clés et des valeurs avec <code>Map</code> et <code>Set</code></h2> +## Égalité des clés et des valeurs avec `Map` et `Set` -<p>L'égalité utilisée pour les clés des objets <code>Map</code> et celle utilisée pour les valeurs des objets <code>Set</code> sont les mêmes : elles sont basées sur <a href="https://tc39.github.io/ecma262/#sec-samevaluezero">l'algorithme suivant</a> :</p> +L'égalité utilisée pour les clés des objets `Map` et celle utilisée pour les valeurs des objets `Set` sont les mêmes : elles sont basées sur [l'algorithme suivant](https://tc39.github.io/ecma262/#sec-samevaluezero) : -<ul> - <li>L'égalité fonctionne de la même façon qu'avec l'opérateur d'égalité stricte <code>===</code>.</li> - <li><code>-0</code> et <code>+0</code> sont considérés égaux.</li> - <li>{{jsxref("NaN")}} est considéré égal à lui-même (contrairement à ce qu'on obtient avec <code>===</code>).</li> -</ul> +- L'égalité fonctionne de la même façon qu'avec l'opérateur d'égalité stricte `===`. +- `-0` et `+0` sont considérés égaux. +- {{jsxref("NaN")}} est considéré égal à lui-même (contrairement à ce qu'on obtient avec `===`). -<p>{{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}</p> +{{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}} diff --git a/files/fr/web/javascript/guide/loops_and_iteration/index.md b/files/fr/web/javascript/guide/loops_and_iteration/index.md index b3a7c80e31..c7b999b8b4 100644 --- a/files/fr/web/javascript/guide/loops_and_iteration/index.md +++ b/files/fr/web/javascript/guide/loops_and_iteration/index.md @@ -8,76 +8,73 @@ tags: translation_of: Web/JavaScript/Guide/Loops_and_iteration original_slug: Web/JavaScript/Guide/Boucles_et_itération --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}} -<p>Les boucles permettent de répéter des actions simplement et rapidement. Ce chapitre du<a href="/fr/docs/Web/JavaScript/Guide"> guide JavaScript</a> présente les différentes instructions qu'il est possible d'utiliser en JavaScript pour effectuer des itérations.</p> +Les boucles permettent de répéter des actions simplement et rapidement. Ce chapitre du[ guide JavaScript](/fr/docs/Web/JavaScript/Guide) présente les différentes instructions qu'il est possible d'utiliser en JavaScript pour effectuer des itérations. -<p>Les boucles permettent de répéter des actions simplement et rapidement. Une boucle peut être vue comme une version informatique de « copier N lignes » ou de « faire X fois quelque chose ». Par exemple, en JavaScript, on pourrait traduire « Faire 5 pas vers l'est » avec cette boucle :</p> +Les boucles permettent de répéter des actions simplement et rapidement. Une boucle peut être vue comme une version informatique de « copier N lignes » ou de « faire X fois quelque chose ». Par exemple, en JavaScript, on pourrait traduire « Faire 5 pas vers l'est » avec cette boucle : -<pre class="brush: js">for (let pas = 0; pas < 5; pas++) { +```js +for (let pas = 0; pas < 5; pas++) { // Ceci sera exécuté 5 fois // À chaque éxécution, la variable "pas" augmentera de 1 // Lorsque'elle sera arrivée à 5, le boucle se terminera. console.log('Faire ' + pas + ' pas vers l\'est'); } -</pre> - -<p>Il y a différents types de boucles mais elles se ressemblent toutes au sens où elles répètent une action un certain nombre de fois (ce nombre peut éventuellement être zéro). Les différents types de boucles permettent d'utiliser différentes façon de commencer et de terminer une boucle. Chaque type de boucle pourra être utilisé en fonction de la situation et du problème que l'on cherche à résoudre.</p> - -<p>Voici les différentes boucles fournies par JavaScript :</p> - -<ul> - <li>{{anch("Linstruction for")}}</li> - <li>{{anch("Linstruction do...while")}}</li> - <li>{{anch("Linstruction while")}}</li> - <li>{{anch("Linstruction label")}}</li> - <li>{{anch("Linstruction break")}}</li> - <li>{{anch("Linstruction continue")}}</li> - <li>{{anch("Linstruction for...in")}}</li> - <li>{{anch("Linstruction for...of")}}</li> -</ul> - -<h2 id="Linstruction_for">L'instruction for</h2> - -<p>Une boucle {{jsxref("statements/for", "for")}} répète des instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. La boucle <code>for</code> JavaScript ressemble beaucoup à celle utilisée en C ou en Java. Une boucle <code>for</code> s'utilise de la façon suivante :</p> - -<pre class="syntaxbox">for ([expressionInitiale]; [condition]; [expressionIncrément]) - instruction -</pre> - -<p>Voici ce qui se passe quand une boucle <code>for</code> s'exécute :</p> - -<ol> - <li>L'expression initiale <code>expressionInitiale</code> est exécutée si elle est présente. Généralement, on utilise cette expression pour initialiser un ou plusieurs compteurs dont on se servira dans la boucle. Il est possible d'utiliser des expressions plus complexes si besoin. Elle peut servir à déclarer des variables.</li> - <li>L'expression <code>condition</code> est évaluée, si elle vaut <code>true</code>, les instructions contenues dans la boucle sont exécutées. Si la valeur de <code>condition</code> est <code>false</code>, la boucle <code>for</code> se termine. Si la condition est absente, elle est considérée comme <code>true</code>.</li> - <li>L'instruction <code>instruction</code> est exécutée. Si l'on souhaite exécuter plusieurs instructions, on utilisera un bloc d'instructions (<code>{ ... }</code>) afin de les grouper.</li> - <li>Si elle est présente, l'expression de mise à jour<code> expressionIncrément</code> est exécutée.</li> - <li>On retourne ensuite à l'étape 2.</li> -</ol> - -<h3 id="Exemple"><strong>Exemple</strong></h3> - -<p>La fonction suivante contient une instruction <code>for</code> qui compte le nombre d'options sélectionnées dans une liste déroulante (ici, un objet {{HTMLElement("select")}} permettant une sélection multiple). L'instruction <code>for</code> déclare une variable <code>i</code> et l'initialise à zéro. Elle vérifie que <code>i</code> est bien inférieur au nombre d'options et, pour chaque option, effectue un test conditionnel pour savoir si l'option est sélectionnée puis passe à l'option suivante en incrémentant la variable <code>i</code> pour chaque itération.</p> - -<pre class="brush: html"><form name="selectForm"> - <p> - <label for="typesMusique">Veuillez choisir des genres musicaux, puis cliquez :</label> - <select id="typesMusique" name="typesMusique" multiple="multiple"> - <option selected="selected">R&B</option> - <option>Jazz</option> - <option>Blues</option> - <option>New Age</option> - <option>Classique</option> - <option>Opera</option> - </select> - </p> - <p><button id="btn" type="button">Combien sont sélectionnés ?</button></p> -</form> - -<script> +``` + +Il y a différents types de boucles mais elles se ressemblent toutes au sens où elles répètent une action un certain nombre de fois (ce nombre peut éventuellement être zéro). Les différents types de boucles permettent d'utiliser différentes façon de commencer et de terminer une boucle. Chaque type de boucle pourra être utilisé en fonction de la situation et du problème que l'on cherche à résoudre. + +Voici les différentes boucles fournies par JavaScript : + +- {{anch("Linstruction for")}} +- {{anch("Linstruction do...while")}} +- {{anch("Linstruction while")}} +- {{anch("Linstruction label")}} +- {{anch("Linstruction break")}} +- {{anch("Linstruction continue")}} +- {{anch("Linstruction for...in")}} +- {{anch("Linstruction for...of")}} + +## L'instruction for + +Une boucle {{jsxref("statements/for", "for")}} répète des instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. La boucle `for` JavaScript ressemble beaucoup à celle utilisée en C ou en Java. Une boucle `for` s'utilise de la façon suivante : + + for ([expressionInitiale]; [condition]; [expressionIncrément]) + instruction + +Voici ce qui se passe quand une boucle `for` s'exécute : + +1. L'expression initiale `expressionInitiale` est exécutée si elle est présente. Généralement, on utilise cette expression pour initialiser un ou plusieurs compteurs dont on se servira dans la boucle. Il est possible d'utiliser des expressions plus complexes si besoin. Elle peut servir à déclarer des variables. +2. L'expression `condition` est évaluée, si elle vaut `true`, les instructions contenues dans la boucle sont exécutées. Si la valeur de `condition` est `false`, la boucle `for` se termine. Si la condition est absente, elle est considérée comme `true`. +3. L'instruction `instruction` est exécutée. Si l'on souhaite exécuter plusieurs instructions, on utilisera un bloc d'instructions (`{ ... }`) afin de les grouper. +4. Si elle est présente, l'expression de mise à jour` expressionIncrément` est exécutée. +5. On retourne ensuite à l'étape 2. + +### **Exemple** + +La fonction suivante contient une instruction `for` qui compte le nombre d'options sélectionnées dans une liste déroulante (ici, un objet {{HTMLElement("select")}} permettant une sélection multiple). L'instruction `for` déclare une variable `i` et l'initialise à zéro. Elle vérifie que `i` est bien inférieur au nombre d'options et, pour chaque option, effectue un test conditionnel pour savoir si l'option est sélectionnée puis passe à l'option suivante en incrémentant la variable `i` pour chaque itération. + +```html +<form name="selectForm"> + <p> + <label for="typesMusique">Veuillez choisir des genres musicaux, puis cliquez :</label> + <select id="typesMusique" name="typesMusique" multiple="multiple"> + <option selected="selected">R&B</option> + <option>Jazz</option> + <option>Blues</option> + <option>New Age</option> + <option>Classique</option> + <option>Opera</option> + </select> + </p> + <p><button id="btn" type="button">Combien sont sélectionnés ?</button></p> +</form> + +<script> function quantité(selectObject) { let qtéSélectionnée = 0; - for (let i = 0; i < selectObject.options.length; i++) { + for (let i = 0; i < selectObject.options.length; i++) { if (selectObject.options[i].selected) { qtéSélectionnée++; } @@ -89,133 +86,131 @@ let btn = document.getElementById("btn"); btn.addEventListener("click", function(){ alert('Nombre d\'options choisies : ' + quantité(document.selectForm.typesMusique)) }); -</script> +</script> +``` -</pre> +## L'instruction `do...while` -<h2 id="Linstruction_do...while">L'instruction <code>do...while</code></h2> +L'instruction {{jsxref("statements/do...while", "do...while")}} permet de répéter un ensemble d'instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. (_NdT_ : littéralement « do...while » signifie « faire... tant que »). Une instruction `do...while` s'utilise de la façon suivante : -<p>L'instruction {{jsxref("statements/do...while", "do...while")}} permet de répéter un ensemble d'instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. (<em>NdT</em> : littéralement « do...while » signifie « faire... tant que »). Une instruction <code>do...while</code> s'utilise de la façon suivante :</p> + do + instruction + while (condition); -<pre class="syntaxbox">do - instruction -while (condition); -</pre> +`instruction` est exécutée au moins une fois avant que la condition soit vérifiée. Pour utiliser plusieurs instructions à cet endroit, on utilisera une instruction de bloc (`{ ... }`) pour regrouper différentes instructions. Si la `condition` est vérifiée, l'instruction est à nouveau exécutée. À la fin de chaque exécution, la condition est vérifiée. Quand la condition n'est plus vérifiée (vaut `false` ou une valeur équivalente), l'exécution de l'instruction` do...while` est stoppée et le contrôle passe à l'instruction suivante. -<p><code>instruction</code> est exécutée au moins une fois avant que la condition soit vérifiée. Pour utiliser plusieurs instructions à cet endroit, on utilisera une instruction de bloc (<code>{ ... }</code>) pour regrouper différentes instructions. Si la <code>condition</code> est vérifiée, l'instruction est à nouveau exécutée. À la fin de chaque exécution, la condition est vérifiée. Quand la condition n'est plus vérifiée (vaut <code>false</code> ou une valeur équivalente), l'exécution de l'instruction<code> do...while</code> est stoppée et le contrôle passe à l'instruction suivante.</p> +### Exemple -<h3 id="Exemple_2">Exemple</h3> +Dans l'exemple qui suit, la boucle `do` est exécutée au moins une fois et répétée jusqu'à ce que `i` ne soit plus inférieur à 5. -<p>Dans l'exemple qui suit, la boucle <code>do</code> est exécutée au moins une fois et répétée jusqu'à ce que <code>i</code> ne soit plus inférieur à 5.</p> - -<pre class="brush: js">let i = 0; +```js +let i = 0; do { i += 1; console.log(i); -} while (i < 5);</pre> +} while (i < 5); +``` -<h2 id="Linstruction_while">L'instruction <code>while</code></h2> +## L'instruction `while` -<p>Une instruction {{jsxref("statements/while", "while")}} permet d'exécuter une instruction tant qu'une condition donnée est vérifiée. Cette instruction <code>while</code> s'utilise de la façon suivante :</p> +Une instruction {{jsxref("statements/while", "while")}} permet d'exécuter une instruction tant qu'une condition donnée est vérifiée. Cette instruction `while` s'utilise de la façon suivante : -<pre class="syntaxbox">while (condition) - instruction -</pre> + while (condition) + instruction -<p>Si la condition n'est pas vérifiée, l'instruction<code> instruction</code> n'est pas exécutée et le contrôle passe directement à l'instruction suivant la boucle.</p> +Si la condition n'est pas vérifiée, l'instruction` instruction` n'est pas exécutée et le contrôle passe directement à l'instruction suivant la boucle. -<p>Le test de la condition s'effectue avant d'exécuter <code>instruction</code>. Si la condition renvoie <code>true</code> (ou une valeur équivalente), <code>instruction</code> sera exécutée et la condition sera testée à nouveau. Si la condition renvoie <code>false</code> (ou une valeur équivalente), l'exécution s'arrête et le contrôle est passé à l'instruction qui suit <code>while</code>.</p> +Le test de la condition s'effectue avant d'exécuter `instruction`. Si la condition renvoie `true` (ou une valeur équivalente), `instruction` sera exécutée et la condition sera testée à nouveau. Si la condition renvoie `false` (ou une valeur équivalente), l'exécution s'arrête et le contrôle est passé à l'instruction qui suit `while`. -<p>Pour pouvoir utiliser plusieurs instructions dans la boucle, on utilisera une instruction de bloc (<code>{ ... }</code>) afin de les regrouper.</p> +Pour pouvoir utiliser plusieurs instructions dans la boucle, on utilisera une instruction de bloc (`{ ... }`) afin de les regrouper. -<h3 id="Exemple_1">Exemple 1</h3> +### Exemple 1 -<p>La boucle <code>while</code> qui suit permet d'effectuer des itérations tant que <code>n</code> est inférieur à 3 :</p> +La boucle `while` qui suit permet d'effectuer des itérations tant que `n` est inférieur à 3 : -<pre class="brush: js">let n = 0; +```js +let n = 0; let x = 0; -while (n < 3) { +while (n < 3) { n++; x += n; } -</pre> +``` -<p>À chaque itération, la boucle incrémente <code>n</code> et ajoute la valeur de <code>n</code> à <code>x</code>. <code>x</code> et <code>n</code> prendront ainsi les valeurs suivantes :</p> +À chaque itération, la boucle incrémente `n` et ajoute la valeur de `n` à `x`. `x` et `n` prendront ainsi les valeurs suivantes : -<ul> - <li>Après la première itération : <code>n</code> = 1 et <code>x</code> = 1</li> - <li>Après la deuxième itération : <code>n</code> = 2 et <code>x</code> = 3</li> - <li>Après la troisième itération : <code>n</code> = 3 et <code>x</code> = 6</li> -</ul> +- Après la première itération : `n` = 1 et `x` = 1 +- Après la deuxième itération : `n` = 2 et `x` = 3 +- Après la troisième itération : `n` = 3 et `x` = 6 -<p>Une fois la troisième itération effectuée, la condition <code>n < 3</code> n'est plus vérifiée, par conséquent, la boucle se termine.</p> +Une fois la troisième itération effectuée, la condition `n < 3` n'est plus vérifiée, par conséquent, la boucle se termine. -<h3 id="Exemple_2_2">Exemple 2</h3> +### Exemple 2 -<p>Attention à éviter les boucles infinies. Il faut bien s'assurer que la condition utilisée dans la boucle ne soit plus vérifiée à un moment donné. Si la condition est toujours vérifiée, la boucle se répétera sans jamais s'arrêter. Dans l'exemple qui suit, les instructions contenues dans la boucle <code>while</code> s'exécutent sans discontinuer car la condition est toujours vérifiée :</p> +Attention à éviter les boucles infinies. Il faut bien s'assurer que la condition utilisée dans la boucle ne soit plus vérifiée à un moment donné. Si la condition est toujours vérifiée, la boucle se répétera sans jamais s'arrêter. Dans l'exemple qui suit, les instructions contenues dans la boucle `while` s'exécutent sans discontinuer car la condition est toujours vérifiée : -<pre class="brush: js">while (true) { +```js +while (true) { console.log("Coucou monde !"); -}</pre> +} +``` -<h2 id="Linstruction_label">L'instruction <code>label</code></h2> +## L'instruction `label` -<p>Un {{jsxref("statements/label","label")}} (ou étiquette) permet de fournir un identifiant pour une instruction afin d'y faire référence depuis un autre endroit dans le programme. On peut ainsi identifier une boucle grâce à un label puis utiliser les instructions <code>break</code> ou <code>continue</code> pour indiquer si le programme doit interrompre ou poursuivre l'exécution de cette boucle.</p> +Un {{jsxref("statements/label","label")}} (ou étiquette) permet de fournir un identifiant pour une instruction afin d'y faire référence depuis un autre endroit dans le programme. On peut ainsi identifier une boucle grâce à un label puis utiliser les instructions `break` ou `continue` pour indiquer si le programme doit interrompre ou poursuivre l'exécution de cette boucle. -<p>On utilise un label de la façon suivante :</p> +On utilise un label de la façon suivante : -<pre class="syntaxbox">label: - instruction -</pre> + label: + instruction -<p>La valeur de <code><em>label</em></code> peut être n'importe quel identifiant JavaScript valide (et ne doit pas être un mot réservé pour le langage). L'<code><em>instruction</em></code> peut être n'importe quelle instruction JavaScript valide (y compris un bloc).</p> +La valeur de `label` peut être n'importe quel identifiant JavaScript valide (et ne doit pas être un mot réservé pour le langage). L'`instruction` peut être n'importe quelle instruction JavaScript valide (y compris un bloc). -<h3 id="Exemple_3">Exemple</h3> +### Exemple -<p>Dans cet exemple, on utilise un label <code>memoBoucle</code> pour identifier une boucle <code>while</code>.</p> +Dans cet exemple, on utilise un label `memoBoucle` pour identifier une boucle `while`. -<pre class="brush: js">memoBoucle: +```js +memoBoucle: while (memo == true) { faireQQC(); -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Pour plus de détails sur cette instruction, voir la page de la référence JavaScript pour <a href="/fr/docs/Web/JavaScript/Reference/Instructions/label"><code>label</code></a>.</p> -</div> +> **Note :** Pour plus de détails sur cette instruction, voir la page de la référence JavaScript pour [`label`](/fr/docs/Web/JavaScript/Reference/Instructions/label). -<h2 id="Linstruction_break">L'instruction <code>break</code></h2> +## L'instruction `break` -<p>L'instruction {{jsxref("statements/break","break")}} est utilisée pour finir l'exécution d'une boucle, d'une instruction <code>switch</code>, ou avec un label.</p> +L'instruction {{jsxref("statements/break","break")}} est utilisée pour finir l'exécution d'une boucle, d'une instruction `switch`, ou avec un label. -<ul> - <li>Lorsque <code>break</code> est utilisé sans label, il provoque la fin de l'instruction <code>while</code>, <code>do-while</code>, <code>for</code>, ou <code>switch</code> dans laquelle il est inscrit (on finit l'instruction la plus imbriquée), le contrôle est ensuite passé à l'instruction suivante.</li> - <li>Lorsque <code>break</code> est utilisé avec un label, il provoque la fin de l'instruction correspondante.</li> -</ul> +- Lorsque `break` est utilisé sans label, il provoque la fin de l'instruction `while`, `do-while`, `for`, ou `switch` dans laquelle il est inscrit (on finit l'instruction la plus imbriquée), le contrôle est ensuite passé à l'instruction suivante. +- Lorsque `break` est utilisé avec un label, il provoque la fin de l'instruction correspondante. -<p>La syntaxe de cette instruction possède donc deux formes :</p> +La syntaxe de cette instruction possède donc deux formes : -<ol> - <li><code>break;</code></li> - <li><code>break <em>label</em>;</code></li> -</ol> +1. `break;` +2. `break label;` -<p>La première forme permet d'interrompre la boucle la plus imbriquée (ou le <code>switch</code>) dans laquelle on se trouve. La seconde forme interrompt l'exécution d'une instruction identifiée par un label.</p> +La première forme permet d'interrompre la boucle la plus imbriquée (ou le `switch`) dans laquelle on se trouve. La seconde forme interrompt l'exécution d'une instruction identifiée par un label. -<h3 id="Exemple_1_2">Exemple <strong>1</strong></h3> +### Exemple **1** -<p>Dans l'exemple qui suit, on itère sur un tableau grâce à une boucle jusqu'à trouver un élément dont la valeur est <code>valeurTest </code>:</p> +Dans l'exemple qui suit, on itère sur un tableau grâce à une boucle jusqu'à trouver un élément dont la valeur est `valeurTest `: -<pre class="brush: js">for (i = 0; i < a.length; i++) { +```js +for (i = 0; i < a.length; i++) { if (a[i] === valeurTest) { break; } -}</pre> +} +``` -<h3 id="Exemple_2_3">Exemple 2</h3> +### Exemple 2 -<p>Ici, on utilise <code>break</code> des deux façons : avec une instruction représentée par un label et sans.</p> +Ici, on utilise `break` des deux façons : avec une instruction représentée par un label et sans. -<pre class="brush: js">let x = 0; +```js +let x = 0; let z = 0; labelAnnuleBoucle: while (true) { console.log("Boucle externe : " + x); @@ -224,38 +219,35 @@ labelAnnuleBoucle: while (true) { while (true) { console.log("Boucle interne : " + z); z += 1; - if (z === 10 && x === 10) { + if (z === 10 && x === 10) { break labelAnnuleBoucle; } else if (z === 10) { break; } } } -</pre> +``` -<h2 id="Linstruction_continue">L'instruction <code>continue</code></h2> +## L'instruction `continue` -<p>L'instruction {{jsxref("statements/continue","continue")}} permet de reprendre une boucle <code>while</code>, <code>do-while</code>, <code>for</code>, ou une instruction <code>label</code>.</p> +L'instruction {{jsxref("statements/continue","continue")}} permet de reprendre une boucle `while`, `do-while`, `for`, ou une instruction `label`. -<ul> - <li>Lorsque <code>continue</code> est utilisé sans label, l'itération courante de la boucle (celle la plus imbriquée) est terminée et la boucle passe à l'exécution de la prochaine itération. À la différence de l'instruction <code>break</code>, <code>continue</code> ne stoppe pas entièrement l'exécution de la boucle. Si elle est utilisée dans une boucle <code>while</code>, l'itération reprend au niveau de la condition d'arrêt. Dans une boucle <code>for</code>, l'itération reprend au niveau de l'expression d'incrément pour la boucle.</li> - <li>Lorsque <code>continue</code> est utilisé avec un label, il est appliqué à l'instruction de boucle correspondante.</li> -</ul> +- Lorsque `continue` est utilisé sans label, l'itération courante de la boucle (celle la plus imbriquée) est terminée et la boucle passe à l'exécution de la prochaine itération. À la différence de l'instruction `break`, `continue` ne stoppe pas entièrement l'exécution de la boucle. Si elle est utilisée dans une boucle `while`, l'itération reprend au niveau de la condition d'arrêt. Dans une boucle `for`, l'itération reprend au niveau de l'expression d'incrément pour la boucle. +- Lorsque `continue` est utilisé avec un label, il est appliqué à l'instruction de boucle correspondante. -<p>L'instruction <code>continue</code> s'utilise donc de la façon suivante :</p> +L'instruction `continue` s'utilise donc de la façon suivante : -<ol> - <li><code>continue;</code></li> - <li><code>continue </code><em><code>label;</code></em></li> -</ol> +1. `continue;` +2. `continue `_`label;`_ -<h3 id="Exemple_1_3">Exemple 1</h3> +### Exemple 1 -<p>Dans l'exemple qui suit, on utilise une boucle <code>while</code> avec une instruction <code>continue</code> qui est exécutée lorsque <code>i</code> vaut 3. Ici, <code>n</code> prendra donc les valeurs 1, 3, 7 et 12.</p> +Dans l'exemple qui suit, on utilise une boucle `while` avec une instruction `continue` qui est exécutée lorsque `i` vaut 3. Ici, `n` prendra donc les valeurs 1, 3, 7 et 12. -<pre class="brush: js">let i = 0; +```js +let i = 0; let n = 0; -while (i < 5) { +while (i < 5) { i++; if (i === 3) { continue; @@ -264,23 +256,23 @@ while (i < 5) { console.log(n); } // 1, 3, 7, 12 +``` -</pre> +### Exemple 2 -<h3 id="Exemple_2_4">Exemple 2</h3> +Dans l'exemple suivant, on a une instruction étiquetée `vérifIetJ` qui contient une autre instruction étiquetée `vérifJ`. Si l'instruction `continue` est utilisée, le programme reprend l'exécution au début de l'instruction `vérifJ`. Chaque fois que `continue` est utilisé, `vérifJ` réitère jusqu'à ce que sa condition renvoie `false`. Lorsque c'est le cas, le reste de l'instruction `vérifIetJ` est exécuté. -<p>Dans l'exemple suivant, on a une instruction étiquetée <code>vérifIetJ</code> qui contient une autre instruction étiquetée <code>vérifJ</code>. Si l'instruction <code>continue</code> est utilisée, le programme reprend l'exécution au début de l'instruction <code>vérifJ</code>. Chaque fois que <code>continue</code> est utilisé, <code>vérifJ</code> réitère jusqu'à ce que sa condition renvoie <code>false</code>. Lorsque c'est le cas, le reste de l'instruction <code>vérifIetJ</code> est exécuté.</p> +Si `continue` utilisait l'étiquette `vérifIetJ`, le programme continuerait au début de l'instruction `vérifIetJ` -<p>Si <code>continue</code> utilisait l'étiquette <code>vérifIetJ</code>, le programme continuerait au début de l'instruction <code>vérifIetJ</code></p> - -<pre class="brush: js">let i = 0; +```js +let i = 0; let j = 8; -vérifIetJ: while (i < 4) { +vérifIetJ: while (i < 4) { console.log("i : " + i); i += 1; - vérifJ: while (j > 4) { + vérifJ: while (j > 4) { console.log("j : "+ j); j -= 1; if ((j % 2) === 0){ @@ -290,22 +282,23 @@ vérifIetJ: while (i < 4) { } console.log("i = " + i); console.log("j = " + j); -}</pre> +} +``` -<h2 id="Linstruction_for...in">L'instruction <code>for...in</code></h2> +## L'instruction `for...in` -<p>L'instruction {{jsxref("statements/for...in","for...in")}} permet d'itérer sur l'ensemble des propriétés énumérables d'un objet. Pour chaque propriété, JavaScript exécutera l'instruction indiquée. Cette instruction s'utilise de la façon suivante :</p> +L'instruction {{jsxref("statements/for...in","for...in")}} permet d'itérer sur l'ensemble des propriétés énumérables d'un objet. Pour chaque propriété, JavaScript exécutera l'instruction indiquée. Cette instruction s'utilise de la façon suivante : -<pre class="syntaxbox">for (variable in objet) { - instruction -} -</pre> + for (variable in objet) { + instruction + } -<h3 id="Exemple_4">Exemple</h3> +### Exemple -<p>La fonction suivante prend comme argument un objet et le nom de cet objet. Elle parcourt ensuite les propriétés de l'objet et renvoie une chaîne de caractères qui liste les propriétés avec leurs noms et leurs valeurs respectives :</p> +La fonction suivante prend comme argument un objet et le nom de cet objet. Elle parcourt ensuite les propriétés de l'objet et renvoie une chaîne de caractères qui liste les propriétés avec leurs noms et leurs valeurs respectives : -<pre class="brush: js">function afficherProps(obj, nomObj) { +```js +function afficherProps(obj, nomObj) { var result = ""; for (var i in obj) { result += nomObj + "." + i + " = " + obj[i] + "\n"; @@ -313,29 +306,31 @@ vérifIetJ: while (i < 4) { result += "\n"; return result; } -</pre> +``` -<p>Pour un objet <code>voiture</code> dont les propriétés sont <code>fabricant</code> et <code>modèle</code>, <code>result</code> serait :</p> +Pour un objet `voiture` dont les propriétés sont `fabricant` et `modèle`, `result` serait : -<pre class="brush: js">voiture.fabricant = Ford +```js +voiture.fabricant = Ford voiture.modèle = Mustang -</pre> +``` -<h3 id="Les_tableaux_arrays_et_for...in">Les tableaux (arrays) et <code>for...in</code></h3> +### Les tableaux (arrays) et `for...in` -<p>Bien qu'il soit tentant d'utiliser cette instruction pour parcourir les éléments d'un objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array">Array</a></code> , cela peut avoir des comportements inattendus. En effet, <code>for...in</code> permet de parcourir les propriétés définies par l'utilisateur ainsi que les éléments de tableau. Ainsi, si l'on modifie un objet <code>Array</code> en lui ajoutant des propriétés et/ou des méthodes, la boucle <code>for...in</code> renverra le nom de ces nouvelles propriétés en plus des indices des éléments du tableau. C'est pourquoi, il est préférable d'utiliser une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> avec les indices du tableau pour parcourir ses éléments.</p> +Bien qu'il soit tentant d'utiliser cette instruction pour parcourir les éléments d'un objet [`Array`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array) , cela peut avoir des comportements inattendus. En effet, `for...in` permet de parcourir les propriétés définies par l'utilisateur ainsi que les éléments de tableau. Ainsi, si l'on modifie un objet `Array` en lui ajoutant des propriétés et/ou des méthodes, la boucle `for...in` renverra le nom de ces nouvelles propriétés en plus des indices des éléments du tableau. C'est pourquoi, il est préférable d'utiliser une boucle [`for`](/fr/docs/Web/JavaScript/Reference/Instructions/for) avec les indices du tableau pour parcourir ses éléments. -<h2 id="Linstruction_for...of">L'instruction <code>for...of</code></h2> +## L'instruction `for...of` -<p>L'instruction {{jsxref("statements/for...of","for...of")}} crée une boucle qui fonctionne avec <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">les objets itérables</a> (qui incluent {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, l'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code>, etc.). La boucle appelle un mécanisme d'itération propre à l'objet utilisé et elle parcourt l'objet et les valeurs de ses différentes propriétés.</p> +L'instruction {{jsxref("statements/for...of","for...of")}} crée une boucle qui fonctionne avec [les objets itérables](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration) (qui incluent {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, l'objet [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments), etc.). La boucle appelle un mécanisme d'itération propre à l'objet utilisé et elle parcourt l'objet et les valeurs de ses différentes propriétés. -<pre class="syntaxbox">for (<em>variable</em> of <em>objet</em>) { - <em>instruction -</em>}</pre> + for (variable of objet) { + instruction + } -<p>Dans l'exemple suivant, on illustre la différence entre une boucle <code>for...of</code> et une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code>. <code>for...in</code> parcourt les noms des propriétés d'un objet alors que <code>for...of</code> parcourt les <strong>valeurs</strong> des propriétés :</p> +Dans l'exemple suivant, on illustre la différence entre une boucle `for...of` et une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in). `for...in` parcourt les noms des propriétés d'un objet alors que `for...of` parcourt les **valeurs** des propriétés : -<pre class="brush:js">let arr = [3, 5, 7]; +```js +let arr = [3, 5, 7]; arr.toto = "coucou"; for (let i in arr) { @@ -345,6 +340,6 @@ for (let i in arr) { for (let i of arr) { console.log(i); // affiche 3, 5, 7 dans la console } -</pre> +``` -<p>{{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}}</p> +{{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}} diff --git a/files/fr/web/javascript/guide/meta_programming/index.md b/files/fr/web/javascript/guide/meta_programming/index.md index c126f53d88..8564629cd6 100644 --- a/files/fr/web/javascript/guide/meta_programming/index.md +++ b/files/fr/web/javascript/guide/meta_programming/index.md @@ -9,248 +9,360 @@ tags: translation_of: Web/JavaScript/Guide/Meta_programming original_slug: Web/JavaScript/Guide/Métaprogrammation --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}} -<p>À partir d'ECMAScript 2015, JavaScript fournit les objets natifs {{jsxref("Proxy")}} et {{jsxref("Reflect")}}. Ces objets permettent d'intercepter et de définir des comportements spécifiques pour certaines opérations fondamentales du langage (par exemple la recherche d'une propriété, l'affectation, l'énumération, l'appel d'une fonction, etc.). Grâce à ces deux objets, il est possible d'interagir avec le langage lui-même (on parle alors de métaprogrammation).</p> +À partir d'ECMAScript 2015, JavaScript fournit les objets natifs {{jsxref("Proxy")}} et {{jsxref("Reflect")}}. Ces objets permettent d'intercepter et de définir des comportements spécifiques pour certaines opérations fondamentales du langage (par exemple la recherche d'une propriété, l'affectation, l'énumération, l'appel d'une fonction, etc.). Grâce à ces deux objets, il est possible d'interagir avec le langage lui-même (on parle alors de métaprogrammation). -<h2 id="Les_proxies">Les proxies</h2> +## Les proxies -<p>Introduits avec ECMAScript 2015, les objets {{jsxref("Proxy")}} permettent d'intercepter certaines opérations JavaScript et de définir le comportement à avoir quand celles-ci se produisent. Par exemple, on peut intercepter l'accès à une propriété d'un objet :</p> +Introduits avec ECMAScript 2015, les objets {{jsxref("Proxy")}} permettent d'intercepter certaines opérations JavaScript et de définir le comportement à avoir quand celles-ci se produisent. Par exemple, on peut intercepter l'accès à une propriété d'un objet : -<pre class="brush: js">var handler = { +```js +var handler = { get: function(cible, nom){ return nom in cible ? cible[nom] : 42; }}; var p = new Proxy({}, handler); p.a = 1; console.log(p.a, p.b); // 1, 42 -</pre> +``` -<p>Ici, l'objet <code>Proxy</code> définit une <em>cible</em> (ici c'est un objet vide) et un gestionnaire (<em>handler</em>) qui implémente une <em>trappe</em> pour l'opération <em>get</em>. Ainsi, l'objet qui est « proxyfié » ne renverra pas <code>undefined</code> lorsqu'on tentera d'accéder à une propriété qui n'est pas définie, à la place le nombre 42 sera renvoyé.</p> +Ici, l'objet `Proxy` définit une _cible_ (ici c'est un objet vide) et un gestionnaire (_handler_) qui implémente une _trappe_ pour l'opération _get_. Ainsi, l'objet qui est « proxyfié » ne renverra pas `undefined` lorsqu'on tentera d'accéder à une propriété qui n'est pas définie, à la place le nombre 42 sera renvoyé. -<div class="note"> -<p><strong>Note :</strong> D'autres exemples sont disponibles sur la page de l'objet {{jsxref("Proxy")}}.</p> -</div> +> **Note :** D'autres exemples sont disponibles sur la page de l'objet {{jsxref("Proxy")}}. -<h3 id="Terminologie">Terminologie</h3> +### Terminologie -<p>Lorsqu'on utilise les proxies et leurs fonctionnalités, on utilisera les termes suivants :</p> +Lorsqu'on utilise les proxies et leurs fonctionnalités, on utilisera les termes suivants : -<dl> - <dt>{{jsxref("Objets_globaux/Proxy/handler","gestionnaire (handler)","","true")}}</dt> - <dd>L'objet qui contient les trappes.</dd> - <dt>trappes</dt> - <dd>Les méthodes qui fournissent l'accès aux propriétés. Ce concept est analogue aux trappes utilisées dans les systèmes d'exploitations.</dd> - <dt>cible</dt> - <dd>L'objet que le proxy virtualise. C'est généralement un objet utilisé en arrière-plan pour stocker les informations. Les invariants (c'est-à-dire les éléments sémantiques qui doivent rester inchangés) concernant le caractère non-extensible de l'objet ou l'aspect non-configurable des propriétés sont vérifiés par rapport à cet objet cible.</dd> - <dt>invariants</dt> - <dd>Les éléments sémantiques qui ne doivent pas être modifiés par les opérations définies dans les proxies. Si un invariant n'est pas respecté au sein d'un gestionnaire, cela provoquera une exception {{jsxref("TypeError")}}.</dd> -</dl> +- {{jsxref("Objets_globaux/Proxy/handler","gestionnaire (handler)","","true")}} + - : L'objet qui contient les trappes. +- trappes + - : Les méthodes qui fournissent l'accès aux propriétés. Ce concept est analogue aux trappes utilisées dans les systèmes d'exploitations. +- cible + - : L'objet que le proxy virtualise. C'est généralement un objet utilisé en arrière-plan pour stocker les informations. Les invariants (c'est-à-dire les éléments sémantiques qui doivent rester inchangés) concernant le caractère non-extensible de l'objet ou l'aspect non-configurable des propriétés sont vérifiés par rapport à cet objet cible. +- invariants + - : Les éléments sémantiques qui ne doivent pas être modifiés par les opérations définies dans les proxies. Si un invariant n'est pas respecté au sein d'un gestionnaire, cela provoquera une exception {{jsxref("TypeError")}}. -<h2 id="Les_gestionnaires_et_les_trappes">Les gestionnaires et les trappes</h2> +## Les gestionnaires et les trappes -<p>Le tableau suivant résume les différentes trappes disponibles pour les objets <code>Proxy</code>. Pour plus d'explications et de détails, voir les différents <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler">pages de la référence</a> sur chacun de ces concepts.</p> +Le tableau suivant résume les différentes trappes disponibles pour les objets `Proxy`. Pour plus d'explications et de détails, voir les différents [pages de la référence](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler) sur chacun de ces concepts. <table class="standard-table"> - <thead> - <tr> - <th>Gestionnaires / Trappes</th> - <th>Opérations interceptées</th> - <th>Invariants</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</td> - <td>{{jsxref("Object.getPrototypeOf()")}}<br> - {{jsxref("Reflect.getPrototypeOf()")}}<br> - {{jsxref("Object/proto", "__proto__")}}<br> - {{jsxref("Object.prototype.isPrototypeOf()")}}<br> - {{jsxref("Operators/instanceof", "instanceof")}}</td> - <td><code>getPrototypeOf</code> doit renvoyer un objet ou <code>null</code>.<br> - <br> - Si <code>cible</code> n'est pas extensible, <code>Object.getPrototypeOf(proxy)</code> doit renvoyer le même objet que <code>Object.getPrototypeOf(cible)</code>.</td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</td> - <td>{{jsxref("Object.setPrototypeOf()")}}<br> - {{jsxref("Reflect.setPrototypeOf()")}}</td> - <td> - <p>Si <code>cible</code> n'est pas extensible, le paramètre <code>prototype</code> doit être la même valeur que <code>Object.getPrototypeOf(cible)</code>.</p> - </td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/isExtensible", "handler.isExtensible()")}}</td> - <td> - <p>{{jsxref("Object.isExtensible()")}}</p> - - <p>{{jsxref("Reflect.isExtensible()")}}</p> - </td> - <td> - <p><code>Object.isExtensible(proxy)</code> doit renvoyer la même valeur que <code>Object.isExtensible(target)</code>.</p> - </td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</td> - <td> - <p>{{jsxref("Object.preventExtensions()")}}</p> - - <p>{{jsxref("Reflect.preventExtensions()")}}</p> - </td> - <td> - <p><code>Object.preventExtensions(proxy)</code> ne renvoie <code>true</code> que si <code>Object.isExtensible(proxy)</code> vaut <code>false</code>.</p> - </td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</td> - <td> - <p>{{jsxref("Object.getOwnPropertyDescriptor()")}}</p> - - <p>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</p> - </td> - <td> - <p><code>getOwnPropertyDescriptor</code> doit renvoyer un objet ou <code>undefined</code>.</p> - - <p>Une propriété ne peut pas être vue comme non-existante si elle existe comme une propriété propre non-configurable de l'objet cible.</p> - - <p>Une propriété ne peut pas être vue comme non-existante si elle existe comme une propriété propre de la cible et que l'objet cible n'est pas extensible.</p> - - <p>Une propriété ne peut pas être vue comme existante si elle n'existe pas comme une propriété propre de l'objet cible et que l'objet cible n'est pas extensible.</p> - - <p>Une propriété ne peut pas être vue comme non-configurable si elle n'existe pas comme une propriété propre de l'objet cible ou si elle existe comme une propriété configurable propre de l'objet cible.</p> - - <p>Le résultat de <code>Object.getOwnPropertyDescriptor(cible)</code> peut être appliqué à la cible en utilisant <code>Object.defineProperty</code> sans que cela ne lève d'exception.</p> - </td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty()")}}</td> - <td> - <p>{{jsxref("Object.defineProperty()")}}</p> - - <p>{{jsxref("Reflect.defineProperty()")}}</p> - </td> - <td> - <p>Une propriété ne peut pas être ajoutée si l'objet cible n'est pas extensible.</p> - - <p>Une propriété ne peut pas être ajoutée ou être modifiée afin d'être non-configurable si elle n'existe pas comme une propriété propre de l'objet cible et qu'elle n'est pas non-configurable.</p> - - <p>Une propriété peut ne pas être non-configurable si une propriété correspondante configurable existe sur l'objet cible.</p> - - <p>Si une propriété possède une propriété correspondante sur l'objet cible, <code>Object.defineProperty(cible, prop, descripteur)</code> ne doit pas renvoyer d'exception.</p> - - <p>En mode strict, si la valeur de retour de <code>defineProperty</code> est <code>false</code>, cela entraînera une exception {{jsxref("TypeError")}} exception.</p> - </td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/has", "handler.has()")}}</td> - <td> - <p>Requête d'une propriété : <code>toto in proxy</code></p> - - <p>Requête d'une propriété héritée : <code>toto in Object.create(proxy)</code></p> - - <p>{{jsxref("Reflect.has()")}}</p> - </td> - <td> - <p>Une propriété ne peut pas être vue comme non-existante si elle existe comme propriété propre non-configurable de l'objet cible.</p> - - <p>Une propriété ne peut pas être vue comme non-existante si elle existe comme propriété propre de l'objet cible et que l'objet cible n'est pas extensible.</p> - </td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/get", "handler.get()")}}</td> - <td> - <p>Accès à une propriété : <code>proxy[toto]</code> et <code>proxy.truc</code></p> - - <p>Accès à une propriété héritée : <code>Object.create(proxy)[toto]</code></p> - - <p>{{jsxref("Reflect.get()")}}</p> - </td> - <td> - <p>La valeur rapportée pour la propriété doit être la même que la valeur de la propriété correspondante sur l'objet cible si celle-ci est une propriété de donnée non accessible en écriture et non-configurable..</p> - - <p>La valeur rapportée pour une propriété doit être <code>undefined</code> si la propriété correspondante de l'objet cible est une propriété d'accesseur dont l'attribut [[Get]] vaut <code>undefined</code>.</p> - </td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/set", "handler.set()")}}</td> - <td> - <p>Affection d'une propriété : <code>proxy[toto] = truc</code> et <code>proxy.toto = truc</code><br> - <br> - Affectation d'une propriété héritée : <code>Object.create(proxy)[toto] = truc</code><br> - <br> - {{jsxref("Reflect.set()")}}</p> - </td> - <td> - <p>Il est impossible de modifier la valeur d'une propriété pour que celle-ci soit différente de la valeur de la propriété correspondante de l'objet cible si la propriété de l'objet cible est une propriété de donnée qui n'est pas accessible en écriture et qui n'est pas configurable.</p> - - <p>Il est impossible de modifier la valeur d'une propriété si la propriété correspondante de l'objet cible est une propriété d'accesseur non-configurable dont l'attribut [[Set]] vaut <code>undefined</code>.</p> - - <p>En mode strict, si le gestionnaire pour <code>set</code> renvoie <code>false</code>, cela provoquera une exception {{jsxref("TypeError")}}.</p> - </td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</td> - <td> - <p>Suppression d'une propriété : <code>delete proxy[toto]</code> et <code>delete proxy.toto</code><br> - <br> - {{jsxref("Reflect.deleteProperty()")}}</p> - </td> - <td>Une propriété ne peut pas être supprimée si elle existe comme une propriété propre non-configurable de l'objet cible.</td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/enumerate", "handler.enumerate()")}}</td> - <td> - <p>Lister les propriétés avec <code>for...in</code> : <code>for (var nom in proxy) {...}</code><br> - <br> - {{jsxref("Reflect.enumerate()")}}</p> - </td> - <td>La méthode <code>enumerate</code> doit renvoyer un objet.</td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/ownKeys", "handler.ownKeys()")}}</td> - <td> - <p>{{jsxref("Object.getOwnPropertyNames()")}}<br> - {{jsxref("Object.getOwnPropertySymbols()")}}<br> - {{jsxref("Object.keys()")}}<br> - {{jsxref("Reflect.ownKeys()")}}</p> - </td> - <td> - <p>Le résultat de <code>ownKeys</code> est une liste.<br> - <br> - Le type de chaque élément de la liste est soit une {{jsxref("String")}} soit un {{jsxref("Symbol")}}.<br> - <br> - La liste résultatnte doit contenir les clés de toutes les propriétés non-configurables de l'objet cible.<br> - <br> - Si l'objet cible n'est pas extensible, la liste résultante doit contenir toutes les clés des propriétés propres de l'objet cibles et aucune autre valeur.</p> - </td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/apply", "handler.apply()")}}</td> - <td> - <p><code>proxy(..args)</code><br> - <br> - {{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}<br> - <br> - {{jsxref("Reflect.apply()")}}</p> - </td> - <td>Il n'y a pas d'invariant pour la méthode <code>handler.apply</code>.</td> - </tr> - <tr> - <td>{{jsxref("Objets_globaux/Proxy/handler/construct", "handler.construct()")}}</td> - <td> - <p><code>new proxy(...args)</code><br> - {{jsxref("Reflect.construct()")}}</p> - </td> - <td>Le résultat doit être un <code>Objet</code>.</td> - </tr> - </tbody> + <thead> + <tr> + <th>Gestionnaires / Trappes</th> + <th>Opérations interceptées</th> + <th>Invariants</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}} + </td> + <td> + {{jsxref("Object.getPrototypeOf()")}}<br />{{jsxref("Reflect.getPrototypeOf()")}}<br />{{jsxref("Object/proto", "__proto__")}}<br />{{jsxref("Object.prototype.isPrototypeOf()")}}<br />{{jsxref("Operators/instanceof", "instanceof")}} + </td> + <td> + <code>getPrototypeOf</code> doit renvoyer un objet ou + <code>null</code>.<br /><br />Si <code>cible</code> n'est pas + extensible, <code>Object.getPrototypeOf(proxy)</code> doit renvoyer le + même objet que <code>Object.getPrototypeOf(cible)</code>. + </td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}} + </td> + <td> + {{jsxref("Object.setPrototypeOf()")}}<br />{{jsxref("Reflect.setPrototypeOf()")}} + </td> + <td> + <p> + Si <code>cible</code> n'est pas extensible, le paramètre + <code>prototype</code> doit être la même valeur que + <code>Object.getPrototypeOf(cible)</code>. + </p> + </td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/isExtensible", "handler.isExtensible()")}} + </td> + <td> + <p>{{jsxref("Object.isExtensible()")}}</p> + <p>{{jsxref("Reflect.isExtensible()")}}</p> + </td> + <td> + <p> + <code>Object.isExtensible(proxy)</code> doit renvoyer la même valeur + que <code>Object.isExtensible(target)</code>. + </p> + </td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "handler.preventExtensions()")}} + </td> + <td> + <p>{{jsxref("Object.preventExtensions()")}}</p> + <p>{{jsxref("Reflect.preventExtensions()")}}</p> + </td> + <td> + <p> + <code>Object.preventExtensions(proxy)</code> ne renvoie + <code>true</code> que si <code>Object.isExtensible(proxy)</code> vaut + <code>false</code>. + </p> + </td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}} + </td> + <td> + <p>{{jsxref("Object.getOwnPropertyDescriptor()")}}</p> + <p>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</p> + </td> + <td> + <p> + <code>getOwnPropertyDescriptor</code> doit renvoyer un objet ou + <code>undefined</code>. + </p> + <p> + Une propriété ne peut pas être vue comme non-existante si elle existe + comme une propriété propre non-configurable de l'objet cible. + </p> + <p> + Une propriété ne peut pas être vue comme non-existante si elle existe + comme une propriété propre de la cible et que l'objet cible n'est pas + extensible. + </p> + <p> + Une propriété ne peut pas être vue comme existante si elle n'existe + pas comme une propriété propre de l'objet cible et que l'objet cible + n'est pas extensible. + </p> + <p> + Une propriété ne peut pas être vue comme non-configurable si elle + n'existe pas comme une propriété propre de l'objet cible ou si elle + existe comme une propriété configurable propre de l'objet cible. + </p> + <p> + Le résultat de + <code>Object.getOwnPropertyDescriptor(cible)</code> peut être appliqué + à la cible en utilisant <code>Object.defineProperty</code> sans que + cela ne lève d'exception. + </p> + </td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty()")}} + </td> + <td> + <p>{{jsxref("Object.defineProperty()")}}</p> + <p>{{jsxref("Reflect.defineProperty()")}}</p> + </td> + <td> + <p> + Une propriété ne peut pas être ajoutée si l'objet cible n'est pas + extensible. + </p> + <p> + Une propriété ne peut pas être ajoutée ou être modifiée afin d'être + non-configurable si elle n'existe pas comme une propriété propre de + l'objet cible et qu'elle n'est pas non-configurable. + </p> + <p> + Une propriété peut ne pas être non-configurable si une propriété + correspondante configurable existe sur l'objet cible. + </p> + <p> + Si une propriété possède une propriété correspondante sur l'objet + cible, <code>Object.defineProperty(cible, prop, descripteur)</code> ne + doit pas renvoyer d'exception. + </p> + <p> + En mode strict, si la valeur de retour de + <code>defineProperty</code> est <code>false</code>, cela entraînera + une exception {{jsxref("TypeError")}} exception. + </p> + </td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/has", "handler.has()")}} + </td> + <td> + <p>Requête d'une propriété : <code>toto in proxy</code></p> + <p> + Requête d'une propriété héritée : + <code>toto in Object.create(proxy)</code> + </p> + <p>{{jsxref("Reflect.has()")}}</p> + </td> + <td> + <p> + Une propriété ne peut pas être vue comme non-existante si elle existe + comme propriété propre non-configurable de l'objet cible. + </p> + <p> + Une propriété ne peut pas être vue comme non-existante si elle existe + comme propriété propre de l'objet cible et que l'objet cible n'est pas + extensible. + </p> + </td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/get", "handler.get()")}} + </td> + <td> + <p> + Accès à une propriété : <code>proxy[toto]</code> et + <code>proxy.truc</code> + </p> + <p> + Accès à une propriété héritée : + <code>Object.create(proxy)[toto]</code> + </p> + <p>{{jsxref("Reflect.get()")}}</p> + </td> + <td> + <p> + La valeur rapportée pour la propriété doit être la même que la valeur + de la propriété correspondante sur l'objet cible si celle-ci est une + propriété de donnée non accessible en écriture et non-configurable.. + </p> + <p> + La valeur rapportée pour une propriété doit être + <code>undefined</code> si la propriété correspondante de l'objet cible + est une propriété d'accesseur dont l'attribut [[Get]] vaut + <code>undefined</code>. + </p> + </td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set()")}} + </td> + <td> + <p> + Affection d'une propriété : <code>proxy[toto] = truc</code> et + <code>proxy.toto = truc</code><br /><br />Affectation d'une propriété + héritée : <code>Object.create(proxy)[toto] = truc</code + ><br /><br />{{jsxref("Reflect.set()")}} + </p> + </td> + <td> + <p> + Il est impossible de modifier la valeur d'une propriété pour que + celle-ci soit différente de la valeur de la propriété correspondante + de l'objet cible si la propriété de l'objet cible est une propriété de + donnée qui n'est pas accessible en écriture et qui n'est pas + configurable. + </p> + <p> + Il est impossible de modifier la valeur d'une propriété si la + propriété correspondante de l'objet cible est une propriété + d'accesseur non-configurable dont l'attribut [[Set]] vaut + <code>undefined</code>. + </p> + <p> + En mode strict, si le gestionnaire pour <code>set</code> renvoie + <code>false</code>, cela provoquera une exception + {{jsxref("TypeError")}}. + </p> + </td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/deleteProperty", "handler.deleteProperty()")}} + </td> + <td> + <p> + Suppression d'une propriété : <code>delete proxy[toto]</code> et + <code>delete proxy.toto</code + ><br /><br />{{jsxref("Reflect.deleteProperty()")}} + </p> + </td> + <td> + Une propriété ne peut pas être supprimée si elle existe comme une + propriété propre non-configurable de l'objet cible. + </td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/enumerate", "handler.enumerate()")}} + </td> + <td> + <p> + Lister les propriétés avec <code>for...in</code> : + <code>for (var nom in proxy) {...}</code + ><br /><br />{{jsxref("Reflect.enumerate()")}} + </p> + </td> + <td>La méthode <code>enumerate</code> doit renvoyer un objet.</td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/ownKeys", "handler.ownKeys()")}} + </td> + <td> + <p> + {{jsxref("Object.getOwnPropertyNames()")}}<br />{{jsxref("Object.getOwnPropertySymbols()")}}<br />{{jsxref("Object.keys()")}}<br />{{jsxref("Reflect.ownKeys()")}} + </p> + </td> + <td> + <p> + Le résultat de <code>ownKeys</code> est une liste.<br /><br />Le type + de chaque élément de la liste est soit une + {{jsxref("String")}} soit un {{jsxref("Symbol")}}.<br /><br />La + liste résultatnte doit contenir les clés de toutes les propriétés + non-configurables de l'objet cible.<br /><br />Si l'objet cible n'est + pas extensible, la liste résultante doit contenir toutes les clés des + propriétés propres de l'objet cibles et aucune autre valeur. + </p> + </td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/apply", "handler.apply()")}} + </td> + <td> + <p> + <code>proxy(..args)</code + ><br /><br />{{jsxref("Function.prototype.apply()")}} and + {{jsxref("Function.prototype.call()")}}<br /><br />{{jsxref("Reflect.apply()")}} + </p> + </td> + <td> + Il n'y a pas d'invariant pour la méthode <code>handler.apply</code>. + </td> + </tr> + <tr> + <td> + {{jsxref("Objets_globaux/Proxy/handler/construct", "handler.construct()")}} + </td> + <td> + <p> + <code>new proxy(...args)</code + ><br />{{jsxref("Reflect.construct()")}} + </p> + </td> + <td>Le résultat doit être un <code>Objet</code>.</td> + </tr> + </tbody> </table> -<h2 id="Proxies_révocables">Proxies révocables</h2> +## Proxies révocables -<p>La méthode {{jsxref("Proxy.revocable()")}} est utilisée pour créer un objet <code>Proxy</code> qui puisse être révoqué. Cela signifie que que le proxy pourra être révoqué avec la fonction <code>revoke</code> et arrêtera le proxy. Après cet arrêt, toute opération sur le proxy entraînera une exception {{jsxref("TypeError")}}.</p> +La méthode {{jsxref("Proxy.revocable()")}} est utilisée pour créer un objet `Proxy` qui puisse être révoqué. Cela signifie que que le proxy pourra être révoqué avec la fonction `revoke` et arrêtera le proxy. Après cet arrêt, toute opération sur le proxy entraînera une exception {{jsxref("TypeError")}}. -<pre class="brush: js">var revocable = Proxy.revocable({}, { +```js +var revocable = Proxy.revocable({}, { get: function(cible, nom) { return "[[" + nom + "]]"; } @@ -263,17 +375,19 @@ revocable.revoke(); console.log(proxy.toto); // déclenche une TypeError proxy.toto = 1; // une TypeError encore delete proxy.toto; // toujours une TypeError -typeof proxy // "object", typeof ne déclenche aucune trappe</pre> +typeof proxy // "object", typeof ne déclenche aucune trappe +``` -<h2 id="Réflexion">Réflexion</h2> +## Réflexion -<p>{{jsxref("Reflect")}} est un objet natif qui fournit des méthodes pour les opérations JavaScript qui peuvent être interceptées. Ces méthodes sont les mêmes que celles gérées par les {{jsxref("Objets_globaux/Proxy/handler","gestionnaires de proxy","","true")}}. <code>Reflect</code> n'est pas un constructeur et ne peut pas être utilisé comme une fonction !</p> +{{jsxref("Reflect")}} est un objet natif qui fournit des méthodes pour les opérations JavaScript qui peuvent être interceptées. Ces méthodes sont les mêmes que celles gérées par les {{jsxref("Objets_globaux/Proxy/handler","gestionnaires de proxy","","true")}}. `Reflect` n'est pas un constructeur et ne peut pas être utilisé comme une fonction ! -<p><code>Reflect</code> aide à transférer les opérations par défaut depuis le gestionnaire vers la cible.</p> +`Reflect` aide à transférer les opérations par défaut depuis le gestionnaire vers la cible. -<p>Par exemple, avec {{jsxref("Reflect.has()")}}, on obtient le comportement de l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in"><code>in</code></a> sous forme d'une fonction :</p> +Par exemple, avec {{jsxref("Reflect.has()")}}, on obtient le comportement de l'opérateur [`in`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in) sous forme d'une fonction : -<pre class="brush: js">Reflect.has(Object, "assign"); // true -</pre> +```js +Reflect.has(Object, "assign"); // true +``` -<p>{{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}}</p> +{{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}} diff --git a/files/fr/web/javascript/guide/modules/index.md b/files/fr/web/javascript/guide/modules/index.md index aab9361aa6..1411ef6c26 100644 --- a/files/fr/web/javascript/guide/modules/index.md +++ b/files/fr/web/javascript/guide/modules/index.md @@ -9,87 +9,76 @@ tags: - import translation_of: Web/JavaScript/Guide/Modules --- -<div>{{jsSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Métaprogrammation")}}</div> +{{jsSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Métaprogrammation")}} -<p>Ce guide aborde l'ensemble des notions vous permettant d'utiliser la syntaxe des modules en JavaScript.</p> +Ce guide aborde l'ensemble des notions vous permettant d'utiliser la syntaxe des modules en JavaScript. -<h2 id="Un_peu_de_contexte">Un peu de contexte</h2> +## Un peu de contexte -<p>Les programmes JavaScript ont commencé par être assez petits, réalisant des tâches isolées uniquement là où l'interactivité était nécessaire. Après plusieurs années, nous avons maintenant des applications complètes qui sont exécutées dans les navigateurs avec des codes complexes et volumineux. Des programmes JavaScript sont également exécutés dans d'autres contextes (<a href="/fr/docs/Glossaire/Node.js">Node.js</a> par exemple).</p> +Les programmes JavaScript ont commencé par être assez petits, réalisant des tâches isolées uniquement là où l'interactivité était nécessaire. Après plusieurs années, nous avons maintenant des applications complètes qui sont exécutées dans les navigateurs avec des codes complexes et volumineux. Des programmes JavaScript sont également exécutés dans d'autres contextes ([Node.js](/fr/docs/Glossaire/Node.js) par exemple). -<p>Il a donc été question de fournir un mécanisme pour diviser les programmes JavaScript en plusieurs modules qu'on pourrait importer les uns dans les autres. Cette fonctionnalité était présente dans Node.js depuis longtemps et plusieurs bibliothèques et <em>frameworks</em> JavaScript ont permis l'utilisation de modules (<a href="https://en.wikipedia.org/wiki/CommonJS">CommonJS</a>, <a href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md">AMD</a>, <a href="https://requirejs.org/">RequireJS</a> ou, plus récemment, <a href="https://webpack.github.io/">Webpack</a> et <a href="https://babeljs.io/">Babel</a>).</p> +Il a donc été question de fournir un mécanisme pour diviser les programmes JavaScript en plusieurs modules qu'on pourrait importer les uns dans les autres. Cette fonctionnalité était présente dans Node.js depuis longtemps et plusieurs bibliothèques et _frameworks_ JavaScript ont permis l'utilisation de modules ([CommonJS](https://en.wikipedia.org/wiki/CommonJS), [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md), [RequireJS](https://requirejs.org/) ou, plus récemment, [Webpack](https://webpack.github.io/) et [Babel](https://babeljs.io/)). -<p>Bonne nouvelle, les navigateurs ont également commencé à prendre en charge ces fonctionnalités nativement. C'est le sujet de ce guide.</p> +Bonne nouvelle, les navigateurs ont également commencé à prendre en charge ces fonctionnalités nativement. C'est le sujet de ce guide. -<p>Cette implémentation permettra aux navigateurs d'optimiser le chargement des modules, rendant le fonctionnement plus efficace qu'une bibliothèque tierce avec un traitement côté client des allers-retours sur le réseau.</p> +Cette implémentation permettra aux navigateurs d'optimiser le chargement des modules, rendant le fonctionnement plus efficace qu'une bibliothèque tierce avec un traitement côté client des allers-retours sur le réseau. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>L'utilisation des modules natifs JavaScript repose sur les instructions <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import">import</a></code> and <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/export">export</a></code> dont vous pouvez voir l'état de la compatibilité ici :</p> +L'utilisation des modules natifs JavaScript repose sur les instructions [`import`](/fr/docs/Web/JavaScript/Reference/Instructions/import) and [`export`](/fr/docs/Web/JavaScript/Reference/Instructions/export) dont vous pouvez voir l'état de la compatibilité ici : -<h3 id="import"><code>import</code></h3> +### `import` -<p>{{Compat("javascript.statements.import")}}</p> +{{Compat("javascript.statements.import")}} -<h3 id="export"><code>export</code></h3> +### `export` -<p>{{Compat("javascript.statements.export")}}</p> +{{Compat("javascript.statements.export")}} -<h2 id="Commençons_par_un_exemple">Commençons par un exemple</h2> +## Commençons par un exemple -<p>Pour illustrer le fonctionnement des modules, nous avons créé <a href="https://github.com/mdn/js-examples/tree/master/modules">un ensemble d'exemples disponibles sur GitHub</a>. Ces exemples illustrent un ensemble de modules pour créer un élément {{htmlelement("canvas")}} sur une page web puis dessiner (et afficher des informations) sur les différentes formes du canevas.</p> +Pour illustrer le fonctionnement des modules, nous avons créé [un ensemble d'exemples disponibles sur GitHub](https://github.com/mdn/js-examples/tree/master/modules). Ces exemples illustrent un ensemble de modules pour créer un élément {{htmlelement("canvas")}} sur une page web puis dessiner (et afficher des informations) sur les différentes formes du canevas. -<p>Ces opérations sont assez simples mais nous les avons choisies pour nous concentrer plutôt sur le fonctionnement des modules.</p> +Ces opérations sont assez simples mais nous les avons choisies pour nous concentrer plutôt sur le fonctionnement des modules. -<div class="note"> -<p><strong>Note :</strong> Si vous souhaitez télécharger les exemples et les exécuter en local, vous devrez utiliser un serveur web local.</p> -</div> +> **Note :** Si vous souhaitez télécharger les exemples et les exécuter en local, vous devrez utiliser un serveur web local. -<h2 id="Structure_de_lexemple">Structure de l'exemple</h2> +## Structure de l'exemple -<p>Dans notre premier exemple (cf. <a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>), nous avons l'arborescence de fichier suivante :</p> +Dans notre premier exemple (cf. [basic-modules](https://github.com/mdn/js-examples/tree/master/modules/basic-modules)), nous avons l'arborescence de fichier suivante : -<pre>index.html -main.mjs -modules/ - canvas.mjs - square.mjs</pre> + index.html + main.mjs + modules/ + canvas.mjs + square.mjs -<div class="note"> -<p><strong>Note :</strong> Tous les exemples de ce guide suivent la même structure.</p> -</div> +> **Note :** Tous les exemples de ce guide suivent la même structure. -<p>Le répertoire dédié aux modules contient deux modules :</p> +Le répertoire dédié aux modules contient deux modules : -<ul> - <li><code>canvas.mjs</code> — responsable de fonctions pour gérer le canevas +- `canvas.mjs` — responsable de fonctions pour gérer le canevas - <ul> - <li><code>create()</code> — crée un canevas avec les dimensions souhaitées (<code>width</code> / <code>height</code>) à l'intérieur d'un élément {{htmlelement("div")}} doté d'un identifiant et qui est ajouté à l'intérieur d'un élément indiqué. Cette fonction renvoie l'objet contenant le contexte du canevas et l'identifiant du conteneur.</li> - <li><code>createReportList()</code> — crée une liste non ordonnée à l'intérieur d'un élément indiqué et dans lequel on affiche des données. Cette fonction renvoie l'identifiant de la liste.</li> - </ul> - </li> - <li><code>square.mjs</code> : - <ul> - <li><code>name</code> — une constante qui est une chaîne de caractères : <code>"square"</code>.</li> - <li><code>draw()</code> — dessine un carré avec une taille/position/couleur données sur le canevas indiqué. Cette fonction renvoie un objet contenant la taille du carré, sa position et sa couleur.</li> - <li><code>reportArea()</code> — écrit la surface d'un carré dans une liste donnée en fonction de la longueur de son côté.</li> - <li><code>reportPerimeter()</code> — écrit le périmètre d'un carré dans une liste donnée en fonction de la longueur de son côté.</li> - </ul> - </li> -</ul> + - `create()` — crée un canevas avec les dimensions souhaitées (`width` / `height`) à l'intérieur d'un élément {{htmlelement("div")}} doté d'un identifiant et qui est ajouté à l'intérieur d'un élément indiqué. Cette fonction renvoie l'objet contenant le contexte du canevas et l'identifiant du conteneur. + - `createReportList()` — crée une liste non ordonnée à l'intérieur d'un élément indiqué et dans lequel on affiche des données. Cette fonction renvoie l'identifiant de la liste. -<div class="note"> -<p><strong>Note :</strong> Pour les modules JavaScript natifs, l'extension <code>.mjs</code> a son importance car elle permet d'importer des fichiers avec un type MIME <code>javascript/esm</code> (on pourra utiliser une autre extension qui fournira le type MIME <code>application/javascript</code>) afin d'éviter les erreurs liées à la vérification des types MIME. L'extension <code>.mjs</code> est notamment utile afin de distinguer plus clairement les scripts « classiques » des modules et pourra être exploitée par d'autres outils. Pour plus de détails, voir <a href="https://v8.dev/features/modules#mjs">cette note de Google</a>.</p> -</div> +- `square.mjs` : -<h2 id="Exporter_des_fonctionnalités">Exporter des fonctionnalités</h2> + - `name` — une constante qui est une chaîne de caractères : `"square"`. + - `draw()` — dessine un carré avec une taille/position/couleur données sur le canevas indiqué. Cette fonction renvoie un objet contenant la taille du carré, sa position et sa couleur. + - `reportArea()` — écrit la surface d'un carré dans une liste donnée en fonction de la longueur de son côté. + - `reportPerimeter()` — écrit le périmètre d'un carré dans une liste donnée en fonction de la longueur de son côté. -<p>Pour commencer et afin d'utiliser les fonctionnalités d'un module, on devra les exporter. Pour cela, on utilisera l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/export">export</a></code>.</p> +> **Note :** Pour les modules JavaScript natifs, l'extension `.mjs` a son importance car elle permet d'importer des fichiers avec un type MIME `javascript/esm` (on pourra utiliser une autre extension qui fournira le type MIME `application/javascript`) afin d'éviter les erreurs liées à la vérification des types MIME. L'extension `.mjs` est notamment utile afin de distinguer plus clairement les scripts « classiques » des modules et pourra être exploitée par d'autres outils. Pour plus de détails, voir [cette note de Google](https://v8.dev/features/modules#mjs). -<p>La méthode la plus simple consiste à placer cette instruction devant chaque valeur qu'on souhaite exporter, par exemple :</p> +## Exporter des fonctionnalités -<pre class="brush: js">export const name = 'square'; +Pour commencer et afin d'utiliser les fonctionnalités d'un module, on devra les exporter. Pour cela, on utilisera l'instruction [`export`](/fr/docs/Web/JavaScript/Reference/Instructions/export). + +La méthode la plus simple consiste à placer cette instruction devant chaque valeur qu'on souhaite exporter, par exemple : + +```js +export const name = 'square'; export function draw(ctx, length, x, y, color) { ctx.fillStyle = color; @@ -101,148 +90,165 @@ export function draw(ctx, length, x, y, color) { y: y, color: color }; -}</pre> +} +``` -<p>Il est possible d'exporter des fonctions, des variables (qu'elles soient définies avec <code>var</code>, <code>let</code> ou <code>const</code>) et aussi des classes (que nous verrons par la suite). Les valeurs exportées doivent être présentes au plus haut niveau du script, il n'est pas possible d'utiliser <code>export</code> dans une fonction.</p> +Il est possible d'exporter des fonctions, des variables (qu'elles soient définies avec `var`, `let` ou `const`) et aussi des classes (que nous verrons par la suite). Les valeurs exportées doivent être présentes au plus haut niveau du script, il n'est pas possible d'utiliser `export` dans une fonction. -<p>Une méthode plus concise consiste à exporter l'ensemble des valeurs grâce à une seule instruction située à la fin du fichier : les valeurs sont séparées par des virgules et la liste est délimitée entre accolades :</p> +Une méthode plus concise consiste à exporter l'ensemble des valeurs grâce à une seule instruction située à la fin du fichier : les valeurs sont séparées par des virgules et la liste est délimitée entre accolades : -<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre> +```js +export { name, draw, reportArea, reportPerimeter }; +``` -<h2 id="Importer_des_fonctionnalités">Importer des fonctionnalités</h2> +## Importer des fonctionnalités -<p>Lorsque des fonctionnalités sont exportées par un premier module, on peut les importer dans un script afin de les utiliser. Voici la méthode la plus simple pour ce faire :</p> +Lorsque des fonctionnalités sont exportées par un premier module, on peut les importer dans un script afin de les utiliser. Voici la méthode la plus simple pour ce faire : -<pre class="brush: js">import { name, draw, reportArea, reportPerimeter } from './modules/square.mjs';</pre> +```js +import { name, draw, reportArea, reportPerimeter } from './modules/square.mjs'; +``` -<p>On utilise ici l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import">import</a></code>, suivi d'une liste d'identifiants séparées par des virgules et délimitée par des accolades, suivie du mot-clé <code>from</code> puis du chemin vers le fichier du module. Le chemin est relatif à la racine du site. Dans notre cas, pour <code>basic-module</code>, on écrira <code>/js-examples/modules/basic-modules</code>.</p> +On utilise ici l'instruction [`import`](/fr/docs/Web/JavaScript/Reference/Instructions/import), suivi d'une liste d'identifiants séparées par des virgules et délimitée par des accolades, suivie du mot-clé `from` puis du chemin vers le fichier du module. Le chemin est relatif à la racine du site. Dans notre cas, pour `basic-module`, on écrira `/js-examples/modules/basic-modules`. -<p>Ici, nous avons écrit le chemin d'une façon légèrement différente : on utilise le point (<code>.</code>) afin d'indiquer « l'emplacement courant », suivi du chemin vers le fichier. Cela permet d'éviter d'avoir à écrire l'intégralité du chemin à chaque fois, c'est aussi plus court et cela permet de déplacer le script et le modules sans avoir à modifier les scripts.</p> +Ici, nous avons écrit le chemin d'une façon légèrement différente : on utilise le point (`.`) afin d'indiquer « l'emplacement courant », suivi du chemin vers le fichier. Cela permet d'éviter d'avoir à écrire l'intégralité du chemin à chaque fois, c'est aussi plus court et cela permet de déplacer le script et le modules sans avoir à modifier les scripts. -<p>Ainsi :</p> +Ainsi : -<pre>/js-examples/modules/basic-modules/modules/square.mjs</pre> + /js-examples/modules/basic-modules/modules/square.mjs -<p>devient :</p> +devient : -<pre>./modules/square.mjs</pre> + ./modules/square.mjs -<p>Vous pouvez voir ces lignes dans <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.mjs</a></code>.</p> +Vous pouvez voir ces lignes dans [`main.mjs`](https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js). -<div class="note"> -<p><strong>Note :</strong> Pour certains systèmes de module, on peut omettre l'extension de fichier et le point (c'est-à-dire qu'on peut écrire <code>'/modules/square'</code>). Cela ne fonctionne pas pour les modules JavaScript !</p> -</div> +> **Note :** Pour certains systèmes de module, on peut omettre l'extension de fichier et le point (c'est-à-dire qu'on peut écrire `'/modules/square'`). Cela ne fonctionne pas pour les modules JavaScript ! -<p>Une fois les fonctionnalités importées dans le script, vous pouvez utiliser les valeurs dans votre script. Dans <code>main.mjs</code>, après les lignes d'import, on trouvera :</p> +Une fois les fonctionnalités importées dans le script, vous pouvez utiliser les valeurs dans votre script. Dans `main.mjs`, après les lignes d'import, on trouvera : -<pre class="brush: js">let myCanvas = create('myCanvas', document.body, 480, 320); +```js +let myCanvas = create('myCanvas', document.body, 480, 320); let reportList = createReportList(myCanvas.id); let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue'); reportArea(square1.length, reportList); reportPerimeter(square1.length, reportList); -</pre> +``` -<h2 id="Charger_le_module_via_le_document_HTML">Charger le module via le document HTML</h2> +## Charger le module via le document HTML -<p>Il faut ensuite pouvoir charger le script <code>main.mjs</code> sur la page HTML. Pour cela, nous allons voir qu'il y a quelques différences avec le chargement d'un script « classique ».</p> +Il faut ensuite pouvoir charger le script `main.mjs` sur la page HTML. Pour cela, nous allons voir qu'il y a quelques différences avec le chargement d'un script « classique ». -<p>Tout d'abord, il est nécessaire d'indiquer <code>type="module"</code> dans l'élément {{htmlelement("script")}} afin d'indiquer qu'on charge des modules :</p> +Tout d'abord, il est nécessaire d'indiquer `type="module"` dans l'élément {{htmlelement("script")}} afin d'indiquer qu'on charge des modules : -<pre class="brush: js"><script type="module" src="main.mjs"></script></pre> +```js +<script type="module" src="main.mjs"></script> +``` -<p>Le script qu'on importe ici agit comme le module de plus haut niveau. Si on oublie ce type, Firefox déclenchera une erreur "<em>SyntaxError: import declarations may only appear at top level of a module</em>".</p> +Le script qu'on importe ici agit comme le module de plus haut niveau. Si on oublie ce type, Firefox déclenchera une erreur "_SyntaxError: import declarations may only appear at top level of a module_". -<p>Les instructions <code>import</code> et <code>export</code> ne peuvent être utilisées qu'à l'intérieur de modules et pas à l'intérieur de scripts « classiques ».</p> +Les instructions `import` et `export` ne peuvent être utilisées qu'à l'intérieur de modules et pas à l'intérieur de scripts « classiques ». -<div class="note"> -<p><strong>Note :</strong> Il est aussi possible d'importer des modules dans des scripts qui sont déclarés en incise si on indique bien <code>type="module"</code>. On pourra donc écrire <code><script type="module"> //code du script utilisant les modules ici </script></code>.</p> -</div> +> **Note :** Il est aussi possible d'importer des modules dans des scripts qui sont déclarés en incise si on indique bien `type="module"`. On pourra donc écrire `<script type="module"> //code du script utilisant les modules ici </script>`. -<h2 id="Différences_entre_les_modules_et_les_scripts_«_classiques_»">Différences entre les modules et les scripts « classiques »</h2> +## Différences entre les modules et les scripts « classiques » -<ul> - <li>Attention aux tests sur un environnement local : si vous chargez le fichier HTML directement depuis le système de fichier dans le navigateur (en double-cliquant dessus par exemple, ce qui donnera une URL <code>file://</code>), vous rencontrerez des erreurs CORS pour des raisons de sécurité. Il faut donc un serveur local afin de pouvoir tester.</li> - <li>On pourra avoir un comportement différent entre un même script utilisé comme un module et un script utilisé de façon « classique ». En effet, les modules utilisent automatiquement <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">le mode strict</a>.</li> - <li>Il n'est pas nécessaire d'utiliser l'attribut <code>defer</code> (voir <a href="/fr/docs/Web/HTML/Element/script#Attributs">les attributs de <code><script></code></a>) lors du chargement d'un module, ceux-ci sont automatiquement chargés à la demande.</li> - <li>Enfin, les fonctionnalités importées ne sont disponibles qu'au sein de la portée du script qui les utilise ! Les valeurs importées ne sont manipulables que depuis le script, elles ne sont pas rattachées à la portée globale. On ne pourra par exemple pas y accéder depuis la console JavaScript. Bien que les erreurs soient toujours indiquées dans les outils de développement, certaines techniques de débogage ne seront pas disponibles.</li> -</ul> +- Attention aux tests sur un environnement local : si vous chargez le fichier HTML directement depuis le système de fichier dans le navigateur (en double-cliquant dessus par exemple, ce qui donnera une URL `file://`), vous rencontrerez des erreurs CORS pour des raisons de sécurité. Il faut donc un serveur local afin de pouvoir tester. +- On pourra avoir un comportement différent entre un même script utilisé comme un module et un script utilisé de façon « classique ». En effet, les modules utilisent automatiquement [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode). +- Il n'est pas nécessaire d'utiliser l'attribut `defer` (voir [les attributs de `<script>`](/fr/docs/Web/HTML/Element/script#Attributs)) lors du chargement d'un module, ceux-ci sont automatiquement chargés à la demande. +- Enfin, les fonctionnalités importées ne sont disponibles qu'au sein de la portée du script qui les utilise ! Les valeurs importées ne sont manipulables que depuis le script, elles ne sont pas rattachées à la portée globale. On ne pourra par exemple pas y accéder depuis la console JavaScript. Bien que les erreurs soient toujours indiquées dans les outils de développement, certaines techniques de débogage ne seront pas disponibles. -<h2 id="Exports_par_défaut_et_exports_nommés">Exports par défaut et exports nommés</h2> +## Exports par défaut et exports nommés -<p>Jusqu'à présent, nous avons utilisé des <strong>exports nommés</strong> — chaque valeur est exportée avec un nom et c'est ce nom qui est également utilisé lorsqu'on réalise l'import.</p> +Jusqu'à présent, nous avons utilisé des **exports nommés** — chaque valeur est exportée avec un nom et c'est ce nom qui est également utilisé lorsqu'on réalise l'import. -<p>Il existe également un <strong>export par défaut</strong> — conçu pour simplifier l'export d'une fonction par module et pour faciliter l'interopérabilité avec les systèmes de module CommonJS et AMD (pour plus d'informations, voir <a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">ES6 en détails : les modules</a>).</p> +Il existe également un **export par défaut** — conçu pour simplifier l'export d'une fonction par module et pour faciliter l'interopérabilité avec les systèmes de module CommonJS et AMD (pour plus d'informations, voir [ES6 en détails : les modules](https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules)). -<p>Prenons un exemple pour comprendre le fonctionnement des exports par défaut. Dans <code>square.mjs</code>, on a une fonction intitulée <code>randomSquare()</code> qui crée un carré avec une taille/couleur/position aléatoires. On souhaite exporter cette fonction par défaut et on écrit donc ceci à la fin du fichier :</p> +Prenons un exemple pour comprendre le fonctionnement des exports par défaut. Dans `square.mjs`, on a une fonction intitulée `randomSquare()` qui crée un carré avec une taille/couleur/position aléatoires. On souhaite exporter cette fonction par défaut et on écrit donc ceci à la fin du fichier : -<pre class="brush: js">export default randomSquare;</pre> +```js +export default randomSquare; +``` -<p>On notera ici l'absence d'accolades.</p> +On notera ici l'absence d'accolades. -<p>On aurait également pu ajouter <code>export default</code> devant le mot-clé <code>function</code> et la définir comme fonction anonyme :</p> +On aurait également pu ajouter `export default` devant le mot-clé `function` et la définir comme fonction anonyme : -<pre class="brush: js">export default function(ctx) { +```js +export default function(ctx) { ... -}</pre> +} +``` -<p>Dans le fichier <code>main.mjs</code>, on importe la fonction par défaut avec cette ligne</p> +Dans le fichier `main.mjs`, on importe la fonction par défaut avec cette ligne -<pre class="brush: js">import randomSquare from './modules/square.mjs';</pre> +```js +import randomSquare from './modules/square.mjs'; +``` -<p>On voit ici aussi l'absence d'accolade car il n'y a qu'un seul export par défaut possible par module (et ici, on sait qu'il s'agit de <code>randomSquare</code>). La ligne ci-avant est en fait une notation raccourcie équivalente à :</p> +On voit ici aussi l'absence d'accolade car il n'y a qu'un seul export par défaut possible par module (et ici, on sait qu'il s'agit de `randomSquare`). La ligne ci-avant est en fait une notation raccourcie équivalente à : -<pre class="brush: js">import {default as randomSquare} from './modules/square.mjs';</pre> +```js +import {default as randomSquare} from './modules/square.mjs'; +``` -<div class="note"> -<p><strong>Note :</strong> Pour en savoir plus sur le renommage des objets exportés, voir ci-après {{anch("Renommage des imports et des exports")}}.</p> -</div> +> **Note :** Pour en savoir plus sur le renommage des objets exportés, voir ci-après {{anch("Renommage des imports et des exports")}}. -<h2 id="Gestion_des_conflits_de_nommage">Gestion des conflits de nommage</h2> +## Gestion des conflits de nommage -<p>Jusqu'à présent, notre exemple fonctionne. Mais que se passerait-il si nous ajoutions un module permettant de dessiner une autre forme comme un cercle ou un triangle ? Ces formes disposeraient sans doute également de fonctions telles que <code>draw()</code>, <code>reportArea()</code>, etc. Si on essaie d'importer ces fonctions avec les mêmes noms dans le module de plus haut niveau, nous allons avoir des conflits et des erreurs.</p> +Jusqu'à présent, notre exemple fonctionne. Mais que se passerait-il si nous ajoutions un module permettant de dessiner une autre forme comme un cercle ou un triangle ? Ces formes disposeraient sans doute également de fonctions telles que `draw()`, `reportArea()`, etc. Si on essaie d'importer ces fonctions avec les mêmes noms dans le module de plus haut niveau, nous allons avoir des conflits et des erreurs. -<p>Heureusement, il existe différentes façons de résoudre ce problème.</p> +Heureusement, il existe différentes façons de résoudre ce problème. -<h3 id="Renommage_des_imports_et_des_exports">Renommage des imports et des exports</h3> +### Renommage des imports et des exports -<p>Entre les accolades utilisées pour les instructions <code>import</code> et <code>export</code>, on peut utiliser le mot-clé <code>as</code> avec un autre nom afin de modifier le nom par lequel on souhaite identifier la fonctionnalité.</p> +Entre les accolades utilisées pour les instructions `import` et `export`, on peut utiliser le mot-clé `as` avec un autre nom afin de modifier le nom par lequel on souhaite identifier la fonctionnalité. -<p>Ainsi, les deux fragments qui suivent permettraient d'obtenir le même résultat de façons différentes :</p> +Ainsi, les deux fragments qui suivent permettraient d'obtenir le même résultat de façons différentes : -<pre class="brush: js">// dans module.mjs +```js +// dans module.mjs export { fonction1 as nouveauNomDeFonction, fonction2 as autreNouveauNomDeFonction }; // dans main.mjs -import { nouveauNomDeFonction, autreNouveauNomDeFonction } from './modules/module.mjs';</pre> +import { nouveauNomDeFonction, autreNouveauNomDeFonction } from './modules/module.mjs'; +``` -<pre class="brush: js">// dans module.mjs +```js +// dans module.mjs export { fonction1, fonction2 }; // dans main.mjs import { fonction1 as nouveauNomDeFonction, - fonction2 as autreNouveauNomDeFonction } from './modules/module.mjs';</pre> + fonction2 as autreNouveauNomDeFonction } from './modules/module.mjs'; +``` -<p>Prenons un exemple concret. Dans le répertoire <code><a href="https://github.com/mdn/js-examples/tree/master/modules/renaming">renaming</a></code>, vous verrez le même système de modules que précédemment auquel nous avons ajouté <code>circle.mjs</code> et <code>triangle.mjs</code> afin de dessiner et d'écrire des informations sur des cercles et des triangles.</p> +Prenons un exemple concret. Dans le répertoire [`renaming`](https://github.com/mdn/js-examples/tree/master/modules/renaming), vous verrez le même système de modules que précédemment auquel nous avons ajouté `circle.mjs` et `triangle.mjs` afin de dessiner et d'écrire des informations sur des cercles et des triangles. -<p>Dans chaque module, on exporte les fonctionnalités avec des noms identiques : l'instruction <code>export</code> utilisée est la même à chaque fin de fichier :</p> +Dans chaque module, on exporte les fonctionnalités avec des noms identiques : l'instruction `export` utilisée est la même à chaque fin de fichier : -<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre> +```js +export { name, draw, reportArea, reportPerimeter }; +``` -<p>Lorsqu'on importe les valeurs dans <code>main.mjs</code>, si on essaie d'utiliser</p> +Lorsqu'on importe les valeurs dans `main.mjs`, si on essaie d'utiliser -<pre class="brush: js">import { name, draw, reportArea, reportPerimeter } from './modules/square.mjs'; +```js +import { name, draw, reportArea, reportPerimeter } from './modules/square.mjs'; import { name, draw, reportArea, reportPerimeter } from './modules/circle.mjs'; -import { name, draw, reportArea, reportPerimeter } from './modules/triangle.mjs';</pre> +import { name, draw, reportArea, reportPerimeter } from './modules/triangle.mjs'; +``` -<p>Le navigateur déclenchera une erreur telle que "<em>SyntaxError: redeclaration of import name</em>" (Firefox).</p> +Le navigateur déclenchera une erreur telle que "_SyntaxError: redeclaration of import name_" (Firefox). -<p>Pour éviter ce problème, on renomme les imports afin qu'ils soient uniques :</p> +Pour éviter ce problème, on renomme les imports afin qu'ils soient uniques : -<pre class="brush: js">import { name as squareName, +```js +import { name as squareName, draw as drawSquare, reportArea as reportSquareArea, reportPerimeter as reportSquarePerimeter } from './modules/square.mjs'; @@ -255,60 +261,76 @@ import { name as circleName, import { name as triangleName, draw as drawTriangle, reportArea as reportTriangleArea, - reportPerimeter as reportTrianglePerimeter } from './modules/triangle.mjs';</pre> + reportPerimeter as reportTrianglePerimeter } from './modules/triangle.mjs'; +``` -<p>On aurait pu également résoudre le problème dans les fichiers de chaque module.</p> +On aurait pu également résoudre le problème dans les fichiers de chaque module. -<pre class="brush: js">// dans square.mjs +```js +// dans square.mjs export { name as squareName, draw as drawSquare, reportArea as reportSquareArea, - reportPerimeter as reportSquarePerimeter };</pre> + reportPerimeter as reportSquarePerimeter }; +``` -<pre class="brush: js">// dans main.mjs -import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.mjs';</pre> +```js +// dans main.mjs +import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.mjs'; +``` -<p>Les deux approches fonctionnent. C'est à vous de choisir le style. Toutefois, il est souvent plus pratique d'effectuer le renommage à l'import, notamment lorsqu'on importe des fonctionnalités de modules tiers sur lesquels on n'a pas le contrôle.</p> +Les deux approches fonctionnent. C'est à vous de choisir le style. Toutefois, il est souvent plus pratique d'effectuer le renommage à l'import, notamment lorsqu'on importe des fonctionnalités de modules tiers sur lesquels on n'a pas le contrôle. -<h3 id="Créer_un_objet_module">Créer un objet module</h3> +### Créer un objet module -<p>La méthode précédente fonctionne mais reste « brouillonne ». Pour faire mieux, on peut importer l'ensemble des fonctionnalités de chaque module dans un objet, de la façon suivante :</p> +La méthode précédente fonctionne mais reste « brouillonne ». Pour faire mieux, on peut importer l'ensemble des fonctionnalités de chaque module dans un objet, de la façon suivante : -<pre class="brush: js">import * as Module from './modules/module.mjs';</pre> +```js +import * as Module from './modules/module.mjs'; +``` -<p>Cela récupère tous les exports disponibles depuis <code>module.mjs</code> et les transforme en propriétés et méthodes rattachées à l'objet <code>Module</code> qui fournit alors un espace de noms (<em>namespace</em>) :</p> +Cela récupère tous les exports disponibles depuis `module.mjs` et les transforme en propriétés et méthodes rattachées à l'objet `Module` qui fournit alors un espace de noms (_namespace_) : -<pre class="brush: js">Module.function1() +```js +Module.function1() Module.function2() -etc.</pre> +etc. +``` -<p>Là encore, prenons un exemple concret avec le répertoire <a href="https://github.com/mdn/js-examples/tree/master/modules/module-objects">module-objects</a>. Il s'agit du même exemple que précédemment mais qui a été réécrit afin de tirer parti de cette syntaxe. Dans les modules, les exports sont tous écrits ainsi :</p> +Là encore, prenons un exemple concret avec le répertoire [module-objects](https://github.com/mdn/js-examples/tree/master/modules/module-objects). Il s'agit du même exemple que précédemment mais qui a été réécrit afin de tirer parti de cette syntaxe. Dans les modules, les exports sont tous écrits ainsi : -<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre> +```js +export { name, draw, reportArea, reportPerimeter }; +``` -<p>En revanche, pour les imports, on les récupère ainsi :</p> +En revanche, pour les imports, on les récupère ainsi : -<pre class="brush: js">import * as Canvas from './modules/canvas.mjs'; +```js +import * as Canvas from './modules/canvas.mjs'; import * as Square from './modules/square.mjs'; import * as Circle from './modules/circle.mjs'; -import * as Triangle from './modules/triangle.mjs';</pre> +import * as Triangle from './modules/triangle.mjs'; +``` -<p>Dans chaque cas, on peut accéder aux imports comme propriétés des objets ainsi créés :</p> +Dans chaque cas, on peut accéder aux imports comme propriétés des objets ainsi créés : -<pre class="brush: js">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue'); +```js +let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue'); Square.reportArea(square1.length, reportList); -Square.reportPerimeter(square1.length, reportList);</pre> +Square.reportPerimeter(square1.length, reportList); +``` -<p>On obtient alors un code plus lisible.</p> +On obtient alors un code plus lisible. -<h2 id="Classes_et_modules">Classes et modules</h2> +## Classes et modules -<p>Comme mentionné avant, il est possible d'importer et d'exporter des classes. Cette méthode peut aussi être utilisée afin d'éviter les conflits de nommage. Elle s'avère notamment utile lorsque vous utilisez déjà des classes pour construire vos objets (cela permet de garder une certaine cohérence dans le style).</p> +Comme mentionné avant, il est possible d'importer et d'exporter des classes. Cette méthode peut aussi être utilisée afin d'éviter les conflits de nommage. Elle s'avère notamment utile lorsque vous utilisez déjà des classes pour construire vos objets (cela permet de garder une certaine cohérence dans le style). -<p>Pour voir le résultat obtenu, vous pouvez consulter le répertoire <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a> du dépôt où l'ensemble a été réécrit pour tirer parti des classes ECMAScript. Ainsi, <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.mjs</a></code> contient désormais l'ensemble des fonctionnalités via une classe :</p> +Pour voir le résultat obtenu, vous pouvez consulter le répertoire [classes](https://github.com/mdn/js-examples/tree/master/modules/classes) du dépôt où l'ensemble a été réécrit pour tirer parti des classes ECMAScript. Ainsi, [`square.mjs`](https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js) contient désormais l'ensemble des fonctionnalités via une classe : -<pre class="brush: js">class Square { +```js +class Square { constructor(ctx, listId, length, x, y, color) { ... } @@ -318,115 +340,132 @@ Square.reportPerimeter(square1.length, reportList);</pre> } ... -}</pre> +} +``` -<p>Il suffit d'exporter cette classe :</p> +Il suffit d'exporter cette classe : -<pre class="brush: js">export { Square };</pre> +```js +export { Square }; +``` -<p>Puis de l'importer ainsi dans <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.mjs</a></code> :</p> +Puis de l'importer ainsi dans [`main.mjs`](https://github.com/mdn/js-examples/blob/master/modules/classes/main.js) : -<pre class="brush: js">import { Square } from './modules/square.mjs';</pre> +```js +import { Square } from './modules/square.mjs'; +``` -<p>Ensuite, on peut utiliser cette classe afin de dessiner le carré :</p> +Ensuite, on peut utiliser cette classe afin de dessiner le carré : -<pre class="brush: js">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); +```js +let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); square1.draw(); square1.reportArea(); -square1.reportPerimeter();</pre> +square1.reportPerimeter(); +``` -<h2 id="Agréger_des_modules">Agréger des modules</h2> +## Agréger des modules -<p>Il arrivera qu'on veuille agréger des modules entre eux. On peut avoir plusieurs niveaux de dépendances et vouloir simplifier les choses en combinant différents sous-modules en un seul module parent. Pour cela, on pourra utiliser la notation raccourcie suivante :</p> +Il arrivera qu'on veuille agréger des modules entre eux. On peut avoir plusieurs niveaux de dépendances et vouloir simplifier les choses en combinant différents sous-modules en un seul module parent. Pour cela, on pourra utiliser la notation raccourcie suivante : -<pre class="brush: js">export * from 'x.mjs' -export { name } from 'x.mjs'</pre> +```js +export * from 'x.mjs' +export { name } from 'x.mjs' +``` -<p>Pour voir cela en pratique, vous pouvez consulter le répertoire <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a>. Dans cet exemple (construit sur le précédent qui utilise les classes), on a un module supplémentaire intitulé <code>shapes.mjs</code> qui agrège les fonctionnalités fournies par <code>circle.mjs</code>, <code>square.mjs</code> et <code>triangle.mjs</code>. Les sous-modules ont également été déplacés dans un répertoire <code>shapes</code> situé dans un répertoire <code>modules</code>. L'arborescence utilisée est donc :</p> +Pour voir cela en pratique, vous pouvez consulter le répertoire [module-aggregation](https://github.com/mdn/js-examples/tree/master/modules/module-aggregation). Dans cet exemple (construit sur le précédent qui utilise les classes), on a un module supplémentaire intitulé `shapes.mjs` qui agrège les fonctionnalités fournies par `circle.mjs`, `square.mjs` et `triangle.mjs`. Les sous-modules ont également été déplacés dans un répertoire `shapes` situé dans un répertoire `modules`. L'arborescence utilisée est donc : -<pre>modules/ - canvas.mjs - shapes.mjs - shapes/ - circle.mjs - square.mjs - triangle.mjs</pre> + modules/ + canvas.mjs + shapes.mjs + shapes/ + circle.mjs + square.mjs + triangle.mjs -<p>Dans chaque sous-module, l'export aura la même forme :</p> +Dans chaque sous-module, l'export aura la même forme : -<pre class="brush: js">export { Square };</pre> +```js +export { Square }; +``` -<p>Pour l'agrégation au sein de <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.mjs</a></code>, on écrit les lignes suivantes :</p> +Pour l'agrégation au sein de [`shapes.mjs`](https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js), on écrit les lignes suivantes : -<pre class="brush: js">export { Square } from './shapes/square.mjs'; +```js +export { Square } from './shapes/square.mjs'; export { Triangle } from './shapes/triangle.mjs'; -export { Circle } from './shapes/circle.mjs';</pre> +export { Circle } from './shapes/circle.mjs'; +``` -<p>On récupère ainsi l'ensemble des exports de chaque module et on les rend disponibles via <code>shapes.mjs</code>.</p> +On récupère ainsi l'ensemble des exports de chaque module et on les rend disponibles via `shapes.mjs`. -<div class="note"> -<p><strong>Note :</strong> Cette notation ne permet que de rediriger les exports via le fichier. Les objets importés/exportés n'existent pas vraiment dans <code>shapes.mjs</code> et on ne peut donc pas écrire de code <em>utile</em> qui les manipule.</p> -</div> +> **Note :** Cette notation ne permet que de rediriger les exports via le fichier. Les objets importés/exportés n'existent pas vraiment dans `shapes.mjs` et on ne peut donc pas écrire de code _utile_ qui les manipule. -<p>Dans le fichier <code>main.mjs</code>, on pourra alors remplacer :</p> +Dans le fichier `main.mjs`, on pourra alors remplacer : -<pre class="brush: js">import { Square } from './modules/square.mjs'; +```js +import { Square } from './modules/square.mjs'; import { Circle } from './modules/circle.mjs'; -import { Triangle } from './modules/triangle.mjs';</pre> +import { Triangle } from './modules/triangle.mjs'; +``` -<p>par :</p> +par : -<pre class="brush: js">import { Square, Circle, Triangle } from './modules/shapes.mjs';</pre> +```js +import { Square, Circle, Triangle } from './modules/shapes.mjs'; +``` -<h2 id="Chargement_dynamique_de_modules">Chargement dynamique de modules</h2> +## Chargement dynamique de modules -<p>Cette nouvelle fonctionnalité permet aux navigateurs de charger les modules lorsqu'ils sont nécessaires plutôt que de tout précharger en avance de phase. Cette méthode offre de nombreux avantages quant aux performances. Voyons comment cela fonctionne.</p> +Cette nouvelle fonctionnalité permet aux navigateurs de charger les modules lorsqu'ils sont nécessaires plutôt que de tout précharger en avance de phase. Cette méthode offre de nombreux avantages quant aux performances. Voyons comment cela fonctionne. -<p>Pour utiliser cette fonctionnalité, on pourra utiliser <code>import()</code> comme une fonction et lui passer le chemin du module en argument. Cette fonction renverra <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">une promesse</a>, qui sera résolue en un module objet donnant accès aux exports.</p> +Pour utiliser cette fonctionnalité, on pourra utiliser `import()` comme une fonction et lui passer le chemin du module en argument. Cette fonction renverra [une promesse](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise), qui sera résolue en un module objet donnant accès aux exports. -<pre class="brush: js">import('./modules/monModule.mjs') - .then((module) => { +```js +import('./modules/monModule.mjs') + .then((module) => { // Faire qqc avec le module. - });</pre> + }); +``` -<p>Dans nos exemples, regardons le répertoire <a href="https://github.com/mdn/js-examples/tree/master/modules/dynamic-module-imports">dynamic-module-imports</a>, également basé sur les classes. Cette fois, on ne dessine rien au chargement de l'exemple mais on ajoute trois boutons — "Circle", "Square" et "Triangle" — qui, lorsqu'ils seront utilisés, chargeront dynamiquement les modules nécessaires et les utiliseront pour charger la forme associée.</p> +Dans nos exemples, regardons le répertoire [dynamic-module-imports](https://github.com/mdn/js-examples/tree/master/modules/dynamic-module-imports), également basé sur les classes. Cette fois, on ne dessine rien au chargement de l'exemple mais on ajoute trois boutons — "Circle", "Square" et "Triangle" — qui, lorsqu'ils seront utilisés, chargeront dynamiquement les modules nécessaires et les utiliseront pour charger la forme associée. -<p>Dans cet exemple, nous avons uniquement modifié <a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/index.html">index.html</a> et <a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/main.js">main.js</a> — les exports restent les mêmes.</p> +Dans cet exemple, nous avons uniquement modifié [index.html](https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/index.html) et [main.js](https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/main.js) — les exports restent les mêmes. -<p>Dans <code>main.js</code>, on récupère une référence à chaque bouton en utilisant <code><a href="/fr/docs/Web/API/Document/querySelector">document.querySelector()</a></code>. Par exemple :</p> +Dans `main.js`, on récupère une référence à chaque bouton en utilisant [`document.querySelector()`](/fr/docs/Web/API/Document/querySelector). Par exemple : -<pre class="brush: js">let squareBtn = document.querySelector('.square');</pre> +```js +let squareBtn = document.querySelector('.square'); +``` -<p>Ensuite, on attache un gestionnaire d'évènement à chaque bouton afin qu'on puisse appuyer dessus. Le module correspondant est alors chargé dynamiquement et utilisé pour dessiner la forme :</p> +Ensuite, on attache un gestionnaire d'évènement à chaque bouton afin qu'on puisse appuyer dessus. Le module correspondant est alors chargé dynamiquement et utilisé pour dessiner la forme : -<pre class="brush: js">squareBtn.addEventListener('click', () => { - import('./modules/square.mjs').then((Module) => { +```js +squareBtn.addEventListener('click', () => { + import('./modules/square.mjs').then((Module) => { let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); square1.draw(); square1.reportArea(); square1.reportPerimeter(); }) -});</pre> +}); +``` -<p>On voit ici que, parce que la promesse renvoie un objet module à la résolution, la classe est une propriété de cet objet et qu'il faut ajouter cet espace de nom devant le constructeur exporté pour l'utiliser. Autrement dit, avec cette méthode, on doit ajouter <code>Module.</code> devant <code>Square</code> (plutôt que d'utiliser uniquement <code>Square</code>).</p> +On voit ici que, parce que la promesse renvoie un objet module à la résolution, la classe est une propriété de cet objet et qu'il faut ajouter cet espace de nom devant le constructeur exporté pour l'utiliser. Autrement dit, avec cette méthode, on doit ajouter `Module.` devant `Square` (plutôt que d'utiliser uniquement `Square`). -<h2 id="Diagnostiquer_les_problèmes_avec_les_modules">Diagnostiquer les problèmes avec les modules</h2> +## Diagnostiquer les problèmes avec les modules -<p>Voici quelques notes pour aider à comprendre et à diagnostiquer les problèmes parfois rencontrés avec les modules. N'hésitez pas à ajouter vos conseils à cette liste si vous en avez.</p> +Voici quelques notes pour aider à comprendre et à diagnostiquer les problèmes parfois rencontrés avec les modules. N'hésitez pas à ajouter vos conseils à cette liste si vous en avez. -<ul> - <li>Comme indiqué ci-avant, les fichiers <code>.mjs</code> doivent être chargés avec le type MIME <code>javascript/esm</code> (ou avec un autre type MIME compatible JavaScript tel que <code>application/javascript</code>), sinon on aura une erreur lors de la vérification du type MIME.</li> - <li>Si on essaie de charger des fichiers HTML en local à l'aide d'une URL <code>file://</code>, on aura des erreurs CORS relatives à la sécurité. Pour tester les modules, on doit donc mettre en place un serveur (ou, par exemple, utiliser les pages GitHub).</li> - <li><code>.mjs</code> est une extension relativement récente et certains systèmes d'exploitation ne la reconnaîtront pas et/ou tenteront de la remplacer (ex. macOS pourra silencieusement ajouter un <code>.js</code> après le <code>.mjs</code>). Dans ce cas, afficher les extensions de tous les fichiers par défaut pourra permettre de vérifier.</li> -</ul> +- Comme indiqué ci-avant, les fichiers `.mjs` doivent être chargés avec le type MIME `javascript/esm` (ou avec un autre type MIME compatible JavaScript tel que `application/javascript`), sinon on aura une erreur lors de la vérification du type MIME. +- Si on essaie de charger des fichiers HTML en local à l'aide d'une URL `file://`, on aura des erreurs CORS relatives à la sécurité. Pour tester les modules, on doit donc mettre en place un serveur (ou, par exemple, utiliser les pages GitHub). +- `.mjs` est une extension relativement récente et certains systèmes d'exploitation ne la reconnaîtront pas et/ou tenteront de la remplacer (ex. macOS pourra silencieusement ajouter un `.js` après le `.mjs`). Dans ce cas, afficher les extensions de tous les fichiers par défaut pourra permettre de vérifier. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript">Une plongée illustrée dans les modules ECMAScript</a></li> - <li><a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">ES6 en détails : les modules</a></li> - <li><a href="https://developers.google.com/web/fundamentals/primers/modules#mjs">Utiliser les modules JavaScript sur le Web</a>, un article par Addy Osmani et Mathias Bynens (en anglais)</li> - <li>Livre de Axel Rauschmayer (en anglais) : <a href="http://exploringjs.com/es6/ch_modules.html">Exploring JS: Modules</a></li> -</ul> +- [Une plongée illustrée dans les modules ECMAScript](https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript) +- [ES6 en détails : les modules](https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules) +- [Utiliser les modules JavaScript sur le Web](https://developers.google.com/web/fundamentals/primers/modules#mjs), un article par Addy Osmani et Mathias Bynens (en anglais) +- Livre de Axel Rauschmayer (en anglais) : [Exploring JS: Modules](http://exploringjs.com/es6/ch_modules.html) -<p>{{Previous("Web/JavaScript/Guide/Métaprogrammation")}}</p> +{{Previous("Web/JavaScript/Guide/Métaprogrammation")}} diff --git a/files/fr/web/javascript/guide/numbers_and_dates/index.md b/files/fr/web/javascript/guide/numbers_and_dates/index.md index c80c7ce65e..33d7e90ae3 100644 --- a/files/fr/web/javascript/guide/numbers_and_dates/index.md +++ b/files/fr/web/javascript/guide/numbers_and_dates/index.md @@ -7,25 +7,26 @@ tags: translation_of: Web/JavaScript/Guide/Numbers_and_dates original_slug: Web/JavaScript/Guide/Nombres_et_dates --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}} -<p>Ce chapitre illustre le fonctionnement des nombres et des dates en JavaScript grâce aux concepts, objets et fonctions utilisables avec ce langage. Cela inclut notamment l'écriture de nombre selon différentes bases (décimale, binaire, hexadécimale) et l'utilisation de l'objet global {{jsxref("Math")}}.</p> +Ce chapitre illustre le fonctionnement des nombres et des dates en JavaScript grâce aux concepts, objets et fonctions utilisables avec ce langage. Cela inclut notamment l'écriture de nombre selon différentes bases (décimale, binaire, hexadécimale) et l'utilisation de l'objet global {{jsxref("Math")}}. -<h2 id="Nombres">Nombres</h2> +## Nombres -<p>Les nombres en JavaScript sont implémentés comme des <a href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">nombres sur 64 bits à précision double selon le format IEEE-754</a> qui est un standard pour la représentation des nombres flottants et qui permet d'avoir jusqu'à 16 chiffres significatifs. Le type numérique possède également trois valeurs spéciales symboliques : +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}} et {{jsxref("NaN")}} (pour désigner une valeur qui n'est pas un nombre).</p> +Les nombres en JavaScript sont implémentés comme des [nombres sur 64 bits à précision double selon le format IEEE-754](https://en.wikipedia.org/wiki/Double-precision_floating-point_format) qui est un standard pour la représentation des nombres flottants et qui permet d'avoir jusqu'à 16 chiffres significatifs. Le type numérique possède également trois valeurs spéciales symboliques : +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}} et {{jsxref("NaN")}} (pour désigner une valeur qui n'est pas un nombre). -<p>Le format IEEE-754 permet de représenter des valeurs entre ±2^−1022 et ±2^+1023, ce qui correspond à des valeurs entre ±10^−308 et ±10^+308 avec une précision sur 53 bits. Les nombres entiers compris sur l'intervalle ±2^53 − 1 peuvent être représentés exactement.</p> +Le format IEEE-754 permet de représenter des valeurs entre ±2^−1022 et ±2^+1023, ce qui correspond à des valeurs entre ±10^−308 et ±10^+308 avec une précision sur 53 bits. Les nombres entiers compris sur l'intervalle ±2^53 − 1 peuvent être représentés exactement. -<p>Le type {{jsxref("BigInt")}} est une addition récente à JavaScript qui permet de représenter de grands entiers. Toutefois, il n'est pas possible de mélanger les <code>BigInt</code> et les nombres ({{jsxref("Number")}}) dans les mêmes opérations et on ne peut pas utiliser l'objet {{jsxref("Math")}} avec les valeurs <code>BigInt</code>.</p> +Le type {{jsxref("BigInt")}} est une addition récente à JavaScript qui permet de représenter de grands entiers. Toutefois, il n'est pas possible de mélanger les `BigInt` et les nombres ({{jsxref("Number")}}) dans les mêmes opérations et on ne peut pas utiliser l'objet {{jsxref("Math")}} avec les valeurs `BigInt`. -<p>Voir également <a href="/fr/docs/Web/JavaScript/Structures_de_données">les types de données et structures JavaScript</a> pour l'articulation des types primitifs en JavaScript.</p> +Voir également [les types de données et structures JavaScript](/fr/docs/Web/JavaScript/Structures_de_données) pour l'articulation des types primitifs en JavaScript. -<p>Il est possible d'utiliser quatre types de littéraux numériques : décimal, binaire, octal et hexadécimal.</p> +Il est possible d'utiliser quatre types de littéraux numériques : décimal, binaire, octal et hexadécimal. -<h3 id="Les_nombres_décimaux">Les nombres décimaux</h3> +### Les nombres décimaux -<pre class="brush: js">1234567980; +```js +1234567980; 42; // Attention à l'utilisation des zéros @@ -35,310 +36,242 @@ original_slug: Web/JavaScript/Guide/Nombres_et_dates 0777; // en mode non-strict, analysé en base octale, // ce qui correspond // à 511 en base décimale -</pre> +``` -<p>On voit ici que les littéraux numériques qui commencent par un zéro (<code>0</code>) et contiennent un chiffre strictement inférieur à 8 après ce 0 sont analysés comme étant exprimés en base octale.</p> +On voit ici que les littéraux numériques qui commencent par un zéro (`0`) et contiennent un chiffre strictement inférieur à 8 après ce 0 sont analysés comme étant exprimés en base octale. -<h3 id="Les_nombres_binaires">Les nombres binaires</h3> +### Les nombres binaires -<p>Pour utiliser des nombres binaires, on utilise un littéral qui commence par un 0 suivi d'un b minuscule ou majuscule (<code>0b</code> ou <code>0B</code>). Si les chiffres qui suivent ce préfixe ne sont pas des 0 ou des 1, une exception {{jsxref("SyntaxError")}} sera levée.</p> +Pour utiliser des nombres binaires, on utilise un littéral qui commence par un 0 suivi d'un b minuscule ou majuscule (`0b` ou `0B`). Si les chiffres qui suivent ce préfixe ne sont pas des 0 ou des 1, une exception {{jsxref("SyntaxError")}} sera levée. -<pre class="brush: js">var FLT_BITSIGNE = 0b10000000000000000000000000000000; // 2147483648 +```js +var FLT_BITSIGNE = 0b10000000000000000000000000000000; // 2147483648 var FLT_EXPOSANT = 0b01111111100000000000000000000000; // 2139095040 var FLT_MANTISSE = 0B00000000011111111111111111111111; // 8388607 -</pre> +``` -<h3 id="Les_nombres_octaux">Les nombres octaux</h3> +### Les nombres octaux -<p>Pour utiliser des nombres en base octale, on utilisera un préfixe avec un <code>0</code>. Si les nombres qui suivent ce 0 ne sont pas compris entre 0 et 7 (au sens strict), le nombre sera interprété comme un nombre décimal.</p> +Pour utiliser des nombres en base octale, on utilisera un préfixe avec un `0`. Si les nombres qui suivent ce 0 ne sont pas compris entre 0 et 7 (au sens strict), le nombre sera interprété comme un nombre décimal. -<pre class="brush: js">var n = 0755; // 493 en base 10 +```js +var n = 0755; // 493 en base 10 var m = 0644; // 420 en base 10 -</pre> +``` -<p>En mode strict, ECMAScript 5 interdit cette syntaxe octale. Cette syntaxe ne fait pas partie d'ECMAScript 5 mais est supportée par la majorité des navigateurs. Avec ECMAScript 2015 (ES6), il est possible de représenter un nombre en notation octale grâce au préfixe "<code>0o</code>" :</p> +En mode strict, ECMAScript 5 interdit cette syntaxe octale. Cette syntaxe ne fait pas partie d'ECMAScript 5 mais est supportée par la majorité des navigateurs. Avec ECMAScript 2015 (ES6), il est possible de représenter un nombre en notation octale grâce au préfixe "`0o`" : -<pre class="brush: js">var a = 0o10; // Notation octale pour ES2015</pre> +```js +var a = 0o10; // Notation octale pour ES2015 +``` -<h3 id="Les_nombres_hexadécimaux">Les nombres hexadécimaux</h3> +### Les nombres hexadécimaux -<p>Pour utiliser des nombres exprimés en base hexadécimale, on utilisera un préfixe avec un zéro suivi d'un x majuscule ou minuscule (<code>0x</code> ou <code>0X</code>). Si les chiffres qui suivent ce préfixe ne sont pas 0123456789ABCDEF, cela provoquera une exception {{jsxref("SyntaxError")}}.</p> +Pour utiliser des nombres exprimés en base hexadécimale, on utilisera un préfixe avec un zéro suivi d'un x majuscule ou minuscule (`0x` ou `0X`). Si les chiffres qui suivent ce préfixe ne sont pas 0123456789ABCDEF, cela provoquera une exception {{jsxref("SyntaxError")}}. -<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 +```js +0xFFFFFFFFFFFFFFFFF // 295147905179352830000 0x123456789ABCDEF // 81985529216486900 0XA // 10 -</pre> +``` -<h3 id="Notation_scientifique">Notation scientifique</h3> +### Notation scientifique -<pre class="brush: js">1E3 // 100 +```js +1E3 // 100 2e6 // 2000000 0.1e2 // 10 -</pre> +``` -<h2 id="Lobjet_Number">L'objet <code>Number</code></h2> +## L'objet `Number` -<p>L'objet {{jsxref("Number")}} possède certaines propriétés représentant les constantes numériques telles que : la valeur maximale représentable en JavaScript, une valeur spéciale pour dire que la valeur numérique n'est pas un nombre et l'infini. Ces valeurs ne peuvent pas être modifiées, on pourra les utiliser de la façon suivante :</p> +L'objet {{jsxref("Number")}} possède certaines propriétés représentant les constantes numériques telles que : la valeur maximale représentable en JavaScript, une valeur spéciale pour dire que la valeur numérique n'est pas un nombre et l'infini. Ces valeurs ne peuvent pas être modifiées, on pourra les utiliser de la façon suivante : -<pre class="brush: js">var plusGrandNombre = Number.MAX_VALUE; +```js +var plusGrandNombre = Number.MAX_VALUE; var plusPetitNombre = Number.MIN_VALUE; var infini = Number.POSITIVE_INFINITY; var infiniNégatif = Number.NEGATIVE_INFINITY; var pasUnNombre = Number.NaN; -</pre> +``` -<p>On utilisera toujours ces valeurs directement avec l'objet natif <code>Number</code> (et non pas avec les propriétés d'une instance d'un objet <code>Number</code> qu'on aurait créé).</p> +On utilisera toujours ces valeurs directement avec l'objet natif `Number` (et non pas avec les propriétés d'une instance d'un objet `Number` qu'on aurait créé). -<p>Le tableau qui suit liste certaines des propriétés de <code>Number</code>.</p> +Le tableau qui suit liste certaines des propriétés de `Number`. <table class="standard-table"> - <caption>Propriétés de <code>Number</code></caption> - <tbody> - <tr> - <th scope="col">Propriété</th> - <th scope="col">Description</th> - </tr> - <tr> - <td>{{jsxref("Number.MAX_VALUE")}}</td> - <td>Le plus grand nombre qu'on peut représenter en JavaScript (<code>±1.7976931348623157e+308</code>).</td> - </tr> - <tr> - <td>{{jsxref("Number.MIN_VALUE")}}</td> - <td>Le plus petit nombre qu'on peut représenter en JavaScript (<code>±5e-324</code>).</td> - </tr> - <tr> - <td>{{jsxref("Number.NaN")}}</td> - <td>Une valeur spéciale signifiant que la valeur n'est pas un nombre.</td> - </tr> - <tr> - <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td> - <td>L'infini négatif, renvoyé lorsqu'on dépasse la valeur minimale.</td> - </tr> - <tr> - <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td> - <td>L'infini positif, renvoyé lorsqu'on dépasse la valeur maximale.</td> - </tr> - <tr> - <td>{{jsxref("Number.EPSILON")}}</td> - <td>La différence entre 1 et la première valeur supérieure à 1 qui puisse être représentée comme {{jsxref("Number")}}. (<code>2.220446049250313e-16</code>)</td> - </tr> - <tr> - <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td> - <td>Le plus petit entier qu'on puisse représenter en JavaScript. (−2^53 + 1 ou <code>−9007199254740991</code>)</td> - </tr> - <tr> - <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td> - <td> - <p>L'entier le plus grand qu'on puisse représenter en JavaScript (+2^53 − 1 ou <code>+9007199254740991</code>)</p> - </td> - </tr> - </tbody> + <caption> + Propriétés de + <code>Number</code> + </caption> + <tbody> + <tr> + <th scope="col">Propriété</th> + <th scope="col">Description</th> + </tr> + <tr> + <td>{{jsxref("Number.MAX_VALUE")}}</td> + <td> + Le plus grand nombre qu'on peut représenter en JavaScript + (<code>±1.7976931348623157e+308</code>). + </td> + </tr> + <tr> + <td>{{jsxref("Number.MIN_VALUE")}}</td> + <td> + Le plus petit nombre qu'on peut représenter en JavaScript + (<code>±5e-324</code>). + </td> + </tr> + <tr> + <td>{{jsxref("Number.NaN")}}</td> + <td>Une valeur spéciale signifiant que la valeur n'est pas un nombre.</td> + </tr> + <tr> + <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td> + <td>L'infini négatif, renvoyé lorsqu'on dépasse la valeur minimale.</td> + </tr> + <tr> + <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td> + <td>L'infini positif, renvoyé lorsqu'on dépasse la valeur maximale.</td> + </tr> + <tr> + <td>{{jsxref("Number.EPSILON")}}</td> + <td> + La différence entre 1 et la première valeur supérieure à 1 qui puisse + être représentée comme {{jsxref("Number")}}. + (<code>2.220446049250313e-16</code>) + </td> + </tr> + <tr> + <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td> + <td> + Le plus petit entier qu'on puisse représenter en JavaScript. (−2^53 + 1 + ou <code>−9007199254740991</code>) + </td> + </tr> + <tr> + <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td> + <td> + <p> + L'entier le plus grand qu'on puisse représenter en JavaScript (+2^53 − + 1 ou <code>+9007199254740991</code>) + </p> + </td> + </tr> + </tbody> </table> -<table class="standard-table"> - <caption>Méthodes de <code>Number</code></caption> - <tbody> - <tr> - <th>Méthode</th> - <th>Description</th> - </tr> - <tr> - <td>{{jsxref("Number.parseFloat()")}}</td> - <td>Analyse un argument qui est une chaîne de caractères et renvoie un nombre décimal. Cette méthode est équivalente à la fonction {{jsxref("parseFloat", "parseFloat()")}}.</td> - </tr> - <tr> - <td>{{jsxref("Number.parseInt()")}}</td> - <td>Analyse un argument qui est une chaîne de caractères et renvoie un entier exprimé dans une base donnée. Cette méthode est équivalente à la fonction {{jsxref("parseInt", "parseInt()")}}.</td> - </tr> - <tr> - <td>{{jsxref("Number.isFinite()")}}</td> - <td>Détermine si la valeur passée en argument est un nombre fini.</td> - </tr> - <tr> - <td>{{jsxref("Number.isInteger()")}}</td> - <td>Détermine si la valeur passée en argument est un nombre entier.</td> - </tr> - <tr> - <td>{{jsxref("Number.isNaN()")}}</td> - <td>Détermine si la valeur passée en argument est {{jsxref("NaN")}}. Cette version est plus robuste que la fonction globale {{jsxref("Objets_globaux/isNaN", "isNaN()")}}.</td> - </tr> - <tr> - <td>{{jsxref("Number.isSafeInteger()")}}</td> - <td>Détermine si la valeur fournie est un nombre qu'il est possible de représenter comme un entier sans perdre d'information.</td> - </tr> - </tbody> -</table> +| Méthode | Description | +| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{jsxref("Number.parseFloat()")}} | Analyse un argument qui est une chaîne de caractères et renvoie un nombre décimal. Cette méthode est équivalente à la fonction {{jsxref("parseFloat", "parseFloat()")}}. | +| {{jsxref("Number.parseInt()")}} | Analyse un argument qui est une chaîne de caractères et renvoie un entier exprimé dans une base donnée. Cette méthode est équivalente à la fonction {{jsxref("parseInt", "parseInt()")}}. | +| {{jsxref("Number.isFinite()")}} | Détermine si la valeur passée en argument est un nombre fini. | +| {{jsxref("Number.isInteger()")}} | Détermine si la valeur passée en argument est un nombre entier. | +| {{jsxref("Number.isNaN()")}} | Détermine si la valeur passée en argument est {{jsxref("NaN")}}. Cette version est plus robuste que la fonction globale {{jsxref("Objets_globaux/isNaN", "isNaN()")}}. | +| {{jsxref("Number.isSafeInteger()")}} | Détermine si la valeur fournie est un nombre qu'il est possible de représenter comme un entier sans perdre d'information. | -<p>Le prototype de <code>Number</code> fournit certaines méthodes pour exprimer les valeurs représentées par les objets <code>Number</code> dans différents formats. Le tableau suivant liste certaines de ces méthodes de <code>Number.prototype</code>.</p> +Le prototype de `Number` fournit certaines méthodes pour exprimer les valeurs représentées par les objets `Number` dans différents formats. Le tableau suivant liste certaines de ces méthodes de `Number.prototype`. -<table class="standard-table"> - <caption>Méthodes of <code>Number.prototype</code></caption> - <thead> - <tr> - <th scope="col">Méthode</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("Number.toExponential", "toExponential()")}}</td> - <td>Renvoie une chaîne de caractères représentant le nombre en notation exponentielle.</td> - </tr> - <tr> - <td>{{jsxref("Number.toFixed", "toFixed()")}}</td> - <td>Renvoie une chaîne de caractères représentant le nombre en notation à point fixe.</td> - </tr> - <tr> - <td>{{jsxref("Number.toPrecision", "toPrecision()")}}</td> - <td>Renvoie une chaîne de caractères représentant le nombre en notation à point fixe avec une précision donnée.</td> - </tr> - </tbody> -</table> +| Méthode | Description | +| ------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | +| {{jsxref("Number.toExponential", "toExponential()")}} | Renvoie une chaîne de caractères représentant le nombre en notation exponentielle. | +| {{jsxref("Number.toFixed", "toFixed()")}} | Renvoie une chaîne de caractères représentant le nombre en notation à point fixe. | +| {{jsxref("Number.toPrecision", "toPrecision()")}} | Renvoie une chaîne de caractères représentant le nombre en notation à point fixe avec une précision donnée. | -<h2 id="Lobjet_Math">L'objet <code>Math</code></h2> +## L'objet `Math` -<p>L'objet natif {{jsxref("Math")}} possède des propriétés et des méthodes statiques pour représenter des constantes et des fonctions mathématiques. Ainsi, la propriété <code>PI</code> de l'objet <code>Math</code> représente la valeur de la constante <math><semantics><mi>π</mi><annotation encoding="TeX">\pi</annotation></semantics></math> (3.141...), on peut l'utiliser dans les applications avec :</p> +L'objet natif {{jsxref("Math")}} possède des propriétés et des méthodes statiques pour représenter des constantes et des fonctions mathématiques. Ainsi, la propriété `PI` de l'objet `Math` représente la valeur de la constante <math><semantics><mi>π</mi><annotation encoding="TeX">\pi</annotation></semantics></math> (3.141...), on peut l'utiliser dans les applications avec : -<pre class="brush: js">Math.PI -</pre> +```js +Math.PI +``` -<p>De la même façon, les fonctions mathématiques usuelles sont des méthodes de <code>Math</code>. On retrouve par exemple les fonctions trigonométriques, logarithmiques et exponentielles ainsi que d'autres fonctions. Si on souhaite utiliser la fonction sinus, on pourra écrire :</p> +De la même façon, les fonctions mathématiques usuelles sont des méthodes de `Math`. On retrouve par exemple les fonctions trigonométriques, logarithmiques et exponentielles ainsi que d'autres fonctions. Si on souhaite utiliser la fonction sinus, on pourra écrire : -<pre class="brush: js">Math.sin(1.56) -</pre> +```js +Math.sin(1.56) +``` -<div class="note"> -<p><strong>Note :</strong> Les méthodes trigonométriques de <code>Math</code> prennent des arguments exprimés en radians.</p> -</div> +> **Note :** Les méthodes trigonométriques de `Math` prennent des arguments exprimés en radians. -<p>Le tableau suivant liste les méthodes de l'objet <code>Math</code>.</p> +Le tableau suivant liste les méthodes de l'objet `Math`. -<table class="standard-table"> - <caption>Méthodes de <code>Math</code></caption> - <tbody> - <tr> - <th scope="col">Méthode</th> - <th scope="col">Description</th> - </tr> - <tr> - <td>{{jsxref("Math.abs", "abs()")}}</td> - <td>Valeur absolue</td> - </tr> - <tr> - <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td> - <td>Fonctions trigonométriques standards (les arguments sont exprimés en radians)</td> - </tr> - <tr> - <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td> - <td>Fonctions trigonométriques inverses (les valeurs renvoyées sont exprimées en radians)</td> - </tr> - <tr> - <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td> - <td>Fonctions trigonométriques hyperboliques (les arguments sont exprimés en radians)</td> - </tr> - <tr> - <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td> - <td>Fonctions trigonométriques hyperboliques inverses (les valeurs renvoyées sont exprimées en radians).</td> - </tr> - <tr> - <td>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</td> - <td>Fonctions exponentielles et logarithmiques</td> - </tr> - <tr> - <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td> - <td>Renvoie le plus petit/grand entier inférieur/supérieur ou égal à l'argument donné</td> - </tr> - <tr> - <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td> - <td>Renvoie le plus petit (resp. grand) nombre d'une liste de nombres séparés par des virgules</td> - </tr> - <tr> - <td>{{jsxref("Math.random", "random()")}}</td> - <td>Renvoie un nombre aléatoire compris entre 0 et 1</td> - </tr> - <tr> - <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td> - <td>Fonctions d'arrondis et de troncature</td> - </tr> - <tr> - <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td> - <td>Racine carrée, cubique et racine carrée de la somme des carrés des arguments</td> - </tr> - <tr> - <td>{{jsxref("Math.sign", "sign()")}}</td> - <td>Renvoie le signe d'un nombre et indique si la valeur est négative, positive ou nulle</td> - </tr> - <tr> - <td>{{jsxref("Math.clz32", "clz32()")}},<br> - {{jsxref("Math.imul", "imul()")}}</td> - <td>Le nombre de zéros qui commencent un nombre sur 32 bits en représentation binaire.<br> - La résultat de la multiplication de deux arguments sur 32 bits effectuée comme en C.</td> - </tr> - </tbody> -</table> +| Méthode | Description | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{jsxref("Math.abs", "abs()")}} | Valeur absolue | +| {{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}} | Fonctions trigonométriques standards (les arguments sont exprimés en radians) | +| {{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}} | Fonctions trigonométriques inverses (les valeurs renvoyées sont exprimées en radians) | +| {{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}} | Fonctions trigonométriques hyperboliques (les arguments sont exprimés en radians) | +| {{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}} | Fonctions trigonométriques hyperboliques inverses (les valeurs renvoyées sont exprimées en radians). | +| {{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}} | Fonctions exponentielles et logarithmiques | +| {{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}} | Renvoie le plus petit/grand entier inférieur/supérieur ou égal à l'argument donné | +| {{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}} | Renvoie le plus petit (resp. grand) nombre d'une liste de nombres séparés par des virgules | +| {{jsxref("Math.random", "random()")}} | Renvoie un nombre aléatoire compris entre 0 et 1 | +| {{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}}, | Fonctions d'arrondis et de troncature | +| {{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}} | Racine carrée, cubique et racine carrée de la somme des carrés des arguments | +| {{jsxref("Math.sign", "sign()")}} | Renvoie le signe d'un nombre et indique si la valeur est négative, positive ou nulle | +| {{jsxref("Math.clz32", "clz32()")}}, {{jsxref("Math.imul", "imul()")}} | Le nombre de zéros qui commencent un nombre sur 32 bits en représentation binaire. La résultat de la multiplication de deux arguments sur 32 bits effectuée comme en C. | -<p>À la différence des autres objets, on ne crée pas d'objet de type <code>Math</code>. Ses propriétés sont statiques, on les appelle donc toujours depuis l'objet <code>Math</code>.</p> +À la différence des autres objets, on ne crée pas d'objet de type `Math`. Ses propriétés sont statiques, on les appelle donc toujours depuis l'objet `Math`. -<h2 id="Lobjet_Date">L'objet <code>Date</code></h2> +## L'objet `Date` -<p>JavaScript ne possède pas de type primitif pour représenter des dates. Cependant l'objet {{jsxref("Date")}} et ses méthodes permettent de manipuler des dates et des heures au sein d'une application. L'objet <code>Date</code> possède de nombreuses méthodes pour définir, modifier, obtenir des dates. Il ne possède pas de propriétés.</p> +JavaScript ne possède pas de type primitif pour représenter des dates. Cependant l'objet {{jsxref("Date")}} et ses méthodes permettent de manipuler des dates et des heures au sein d'une application. L'objet `Date` possède de nombreuses méthodes pour définir, modifier, obtenir des dates. Il ne possède pas de propriétés. -<p>JavaScript gère les dates de façon similaire à Java. Les deux langages possèdent de nombreuses méthodes en commun et les deux langages stockent les dates selon les nombres de millisecondes écoulées depuis le premier janvier 1970 à 00h00:00.</p> +JavaScript gère les dates de façon similaire à Java. Les deux langages possèdent de nombreuses méthodes en commun et les deux langages stockent les dates selon les nombres de millisecondes écoulées depuis le premier janvier 1970 à 00h00:00. -<p>L'objet <code>Date</code> permet de représenter des dates allant de -100 000 000 jours jusqu'à +100 000 000 jours par rapport au premier janvier 1970 UTC.</p> +L'objet `Date` permet de représenter des dates allant de -100 000 000 jours jusqu'à +100 000 000 jours par rapport au premier janvier 1970 UTC. -<p>Pour créer un objet <code>Date</code>, on utilisera la syntaxe suivante :</p> +Pour créer un objet `Date`, on utilisera la syntaxe suivante : -<pre class="brush: js">var monObjetDate = new Date([paramètres]); -</pre> +```js +var monObjetDate = new Date([paramètres]); +``` -<p>avec <code>monObjetDate</code> étant le nom de l'objet à créer, cela peut être un nouvel objet ou une propriété d'un objet existant.</p> +avec `monObjetDate` étant le nom de l'objet à créer, cela peut être un nouvel objet ou une propriété d'un objet existant. -<p>Lorsqu'on appelle <code>Date</code> sans le mot-clé <code>new</code>, cela renvoie la date fournie sous la forme d'une chaîne de caractères.</p> +Lorsqu'on appelle `Date` sans le mot-clé `new`, cela renvoie la date fournie sous la forme d'une chaîne de caractères. -<p>Les <code>paramètres</code> qui peuvent être utilisés sont :</p> +Les `paramètres` qui peuvent être utilisés sont : -<ul> - <li>Aucun paramètre : l'objet créé représentera la date et l'heure courante.</li> - <li>Une chaîne de caractères représentant une date au format suivant : "jour, année heures:minutes:secondes". Par exemple <code>var noël95 = new Date("December 25, 1995 13:30:00")</code>. Si les valeurs pour les heures, minutes ou secondes sont absentes, elles vaudront 0 par défaut.</li> - <li>Un ensemble de valeurs entières pour l'année, le mois et le jour : <code>var noël95 = new Date(1995, 11, 25)</code>.</li> - <li>Un ensemble de valeurs entières pour l'année, le mois, le jour, l'heure, les minutes et les secondes : <code>var noël95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li> -</ul> +- Aucun paramètre : l'objet créé représentera la date et l'heure courante. +- Une chaîne de caractères représentant une date au format suivant : "jour, année heures:minutes:secondes". Par exemple `var noël95 = new Date("December 25, 1995 13:30:00")`. Si les valeurs pour les heures, minutes ou secondes sont absentes, elles vaudront 0 par défaut. +- Un ensemble de valeurs entières pour l'année, le mois et le jour : `var noël95 = new Date(1995, 11, 25)`. +- Un ensemble de valeurs entières pour l'année, le mois, le jour, l'heure, les minutes et les secondes : `var noël95 = new Date(1995, 11, 25, 9, 30, 0);`. -<h3 id="Méthodes_de_lobjet_Date">Méthodes de l'objet <code>Date</code></h3> +### Méthodes de l'objet `Date` -<p>Les méthodes de l'objet <code>Date</code> se répartissent en différentes catégories :</p> +Les méthodes de l'objet `Date` se répartissent en différentes catégories : -<ul> - <li>celles utilisées pour définir et modifier les valeurs des objets <code>Date</code> (mutateurs).</li> - <li>celles utilisées pour obtenir des informations à partir des objets <code>Date</code> (accesseurs).</li> - <li>celles utilisées pour convertir les objets <code>Date</code> sous différents formats (souvent en chaînes de caractères).</li> - <li>celles utilisées pour analyser et convertir des chaînes de caractères représentant des dates.</li> -</ul> +- celles utilisées pour définir et modifier les valeurs des objets `Date` (mutateurs). +- celles utilisées pour obtenir des informations à partir des objets `Date` (accesseurs). +- celles utilisées pour convertir les objets `Date` sous différents formats (souvent en chaînes de caractères). +- celles utilisées pour analyser et convertir des chaînes de caractères représentant des dates. -<p>Avec les accesseurs et les mutateurs, il est possible d'obtenir ou de modifier séparément les secondes, les minutes, les heures, le jour du mois ou de la semaine, le mois et l'année. Il existe une méthode <code>getDay</code> qui renvoie le jour de la semaine mais il n'existe pas de méthode réciproque <code>setDay</code> car le jour de la semaine est automatiquement déterminé. Ces méthodes utilisent des entiers pour représenter les valeurs utilisées :</p> +Avec les accesseurs et les mutateurs, il est possible d'obtenir ou de modifier séparément les secondes, les minutes, les heures, le jour du mois ou de la semaine, le mois et l'année. Il existe une méthode `getDay` qui renvoie le jour de la semaine mais il n'existe pas de méthode réciproque `setDay` car le jour de la semaine est automatiquement déterminé. Ces méthodes utilisent des entiers pour représenter les valeurs utilisées : -<ul> - <li>Pour les secondes et les minutes : 0 à 59</li> - <li>Pour les heures : 0 à 23</li> - <li>Pour les jours : 0 (dimanche) à 6 (samedi)</li> - <li>Pour les dates : 1 à 31 (jour du mois)</li> - <li>Pour les mois : 0 (janvier) à 11 (décembre)</li> - <li>Pour les années : les années à partir de 1900</li> -</ul> +- Pour les secondes et les minutes : 0 à 59 +- Pour les heures : 0 à 23 +- Pour les jours : 0 (dimanche) à 6 (samedi) +- Pour les dates : 1 à 31 (jour du mois) +- Pour les mois : 0 (janvier) à 11 (décembre) +- Pour les années : les années à partir de 1900 -<p>Ainsi, si on définit la date suivante :</p> +Ainsi, si on définit la date suivante : -<pre class="brush: js">var noël95 = new Date("December 25, 1995"); -</pre> +```js +var noël95 = new Date("December 25, 1995"); +``` -<p><code>noël95.getMonth()</code> renverra 11, et <code>noël95.getFullYear()</code> renverra 1995.</p> +`noël95.getMonth()` renverra 11, et `noël95.getFullYear()` renverra 1995. -<p>Les méthodes <code>getTime</code> et <code>setTime</code> peuvent être utiles pour comparer des dates entre elles. La méthode <code>getTime</code> renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 à 00:00:00 pour l'objet <code>Date</code>.</p> +Les méthodes `getTime` et `setTime` peuvent être utiles pour comparer des dates entre elles. La méthode `getTime` renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 à 00:00:00 pour l'objet `Date`. -<p>Par exemple, les instructions suivantes affichent le nombre de jours qui restent pour l'année courante :</p> +Par exemple, les instructions suivantes affichent le nombre de jours qui restent pour l'année courante : -<pre class="brush: js">var aujourdhui = new Date(); +```js +var aujourdhui = new Date(); // On définit le jour et le mois var finAnnée = new Date(1995, 11, 31, 23, 59, 59, 999); @@ -352,41 +285,44 @@ var msParJour = 24 * 60 * 60 * 1000; // On renvoie le nombre de jours restants dans l'année var joursRestants = (finAnnée.getTime() - aujourdhui.getTime()) / msParJour; -joursRestants = Math.round(joursRestants);</pre> +joursRestants = Math.round(joursRestants); +``` -<p>Cet exemple crée un objet <code>Date</code> nommé <code>aujourdhui</code> qui contient la date du jour. On crée ensuite un objet <code>Date</code> nommé <code>finAnnée</code> pour lequel on définit ensuite l'année avec l'année courante. Après, on calcule le nombre de millisecondes qui s'écoulent dans une journée. Enfin, on calcule le nombre de jours entre <code>aujourdhui</code> et <code>finAnnée</code> en utilisant <code>getTime</code> puis on arrondit le tout pour avoir un nombre de jours.</p> +Cet exemple crée un objet `Date` nommé `aujourdhui` qui contient la date du jour. On crée ensuite un objet `Date` nommé `finAnnée` pour lequel on définit ensuite l'année avec l'année courante. Après, on calcule le nombre de millisecondes qui s'écoulent dans une journée. Enfin, on calcule le nombre de jours entre `aujourdhui` et `finAnnée` en utilisant `getTime` puis on arrondit le tout pour avoir un nombre de jours. -<p>La méthode <code>parse</code> est utile lorsqu'on souhaite affecter des valeurs temporelles à partir de chaînes de caractères. Par exemple, dans le code qui suit, on utilise les méthodes <code>parse</code> et <code>setTime</code> pour affecter la valeur d'une date à un objet <code>IPOdate</code> :</p> +La méthode `parse` est utile lorsqu'on souhaite affecter des valeurs temporelles à partir de chaînes de caractères. Par exemple, dans le code qui suit, on utilise les méthodes `parse` et `setTime` pour affecter la valeur d'une date à un objet `IPOdate` : -<pre class="brush: js">var IPOdate = new Date(); +```js +var IPOdate = new Date(); IPOdate.setTime(Date.parse("Aug 9, 1995")); -</pre> +``` -<h3 id="Exemple_dutilisation_de_lobjet_Date">Exemple d'utilisation de l'objet <code>Date</code></h3> +### Exemple d'utilisation de l'objet `Date` -<p>Dans l'exemple qui suit, la fonction <code>JSClock()</code> renvoie le temps au format d'une horloge numérique représentant les heures sur 12 heures :</p> +Dans l'exemple qui suit, la fonction `JSClock()` renvoie le temps au format d'une horloge numérique représentant les heures sur 12 heures : -<pre class="brush: js">function JSClock() { +```js +function JSClock() { var temps = new Date(); var heures = temps.getHours(); var minutes = temps.getMinutes(); var secondes = temps.getSeconds(); - var calc = "" + (heures > 12) ? heures - 12 : heures); + var calc = "" + (heures > 12) ? heures - 12 : heures); if (heures == 0) calc = "12"; - calc += ((minutes < 10) ? ":0" : ":") + minutes; - calc += ((secondes < 10) ? ":0" : ":") + secondes; - calc += (heures >= 12) ? " P.M." : " A.M."; + calc += ((minutes < 10) ? ":0" : ":") + minutes; + calc += ((secondes < 10) ? ":0" : ":") + secondes; + calc += (heures >= 12) ? " P.M." : " A.M."; return calc; } -</pre> +``` -<p>Pour commencer, la fonction <code>JSClock</code> crée un objet <code>Date</code> appelé <code>temps</code> qui représente la date et l'heure à l'instant où la fonction est exécutée. Ensuite, les méthodes <code>getHours</code>, <code>getMinutes</code>, et <code>getSeconds</code> sont appelées afin d'affecter les valeurs correspondantes à <code>heures</code>, <code>minute</code>s, et <code>secondes</code>.</p> +Pour commencer, la fonction `JSClock` crée un objet `Date` appelé `temps` qui représente la date et l'heure à l'instant où la fonction est exécutée. Ensuite, les méthodes `getHours`, `getMinutes`, et `getSeconds` sont appelées afin d'affecter les valeurs correspondantes à `heures`, `minute`s, et `secondes`. -<p>Les quatre instructions suivantes permettent de construire une chaîne de caractères à partir de la valeur temporelle. La première instruction crée une variable <code>calc</code> et lui affecte une valeur avec une expression conditionnelle : si <code>heures</code> est supérieure à 12, on affichera (<code>heures - 12</code>), sinon on affichera l'heure sauf si c'est 0 auquel cas on affichera 12.</p> +Les quatre instructions suivantes permettent de construire une chaîne de caractères à partir de la valeur temporelle. La première instruction crée une variable `calc` et lui affecte une valeur avec une expression conditionnelle : si `heures` est supérieure à 12, on affichera (`heures - 12`), sinon on affichera l'heure sauf si c'est 0 auquel cas on affichera 12. -<p>L'instruction qui suit concatène la valeur de <code>minutes</code> à <code>calc</code>. Si la valeur de <code>minutes</code> est inférieure à 10, l'expression conditionnelle ajoutera une chaîne avec un zéro pour que la valeur soit affichée avec deux chiffres. De la même façon, l'instruction qui suit concatène la valeur de <code>calc</code> avec les secondes.</p> +L'instruction qui suit concatène la valeur de `minutes` à `calc`. Si la valeur de `minutes` est inférieure à 10, l'expression conditionnelle ajoutera une chaîne avec un zéro pour que la valeur soit affichée avec deux chiffres. De la même façon, l'instruction qui suit concatène la valeur de `calc` avec les secondes. -<p>Enfin, une expression conditionnelle est utilisée pour ajouter "P.M." à <code>calc</code> si <code>heures</code> vaut 12 ou plus, sinon ce sera la chaîne "A.M." qui sera ajoutée à la fin de <code>calc</code>.</p> +Enfin, une expression conditionnelle est utilisée pour ajouter "P.M." à `calc` si `heures` vaut 12 ou plus, sinon ce sera la chaîne "A.M." qui sera ajoutée à la fin de `calc`. -<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}}</p> +{{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}} diff --git a/files/fr/web/javascript/guide/regular_expressions/assertions/index.md b/files/fr/web/javascript/guide/regular_expressions/assertions/index.md index a16c6b48ce..1e1dbb1a9d 100644 --- a/files/fr/web/javascript/guide/regular_expressions/assertions/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/assertions/index.md @@ -9,99 +9,130 @@ tags: translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions original_slug: Web/JavaScript/Guide/Expressions_régulières/Assertions --- -<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p> +{{jsSidebar("JavaScript Guide")}}{{draft}} -<p>Les assertions indiquent les conditions selon lesquelles il est possible d'avoir une correspondance (contenu situé avant la correspondance, situé après ou expressions conditionnelles).</p> +Les assertions indiquent les conditions selon lesquelles il est possible d'avoir une correspondance (contenu situé avant la correspondance, situé après ou expressions conditionnelles). -<h2 id="Types">Types</h2> +## Types -<div class="blockIndicator note"> -<p><strong>Note :</strong> Le caractère <code>?</code> peut également être utilisé comme quantificateur.</p> -</div> +> **Note :** Le caractère `?` peut également être utilisé comme quantificateur. <table class="standard-table"> - <thead> - <tr> - <th scope="col">Caractères</th> - <th scope="col">Signification</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>x(?=y)</code></td> - <td> - <p>Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un test de succession (<em>lookahead</em>).</p> - - <p>Ainsi, <code>/Jack(?=Sparrow)/</code> correspond à 'Jack' seulement s'il est suivi de 'Sparrow'. <code>/Jack(?=Sparrow|Bauer)/</code> correspond à 'Jack' seulement s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni 'Bauer' ne feront partie de la correspondance.</p> - </td> - </tr> - <tr> - <td><code>x(?!y)</code></td> - <td> - <p>Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.</p> - - <p>Ainsi, <code>/\d+(?!\.)/</code> correspond à un nombre qui n'est pas suivi par un point, cette expression utilisée avec <code>la chaîne 3.141</code> correspondra pour '141' mais pas pour '3.141'.</p> - </td> - </tr> - <tr> - <td><code>(?<=y)x</code></td> - <td> - <p>Correspond à <code><em>x</em></code> seulement si <code><em>x</em></code> est précédé par <code><em>y</em></code>. C'est ce qu'on appelle une recherche arrière (<em>lookbehind</em>).</p> - - <p>Ainsi /<code>(?<=Jack)Sprat/</code> correspond à "Sprat" seulement s'il est précédé de "Jack".<br> - <code>/(?<=Jack|Tom)Sprat/</code> correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".<br> - Toutefois, "Jack" et "Tom" ne feront pas partie de la correspondance.</p> - </td> - </tr> - <tr> - <td><code>(?<!y)x</code></td> - <td> - <p>Correspond à <code><em>x</em></code> uniquement si <code><em>x</em></code> n'est pas précédé par <code><em>y</em></code> (parfois appelée en anglais <em>negated lookbehind</em>)<em>.</em></p> - - <p>Ainsi, <code>/(?<!-)\d+/</code> correspondra à un nombre seulement si celui-ci n'est pas précédé d'un signe moins.<br> - <code>/(?<!-)\d+/.exec('3')</code> cible "3".<br> - <code>/(?<!-)\d+/.exec('-3')</code> ne trouve aucune correspondance car le nombre est précédé d'un signe</p> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Caractères</th> + <th scope="col">Signification</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>x(?=y)</code></td> + <td> + <p> + Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un + test de succession (<em>lookahead</em>). + </p> + <p> + Ainsi, <code>/Jack(?=Sparrow)/</code> correspond à 'Jack' seulement + s'il est suivi de 'Sparrow'. + <code>/Jack(?=Sparrow|Bauer)/</code> correspond à 'Jack' seulement + s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni + 'Bauer' ne feront partie de la correspondance. + </p> + </td> + </tr> + <tr> + <td><code>x(?!y)</code></td> + <td> + <p>Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.</p> + <p> + Ainsi, <code>/\d+(?!\.)/</code> correspond à un nombre qui n'est pas + suivi par un point, cette expression utilisée avec + <code>la chaîne 3.141</code> correspondra pour '141' mais pas pour + '3.141'. + </p> + </td> + </tr> + <tr> + <td><code>(?<=y)x</code></td> + <td> + <p> + Correspond à <code><em>x</em></code> seulement si + <code><em>x</em></code> est précédé par <code><em>y</em></code + >. C'est ce qu'on appelle une recherche arrière (<em>lookbehind</em>). + </p> + <p> + Ainsi /<code>(?<=Jack)Sprat/</code> correspond à "Sprat" + seulement s'il est précédé de "Jack".<br /><code + >/(?<=Jack|Tom)Sprat/</code + > + correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".<br />Toutefois, + "Jack" et "Tom" ne feront pas partie de la correspondance. + </p> + </td> + </tr> + <tr> + <td><code>(?<!y)x</code></td> + <td> + <p> + Correspond à <code><em>x</em></code> uniquement si + <code><em>x</em></code> n'est pas précédé par + <code><em>y</em></code> (parfois appelée en anglais + <em>negated lookbehind</em>)<em>.</em> + </p> + <p> + Ainsi, <code>/(?<!-)\d+/</code> correspondra à un nombre + seulement si celui-ci n'est pas précédé d'un signe moins.<br /><code + >/(?<!-)\d+/.exec('3')</code + > + cible "3".<br /> <code>/(?<!-)\d+/.exec('-3')</code> ne trouve + aucune correspondance car le nombre est précédé d'un signe + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Assertion_avant_(lookahead)">Assertion avant (<em>lookahead</em>)</h3> +### Assertion avant (_lookahead_) -<pre class="brush: js">let regex = /Premier(?= test)/g; +```js +let regex = /Premier(?= test)/g; console.log('Premier test'.match(regex)); // [ 'Premier' ] console.log('Premier truc'.match(regex)); // null console.log("Voici le Premier test de l'année.".match(regex)); // [ 'Premier' ] console.log('Voici le Premier truc du mois.'.match(regex)); // null -</pre> +``` -<h3 id="Assertion_avant_négative">Assertion avant négative</h3> +### Assertion avant négative -<p>L'expression rationnelle <code>/\d+(?!\.)/</code> permettra de rechercher plusieurs chiffres si ceux-ci ne sont pas suivis d'un point décimal. Ainsi, <code>/\d+(?!\.)/.exec('3.141')</code> trouvera la sous-chaîne "141" mais pas "3."</p> +L'expression rationnelle `/\d+(?!\.)/` permettra de rechercher plusieurs chiffres si ceux-ci ne sont pas suivis d'un point décimal. Ainsi, `/\d+(?!\.)/.exec('3.141')` trouvera la sous-chaîne "141" mais pas "3." -<pre class="brush: js">console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ] -</pre> +```js +console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ] +``` -<h3 id="Signification_différente_de_'!'_entre_les_assertions_et_les_intervalles">Signification différente de <code>'?!'</code> entre les assertions et les intervalles</h3> +### Signification différente de `'?!'` entre les assertions et les intervalles -<p>La combinaison de caractères <code>?!</code> a un sens différent entre les <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Assertions">assertions</a> <code>/x(?!y)/</code> et les <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles">intervalles</a> <code>[^?!]</code>.</p> +La combinaison de caractères `?!` a un sens différent entre les [assertions](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Assertions) `/x(?!y)/` et les [intervalles](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles) `[^?!]`. -<pre class="brush: js">let orangePasCitron = "Voulez-vous avoir une orange? Oui, je ne veux pas avoir de citron!"; +```js +let orangePasCitron = "Voulez-vous avoir une orange? Oui, je ne veux pas avoir de citron!"; let choixPasCitron = /[^?!]+avoir(?! un citron)[^?!]+[?!]/gi console.log(orangePasCitron.match(choixPasCitron)); // [ 'Voulez-vous avoir une orange?' ] let choixPasOrange = /[^?!]+avoir(?! une orange)[^?!]+[?!]/gi console.log(orangePasCitron.match(choixPasOrange)); // [ 'Oui, je ne veux pas avoir de citron!' ] -</pre> +``` -<h3 id="Assertion_arrière_(lookbehind)">Assertion arrière (<em>lookbehind</em>)</h3> +### Assertion arrière (_lookbehind_) -<pre class="brush: js">let oranges = ['espèce orange A ', 'sorte orange B', 'espèce orange C',]; +```js +let oranges = ['espèce orange A ', 'sorte orange B', 'espèce orange C',]; -let especesOranges = oranges.filter( fruit => fruit.match(/(?<=espèce )orange/)); +let especesOranges = oranges.filter( fruit => fruit.match(/(?<=espèce )orange/)); console.log(especesOranges); // [ 'espèce orange A ', 'espèce orange C' ] -</pre> +``` diff --git a/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md index ba3e075bce..1d37d5b70d 100644 --- a/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md @@ -9,173 +9,255 @@ tags: translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes original_slug: Web/JavaScript/Guide/Expressions_régulières/Classes_de_caractères --- -<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p> +{{jsSidebar("JavaScript Guide")}}{{draft}} -<p>Les classes de caractères permettent de distinguer différents ensembles de caractères dans les expressions rationnelles (par exemple les chiffres d'une part et les lettres d'autre part).</p> +Les classes de caractères permettent de distinguer différents ensembles de caractères dans les expressions rationnelles (par exemple les chiffres d'une part et les lettres d'autre part). -<h2 id="Types">Types</h2> +## Types <table class="standard-table"> - <thead> - <tr> - <th scope="col">Caractères</th> - <th scope="col">Signification</th> - </tr> - </thead> - <tbody> - </tbody> - <tbody> - <tr> - <td><code>.</code></td> - <td> - <p>Par défaut, (Le point) correspond à n'importe quel caractère excepté un caractère de saut de ligne.</p> - - <p>Ainsi, <code>/.n/</code> correspond à 'un' et 'en' dans "Un baobab nain en cours de croissance" mais pas à 'nain'.</p> - - <p>Si le marqueur <code>s</code> (<em>dotAll</em>) est utilisé, le point correspondra également aux caractères de saut de ligne.</p> - - <p>Le marqueur <code>m</code> ne modifie pas le comportement du point.</p> - - <p>Attention, si on utilise le point dans <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles">un intervalle de caractères</a>, il n'aura plus cette signification spéciale.</p> - </td> - </tr> - <tr> - <td><code>\d</code></td> - <td> - <p>Correspond à un chiffre et est équivalent à <code>[0-9]</code>.</p> - - <p>Ainsi, <code>/\d/</code> ou <code>/[0-9]/</code> correspond à '2' dans "H2O est la molécule de l'eau".</p> - </td> - </tr> - <tr> - <td><code>\D</code></td> - <td> - <p>Correspond à tout caractère qui n'est pas un chiffre et est équivalent à<code> [^0-9]</code>.</p> - - <p>Ainsi, <code>/\D/</code> ou <code>/[^0-9]/</code> correspond à 'H' dans "H2O est la molécule de l'eau".</p> - </td> - </tr> - <tr> - <td><code>\w</code></td> - <td> - <p>Correspond à n'importe quel caractère alphanumérique de l'alphabet latin, y compris le tiret bas. C'est équivalent à <code>[A-Za-z0-9_]</code>.</p> - - <p>Ainsi, <code>/\w/</code> correspond à 'l' dans "licorne", à '5' dans "5,28€", et à '3' dans "3D."</p> - </td> - </tr> - <tr> - <td><code>\W</code></td> - <td> - <p>Correspond à n'importe quel caractère n'étant pas un caractère de l'alphabet latin ou le tiret bas. Cela est équivalent à <code>[^A-Za-z0-9_]</code>.</p> - - <p>Ainsi, <code>/\W/</code> ou <code>/[^A-Za-z0-9_]/</code> correspond à '%' dans "50%."</p> - </td> - </tr> - <tr> - <td><code>\s</code></td> - <td> - <p>Correspond à un blanc (cela comprend les espace, tabulation, saut de ligne ou saut de page). C'est équivalent à <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> - - <p>Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto".</p> - </td> - </tr> - <tr> - <td><code>\S</code></td> - <td> - <p>Correspond à un caractère qui n'est pas un blanc. C'est équivalent à <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> - - <p>Ainsi, <code>/\S\w*/</code> correspond à 'truc' dans "truc toto".</p> - </td> - </tr> - <tr> - <td><code>\t</code></td> - <td>Correspond à une tabulation (U+0009).</td> - </tr> - <tr> - <td><code>\r</code></td> - <td>Correspond à un retour chariot (U+000D).</td> - </tr> - <tr> - <td><code>\n</code></td> - <td>Correspond à un saut de ligne (U+000A).</td> - </tr> - <tr> - <td><code>\v</code></td> - <td>Correspond à une tabulation verticale (U+000B).</td> - </tr> - <tr> - <td><code>\f</code></td> - <td>Correspond à un saut de page (U+000C).</td> - </tr> - <tr> - <td><code>[\b]</code></td> - <td>Correspond pour un retour arrière (U+0008). (À ne pas confondre avec <code>\b</code>, voir <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites">les limites</a>).</td> - </tr> - <tr> - <td><code>\0</code></td> - <td>Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un autre chiffre car <code>\0<chiffres></code> est une <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement">séquence d'échappement</a> pour les nombres en notation octale (si besoin d'utiliser un chiffre ensuite, on pourra utiliser la forme <code>\x00</code>, cf. ci-après).</td> - </tr> - <tr> - <td><code>\cX</code></td> - <td> - <p>Correspond au caractère de contrôle où <code><em>X</em></code> est une lettre entre A et Z. Correspond au caractèlres de contrôle correspondant entre <code>U+0001</code>-<code>U+001F</code>. Ainsi, <code>/\cM/</code> correspondra au caractère controle-M au sein d'une chaîne de caractères soit <code>"\r"</code> pour <code>"\r\n"</code>.</p> - </td> - </tr> - <tr> - <td><code>\xhh</code></td> - <td>Correspond au caractère dont le code hexadécimal est hh (deux chiffres hexadécimaux).</td> - </tr> - <tr> - <td><code>\uhhhh</code></td> - <td>Correspond au caractère dont le code est hhhh (quatre chiffres hexadécimaux).</td> - </tr> - <tr> - <td><code>\u{hhhh}</code> ou <code>\u{hhhhh}</code></td> - <td>(Uniquement actif quand le marqueur <code>u</code> est activé) Correspond au caractère dont la valeur Unicode est <code>hhhh</code> (en chiffre hexadécimaux).</td> - </tr> - <tr> - <td><code>\</code></td> - <td> - <p>La barre oblique inversée indique que le prochain caractère doit être traité spécifiquement ou échappé. Elle se comporte d'une de ces façons :</p> - - <ul> - <li>Pour les caractères normalement traités littéralement, cela indique que le prochain caractère est spécial et qu'il ne doit pas être interprété littéralement. Ainsi, <code>/b/</code> correspondra à la lettre "b" mais en utilisant la barre oblique inversée devant <code>/\b/</code>, on cherchera une limite de mot.</li> - <li>Pour les caractères spéciaux, la barre indique que le caractère doit être interprété littéralement. Ainsi, "*" est un caractère spécial (un quantificateur qui signifie que le caractère précédent doit être présent 0 ou plusieurs fois) : <code>/a*/</code> cherchera une correspondance avec 0 ou plusieurs "a". Si on souhaite trouver le caractère <code>*</code> dans une chaîne, on placera la barre oblique inversée devant : on a ainsi <code>/a\*/</code> qui permet de trouver "a*" dans une chaîne.</li> - </ul> - - <div class="blockIndicator note"> - <p><strong>Note :</strong> L'échappement vaut également avec la barre oblique inversée. Autrement dit, si on cherche la présence de <code>\</code> dans une chaîne, on pourra utiliser l'expression <code>/\\/</code> (où la première barre oblique échape la seconde).</p> - </div> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Caractères</th> + <th scope="col">Signification</th> + </tr> + </thead> + <tbody></tbody> + <tbody> + <tr> + <td><code>.</code></td> + <td> + <p> + Par défaut, (Le point) correspond à n'importe quel caractère excepté + un caractère de saut de ligne. + </p> + <p> + Ainsi, <code>/.n/</code> correspond à 'un' et 'en' dans "Un baobab + nain en cours de croissance" mais pas à 'nain'. + </p> + <p> + Si le marqueur <code>s</code> (<em>dotAll</em>) est utilisé, le point + correspondra également aux caractères de saut de ligne. + </p> + <p> + Le marqueur <code>m</code> ne modifie pas le comportement du point. + </p> + <p> + Attention, si on utilise le point dans + <a + href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles" + >un intervalle de caractères</a + >, il n'aura plus cette signification spéciale. + </p> + </td> + </tr> + <tr> + <td><code>\d</code></td> + <td> + <p>Correspond à un chiffre et est équivalent à <code>[0-9]</code>.</p> + <p> + Ainsi, <code>/\d/</code> ou <code>/[0-9]/</code> correspond à '2' dans + "H2O est la molécule de l'eau". + </p> + </td> + </tr> + <tr> + <td><code>\D</code></td> + <td> + <p> + Correspond à tout caractère qui n'est pas un chiffre et est équivalent + à<code> [^0-9]</code>. + </p> + <p> + Ainsi, <code>/\D/</code> ou <code>/[^0-9]/</code> correspond à 'H' + dans "H2O est la molécule de l'eau". + </p> + </td> + </tr> + <tr> + <td><code>\w</code></td> + <td> + <p> + Correspond à n'importe quel caractère alphanumérique de l'alphabet + latin, y compris le tiret bas. C'est équivalent à + <code>[A-Za-z0-9_]</code>. + </p> + <p> + Ainsi, <code>/\w/</code> correspond à 'l' dans "licorne", à '5' dans + "5,28€", et à '3' dans "3D." + </p> + </td> + </tr> + <tr> + <td><code>\W</code></td> + <td> + <p> + Correspond à n'importe quel caractère n'étant pas un caractère de + l'alphabet latin ou le tiret bas. Cela est équivalent à + <code>[^A-Za-z0-9_]</code>. + </p> + <p> + Ainsi, <code>/\W/</code> ou <code>/[^A-Za-z0-9_]/</code> correspond à + '%' dans "50%." + </p> + </td> + </tr> + <tr> + <td><code>\s</code></td> + <td> + <p> + Correspond à un blanc (cela comprend les espace, tabulation, saut de + ligne ou saut de page). C'est équivalent à + <code + >[ + \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code + >. + </p> + <p> + Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto". + </p> + </td> + </tr> + <tr> + <td><code>\S</code></td> + <td> + <p> + Correspond à un caractère qui n'est pas un blanc. C'est équivalent à + <code + >[^ + \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code + >. + </p> + <p>Ainsi, <code>/\S\w*/</code> correspond à 'truc' dans "truc toto".</p> + </td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Correspond à une tabulation (U+0009).</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Correspond à un retour chariot (U+000D).</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Correspond à un saut de ligne (U+000A).</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Correspond à une tabulation verticale (U+000B).</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Correspond à un saut de page (U+000C).</td> + </tr> + <tr> + <td><code>[\b]</code></td> + <td> + Correspond pour un retour arrière (U+0008). (À ne pas confondre avec + <code>\b</code>, voir + <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites" + >les limites</a + >). + </td> + </tr> + <tr> + <td><code>\0</code></td> + <td> + Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un + autre chiffre car <code>\0<chiffres></code> est une + <a + href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement" + >séquence d'échappement</a + > + pour les nombres en notation octale (si besoin d'utiliser un chiffre + ensuite, on pourra utiliser la forme <code>\x00</code>, cf. ci-après). + </td> + </tr> + <tr> + <td><code>\cX</code></td> + <td> + <p> + Correspond au caractère de contrôle où <code><em>X</em></code> est une + lettre entre A et Z. Correspond au caractèlres de contrôle + correspondant entre <code>U+0001</code>-<code>U+001F</code>. Ainsi, + <code>/\cM/</code> correspondra au caractère controle-M au sein d'une + chaîne de caractères soit <code>"\r"</code> pour <code>"\r\n"</code>. + </p> + </td> + </tr> + <tr> + <td><code>\xhh</code></td> + <td> + Correspond au caractère dont le code hexadécimal est hh (deux chiffres + hexadécimaux). + </td> + </tr> + <tr> + <td><code>\uhhhh</code></td> + <td> + Correspond au caractère dont le code est hhhh (quatre chiffres + hexadécimaux). + </td> + </tr> + <tr> + <td><code>\u{hhhh}</code> ou <code>\u{hhhhh}</code></td> + <td> + (Uniquement actif quand le marqueur <code>u</code> est activé) + Correspond au caractère dont la valeur Unicode est <code>hhhh</code> (en + chiffre hexadécimaux). + </td> + </tr> + <tr> + <td><code>\</code></td> + <td> + <p> + La barre oblique inversée indique que le prochain caractère doit être + traité spécifiquement ou échappé. Elle se comporte d'une de ces façons + : + </p> + <ul> + <li> + Pour les caractères normalement traités littéralement, cela indique + que le prochain caractère est spécial et qu'il ne doit pas être + interprété littéralement. Ainsi, <code>/b/</code> correspondra à la + lettre "b" mais en utilisant la barre oblique inversée devant + <code>/\b/</code>, on cherchera une limite de mot. + </li> + <li> + Pour les caractères spéciaux, la barre indique que le caractère doit + être interprété littéralement. Ainsi, "*" est un caractère spécial + (un quantificateur qui signifie que le caractère précédent doit être + présent 0 ou plusieurs fois) : <code>/a*/</code> cherchera une + correspondance avec 0 ou plusieurs "a". Si on souhaite trouver le + caractère <code>*</code> dans une chaîne, on placera la barre + oblique inversée devant : on a ainsi <code>/a\*/</code> qui permet + de trouver "a*" dans une chaîne. + </li> + </ul> + <div class="blockIndicator note"> + <p> + <strong>Note :</strong> L'échappement vaut également avec la barre + oblique inversée. Autrement dit, si on cherche la présence de + <code>\</code> dans une chaîne, on pourra utiliser l'expression + <code>/\\/</code> (où la première barre oblique échape la seconde). + </p> + </div> + </td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ------------------------ | -------------------- | ----------------------------------------------------- | +| {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("javascript.builtins.RegExp.property_escapes")}}</p> +{{Compat("javascript.builtins.RegExp.property_escapes")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{JSxRef("RegExp")}}</li> -</ul> +- {{JSxRef("RegExp")}} diff --git a/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md index 498e9e7ce8..1233a65060 100644 --- a/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md @@ -10,83 +10,163 @@ tags: translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges original_slug: Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles --- -<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p> +{{jsSidebar("JavaScript Guide")}}{{draft}} -<p>Les groupes et intervalles permettent de représenter des groupes ou des intervalles de caractères dans des expressions rationnelles.</p> +Les groupes et intervalles permettent de représenter des groupes ou des intervalles de caractères dans des expressions rationnelles. -<h2 id="Types">Types</h2> +## Types <table class="standard-table"> - <thead> - <tr> - <th scope="col">Caractères</th> - <th scope="col">Signification</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>x|y</code></td> - <td> - <p>Correspond à 'x' ou 'y'.</p> - - <p>Ainsi, <code>/vert|rouge/</code> correspond à 'vert' dans "feu vert" et à 'rouge' dans "feu rouge".</p> - </td> - </tr> - <tr> - <td><code>[xyz]</code> ou <code>[a-c]</code></td> - <td>Un ensemble de caractère. Ce type de motif correspond pour n'importe quel caractètre présent entre les crochets, y compris les <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement">séquences d'échappement</a>. Les caractères spéciaux comme le point (.) et l'astérisque ne sont pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas besoin d'être échappés. Il est possible de donner un ensemble sur un intervalle de caractères en utilisant un tiret (-), comme le montre l'exemple qui suit.<br> - <br> - Le motif <code>[a-d]</code>, aura les mêmes correspondances que <code>[abcd]</code>, correspondant au 'b' de "bulle" et au 'c' de "ciel". Les motifis <code>/[a-z.]+/ </code>et <code>/[\w.]+/</code> correspondront pour la chaîne entirère : "Adre.ss.e".</td> - </tr> - <tr> - <td> - <p><code>[^xyz]</code> ou <code>[^a-c]</code></p> - </td> - <td> - - - <p>Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui n'est pas compris entre crochets. Il est possible de fournir un intervalle de caractères en utilisant un tiret (-). Les autres règles qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent également ici.</p> - - <p>Par exemple, <code>[^abc]</code> est équivalent à <code>[^a-c]</code>. Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel".</p> - - <div class="note"> - <p><strong>Note :</strong> Le caractère <code>^</code> peut également être utilisé afin d'indiquer le <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites">début d'un champ</a>.</p> - </div> - </td> - </tr> - <tr> - <td><code>(x)</code></td> - <td> - <p>Correspond à 'x' et garde la correspondance en mémoire. Les parenthèses permettent de <em>capturer </em>l'expression dans un « groupe ».<br> - <br> - Les '<code>(toto)</code>' et '<code>(truc)</code>', dans le motif <code>/(toto) (truc) \1 \2/</code> correspondent et gardent en mémoire les deux premiers mots de la chaîne de caractère "toto truc toto truc". Les <code>\1</code> et <code>\2</code> du motif correspondent respectivement à la première et à la deuxième correspondances pour les sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un remplacement, on utilisera <code>$1</code> et <code>$2</code> pour faire référence au premier et second groupe et <code>$</code><code>n </code>pour faire référence au n-ième groupe capturé (ex. <code>('toto truc'.replace(/(...) (...)/, '$2 $1').</code> <code>$&</code> fera référence à la chaîne entière).</p> - - <p>Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).</p> - - <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">String.match()</a></code> won't return groups if the <code>/.../g</code> flag is set. However, you can still use <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll">String.matchAll()</a></code> to get all matches.</p> - </td> - </tr> - <tr> - <td><code>\n</code></td> - <td> - <p>Avec <code><em>n</em></code> un entier positif. Cela permet de faire référence à la dernière sous-chaîne qui correspond au n-ième groupe entre parenthèses de l'expression rationnelle (en comptant les parenthèses gauche). Ainsi, <code>/apple(,)\sorange\1/</code> correspondra à "apple, orange," dans "apple, orange, cherry, peach".</p> - </td> - </tr> - <tr> - <td><code>(?<Nom>x)</code></td> - <td> - <p>Correspond à <code>x</code> et nomme la correspondance. Les correspondances associées pourront être retrouvées via le nom indiqué. Les chevrons (<code>'<'</code> et <code>'>'</code>) sont obligatoires pour encadrer le nom.</p> - - <p>Ainsi, si on veut extraire la composante de zone d'un numéro de téléphone aux États-Unis, on pourra écrire <code>/\((?<area>\d\d\d)\)/</code> et récupérer le nombre voulu avec <code>matches.groups.area</code>.</p> - </td> - </tr> - <tr> - <td><code>(?:<em>x</em>)</code></td> - <td>Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les parenthèses ne <em>capturent</em> pas l'expression et permettent d'utiliser des sous-expressions d'une expression régulière pour travailler plus finement. L'expression <code>/(?:zoo){1,2}/</code> sans parenthèes non-capturantes <code>les caractères {1,2}</code> ne s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses capturantes, <code>{1,2}</code> s'applique au mot entier 'zoo'.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Caractères</th> + <th scope="col">Signification</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>x|y</code></td> + <td> + <p>Correspond à 'x' ou 'y'.</p> + <p> + Ainsi, <code>/vert|rouge/</code> correspond à 'vert' dans "feu vert" + et à 'rouge' dans "feu rouge". + </p> + </td> + </tr> + <tr> + <td><code>[xyz]</code> ou <code>[a-c]</code></td> + <td> + Un ensemble de caractère. Ce type de motif correspond pour n'importe + quel caractètre présent entre les crochets, y compris les + <a + href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement" + >séquences d'échappement</a + >. Les caractères spéciaux comme le point (.) et l'astérisque ne sont + pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas + besoin d'être échappés. Il est possible de donner un ensemble sur un + intervalle de caractères en utilisant un tiret (-), comme le montre + l'exemple qui suit.<br /><br />Le motif <code>[a-d]</code>, aura les + mêmes correspondances que <code>[abcd]</code>, correspondant au 'b' de + "bulle" et au 'c' de "ciel". Les motifis <code>/[a-z.]+/ </code>et + <code>/[\w.]+/</code> correspondront pour la chaîne entirère : + "Adre.ss.e". + </td> + </tr> + <tr> + <td> + <p><code>[^xyz]</code> ou <code>[^a-c]</code></p> + </td> + <td> + <p> + Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui + n'est pas compris entre crochets. Il est possible de fournir un + intervalle de caractères en utilisant un tiret (-). Les autres règles + qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent + également ici. + </p> + <p> + Par exemple, <code>[^abc]</code> est équivalent à <code>[^a-c]</code>. + Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel". + </p> + <div class="note"> + <p> + <strong>Note :</strong> Le caractère <code>^</code> peut également + être utilisé afin d'indiquer le + <a + href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites" + >début d'un champ</a + >. + </p> + </div> + </td> + </tr> + <tr> + <td><code>(x)</code></td> + <td> + <p> + Correspond à 'x' et garde la correspondance en mémoire. Les + parenthèses permettent de <em>capturer </em>l'expression dans un « + groupe ».<br /><br />Les '<code>(toto)</code>' et + '<code>(truc)</code>', dans le motif + <code>/(toto) (truc) \1 \2/</code> correspondent et gardent en mémoire + les deux premiers mots de la chaîne de caractère "toto truc toto + truc". Les <code>\1</code> et <code>\2</code> du motif correspondent + respectivement à la première et à la deuxième correspondances pour les + sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un + remplacement, on utilisera <code>$1</code> et <code>$2</code> pour + faire référence au premier et second groupe et <code>$</code + ><code>n </code>pour faire référence au n-ième groupe capturé (ex. + <code>('toto truc'.replace(/(...) (...)/, '$2 $1').</code> + <code>$&</code> fera référence à la chaîne entière). + </p> + <p> + Capturing groups have a performance penalty. If you don't need the + matched substring to be recalled, prefer non-capturing parentheses + (see below). + </p> + <p> + <code + ><a + href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match" + >String.match()</a + ></code + > + won't return groups if the <code>/.../g</code> flag is set. However, + you can still use + <code + ><a + href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll" + >String.matchAll()</a + ></code + > + to get all matches. + </p> + </td> + </tr> + <tr> + <td><code>\n</code></td> + <td> + <p> + Avec <code><em>n</em></code> un entier positif. Cela permet de faire + référence à la dernière sous-chaîne qui correspond au n-ième groupe + entre parenthèses de l'expression rationnelle (en comptant les + parenthèses gauche). Ainsi, + <code>/apple(,)\sorange\1/</code> correspondra à "apple, orange," dans + "apple, orange, cherry, peach". + </p> + </td> + </tr> + <tr> + <td><code>(?<Nom>x)</code></td> + <td> + <p> + Correspond à <code>x</code> et nomme la correspondance. Les + correspondances associées pourront être retrouvées via le nom indiqué. + Les chevrons (<code>'<'</code> et <code>'>'</code>) sont + obligatoires pour encadrer le nom. + </p> + <p> + Ainsi, si on veut extraire la composante de zone d'un numéro de + téléphone aux États-Unis, on pourra écrire + <code>/\((?<area>\d\d\d)\)/</code> et récupérer le nombre voulu + avec <code>matches.groups.area</code>. + </p> + </td> + </tr> + <tr> + <td><code>(?:<em>x</em>)</code></td> + <td> + Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les + parenthèses ne <em>capturent</em> pas l'expression et permettent + d'utiliser des sous-expressions d'une expression régulière pour + travailler plus finement. L'expression <code>/(?:zoo){1,2}/</code> sans + parenthèes non-capturantes <code>les caractères {1,2}</code> ne + s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses + capturantes, <code>{1,2}</code> s'applique au mot entier 'zoo'. + </td> + </tr> + </tbody> </table> -<div class="note"> -<p><strong>Note :</strong> Firefox ne prend pas en charge les groupes nommés. Pour plus d'informations, voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1362154">le bug correspondant</a>.</p> -</div> +> **Note :** Firefox ne prend pas en charge les groupes nommés. Pour plus d'informations, voir [le bug correspondant](https://bugzilla.mozilla.org/show_bug.cgi?id=1362154). diff --git a/files/fr/web/javascript/guide/regular_expressions/index.md b/files/fr/web/javascript/guide/regular_expressions/index.md index dda529fffd..a5314a2a4c 100644 --- a/files/fr/web/javascript/guide/regular_expressions/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/index.md @@ -9,630 +9,852 @@ tags: translation_of: Web/JavaScript/Guide/Regular_Expressions original_slug: Web/JavaScript/Guide/Expressions_régulières --- -<p>{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}}</p> +{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}} -<p>Les expressions rationnelles sont des motifs utilisés pour correspondre à certaines combinaisons de caractères au sein de chaînes de caractères. En JavaScript, les expressions rationnelles sont également des objets. Ces motifs sont utilisés avec les méthodes {{jsxref("RegExp.exec", "exec")}} et {{jsxref("RegExp.test", "test")}} de {{jsxref("RegExp")}}, et avec les méthodes {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}} et {{jsxref("String.split", "split")}} de {{jsxref("String")}}. Ce chapitre explique comment utiliser les expressions rationnelles en JavaScript (aussi appelées expressions régulières ou « <em>RegExp</em> »).</p> +Les expressions rationnelles sont des motifs utilisés pour correspondre à certaines combinaisons de caractères au sein de chaînes de caractères. En JavaScript, les expressions rationnelles sont également des objets. Ces motifs sont utilisés avec les méthodes {{jsxref("RegExp.exec", "exec")}} et {{jsxref("RegExp.test", "test")}} de {{jsxref("RegExp")}}, et avec les méthodes {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}} et {{jsxref("String.split", "split")}} de {{jsxref("String")}}. Ce chapitre explique comment utiliser les expressions rationnelles en JavaScript (aussi appelées expressions régulières ou « _RegExp_ »). -<h2 id="Créer_une_expression_rationnelle">Créer une expression rationnelle</h2> +## Créer une expression rationnelle -<p>Il est possible de construire une expression rationnelle de deux façons :</p> +Il est possible de construire une expression rationnelle de deux façons : -<ul> - <li>Utiliser un littéral d'expression régulière, qui correspond à un motif contenu entre deux barres obliques, par exemple : - <pre class="brush: js notranslate">var re = /ab+c/; -</pre> +- Utiliser un littéral d'expression régulière, qui correspond à un motif contenu entre deux barres obliques, par exemple : - <p>Lorsque les littéraux d'expression régulière sont utilisés, l'expression est compilée lors du chargement du script. Il est préférable d'utiliser cette méthode lorsque l'expression régulière reste constante, afin d'avoir de meilleurs performances.</p> - </li> - <li>Appeler le constructeur de l'objet {{jsxref("RegExp")}}, par exemple : - <pre class="brush: js notranslate">var re = new RegExp("ab+c"); -</pre> + ```js + var re = /ab+c/; + ``` - <p>Avec cette méthode, l'expression rationnelle est compilée lors de l'exécution. On utilisera cette méthode lorsque le motif utilisé est variable ou provient d'une autre source (par exemple une interaction utilisateur).</p> - </li> -</ul> + Lorsque les littéraux d'expression régulière sont utilisés, l'expression est compilée lors du chargement du script. Il est préférable d'utiliser cette méthode lorsque l'expression régulière reste constante, afin d'avoir de meilleurs performances. -<h2 id="Écrire_une_expression_rationnelle">Écrire une expression rationnelle</h2> +- Appeler le constructeur de l'objet {{jsxref("RegExp")}}, par exemple : -<p>Le motif d'une expression rationnelle est composé de caractères simples (comme <code>/abc/</code>), ou de caractères simples et spéciaux, comme <code>/ab*c/</code> ou <code>/Chapitre (\d+)\.\d*/ </code>. Le dernier exemple utilise des parenthèses qui permettent d'avoir une « mémoire ». La correspondance avec le motif contenu entre parenthèses pourra être utilisée par la suite. Ceci est décrit avec <a href="#parentheses">ce paragraphe</a>.</p> + ```js + var re = new RegExp("ab+c"); + ``` -<h3 id="Utiliser_des_motifs_simples">Utiliser des motifs simples</h3> + Avec cette méthode, l'expression rationnelle est compilée lors de l'exécution. On utilisera cette méthode lorsque le motif utilisé est variable ou provient d'une autre source (par exemple une interaction utilisateur). -<p>Les motifs simples sont construits à partir de caractères pour lesquels on souhaite avoir une correspondance directe. Le motif <code>/des/</code> correspond lorsqu'on observe exactement les caractères 'des' ensemble et dans cet ordre précis. On pourrait utiliser ce motif et détecter une correspondance dans les chaînes suivantes : "J'ai vu des licornes ?" et "Sa description de licorne était superbe" car la chaîne de caractères 'des' y est présente (dans le mot description pour le second exemple). Il n'y aura pas de correspondance avec la chaîne de caractères "Toc toc" car 'des' n'est pas présente.</p> +## Écrire une expression rationnelle -<h3 id="Utiliser_des_caractères_spéciaux">Utiliser des caractères spéciaux</h3> +Le motif d'une expression rationnelle est composé de caractères simples (comme `/abc/`), ou de caractères simples et spéciaux, comme `/ab*c/` ou `/Chapitre (\d+)\.\d*/ `. Le dernier exemple utilise des parenthèses qui permettent d'avoir une « mémoire ». La correspondance avec le motif contenu entre parenthèses pourra être utilisée par la suite. Ceci est décrit avec [ce paragraphe](#parentheses). -<p>Lorsque le motif à trouver est plus complexe qu'une simple égalité (trouver tous les B, les blancs...), le motif devra contenir des caractères spéciaux. Ainsi, le motif <code>/ab*c/</code> correspond à toutes les combinaisons de caractères qui possèdent un seul 'a' suivi de zéro ou plusieurs 'b' (l'astérisque utilisée ici signifie que l'élément qui la précède doit être présent zéro ou plusieurs fois) qui sont immédiatement suivis d'un 'c'. Par exemple, la chaîne de caractère "cbbabbbbcdebc" correspond au motif avec la chaîne de caractères 'abbbbc'.</p> +### Utiliser des motifs simples -<p>Les pages suivantes décrivent en détail les caractères spéciaux qui peuvent être utilisés afin de composer une expression rationnelle.</p> +Les motifs simples sont construits à partir de caractères pour lesquels on souhaite avoir une correspondance directe. Le motif `/des/` correspond lorsqu'on observe exactement les caractères 'des' ensemble et dans cet ordre précis. On pourrait utiliser ce motif et détecter une correspondance dans les chaînes suivantes : "J'ai vu des licornes ?" et "Sa description de licorne était superbe" car la chaîne de caractères 'des' y est présente (dans le mot description pour le second exemple). Il n'y aura pas de correspondance avec la chaîne de caractères "Toc toc" car 'des' n'est pas présente. -<dl> - <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Assertions">Assertions</a></dt> - <dd>Une assertion caractérisant la façon dont la correspondance peut se produire (en recherchant un motif avant, après ou avec une expression conditionnelle).</dd> - <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites">Limites</a></dt> - <dd>Permet d'indiquer le début ou la fin d'une ligne ou d'un mot.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Classes_de_caractères">Classes de caractère</a></dt> - <dd>Les classes permettent de distinguer différents caractères selon différents groupes (par exemple les lettres et les chiffres).</dd> - <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles">Groupes et intervalles</a></dt> - <dd>Permet d'indiquer un groupe ou un intervalle de caractères.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Quantificateurs">Quantificateurs</a></dt> - <dd>Permet d'indiquer un nombre de caractères ou d'expressions qui doivent correspondre.</dd> - <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Unicode_Properties">Propriétés Unicode</a></dt> - <dd>Permet de distinguer les caractères en fonction de leurs caractéristiques Unicode (majuscule/minuscule, symbole mathématique, ponctuation).</dd> -</dl> +### Utiliser des caractères spéciaux -<h3 id="Échapper_des_caractères">Échapper des caractères</h3> +Lorsque le motif à trouver est plus complexe qu'une simple égalité (trouver tous les B, les blancs...), le motif devra contenir des caractères spéciaux. Ainsi, le motif `/ab*c/` correspond à toutes les combinaisons de caractères qui possèdent un seul 'a' suivi de zéro ou plusieurs 'b' (l'astérisque utilisée ici signifie que l'élément qui la précède doit être présent zéro ou plusieurs fois) qui sont immédiatement suivis d'un 'c'. Par exemple, la chaîne de caractère "cbbabbbbcdebc" correspond au motif avec la chaîne de caractères 'abbbbc'. -<p>SI on souhaite rechercher certains caractères dans une chaîne de caractères et que ceux-ci ont une signification spéciale lorsqu'ils font partie d'une expression rationnelle (ex. "*"), il faudra échapper ces caractères spéciaux en plaçant une barre oblique inversée (<em>backslash</em> "\") devant. Ainsi, si on souhaite trouver un "a" suivi d'un astérisque ("*") suivi d'un "b", on pourra composer l'expression rationnelle : <code>/a\*b/</code> où la barre oblique inversée échappe l'astérisque afin de lui enlever sa signification particulière.</p> +Les pages suivantes décrivent en détail les caractères spéciaux qui peuvent être utilisés afin de composer une expression rationnelle. -<p>De même si on écrit un littéral d'expression rationnelle et qu'on souhaite rechercher une barre oblique ("/") dans la chaîne cible, on pourra échapper ce caractère (sinon, il aura sa signification particulière aux expressions rationnelles et indiquera la fin du motif). Si on cherche la présence de "/exemple/" dans une chaîne de caractères, on pourra utiliser le littéral <code>/\/exemple\//</code>.</p> +- [Assertions](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Assertions) + - : Une assertion caractérisant la façon dont la correspondance peut se produire (en recherchant un motif avant, après ou avec une expression conditionnelle). +- [Limites](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites) + - : Permet d'indiquer le début ou la fin d'une ligne ou d'un mot. +- [Classes de caractère](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Classes_de_caractères) + - : Les classes permettent de distinguer différents caractères selon différents groupes (par exemple les lettres et les chiffres). +- [Groupes et intervalles](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles) + - : Permet d'indiquer un groupe ou un intervalle de caractères. +- [Quantificateurs](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Quantificateurs) + - : Permet d'indiquer un nombre de caractères ou d'expressions qui doivent correspondre. +- [Propriétés Unicode](/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Unicode_Properties) + - : Permet de distinguer les caractères en fonction de leurs caractéristiques Unicode (majuscule/minuscule, symbole mathématique, ponctuation). -<p>Il en va de même avec la barre oblique inversée (dont la signification spécifique est justement l'échappement) : si on veut rechercher la chaîne "C:\", on pourra utiliser le motif <code>/C:\\/</code> (la première barre oblique inversée sert à échapper la seconde).</p> +### Échapper des caractères -<p>Lorsqu'on utilise le constructeur {{jsxref("RegExp")}} avec une chaîne de caractères en paramètre (plutôt qu'un littéral), il faudra échapper la barre oblique inversée qui a un sens particulier dans les chaînes de caractères. Ainsi, le littéral <code>/a\*b/</code> et <code>new RegExp("a\\*b")</code> créeront la même expression (qui permet de chercher la lettre "a", suivie d'un astérisque, suivi de la lettre "b").</p> +SI on souhaite rechercher certains caractères dans une chaîne de caractères et que ceux-ci ont une signification spéciale lorsqu'ils font partie d'une expression rationnelle (ex. "\*"), il faudra échapper ces caractères spéciaux en plaçant une barre oblique inversée (_backslash_ "\\") devant. Ainsi, si on souhaite trouver un "a" suivi d'un astérisque ("\*") suivi d'un "b", on pourra composer l'expression rationnelle : `/a\*b/` où la barre oblique inversée échappe l'astérisque afin de lui enlever sa signification particulière. -<p>La tableau qui suit fournit une liste complète des caractères spéciaux pouvant être utilisés dans les expressions régulières ainsi que leur signification.</p> +De même si on écrit un littéral d'expression rationnelle et qu'on souhaite rechercher une barre oblique ("/") dans la chaîne cible, on pourra échapper ce caractère (sinon, il aura sa signification particulière aux expressions rationnelles et indiquera la fin du motif). Si on cherche la présence de "/exemple/" dans une chaîne de caractères, on pourra utiliser le littéral `/\/exemple\//`. + +Il en va de même avec la barre oblique inversée (dont la signification spécifique est justement l'échappement) : si on veut rechercher la chaîne "C:\\", on pourra utiliser le motif `/C:\\/` (la première barre oblique inversée sert à échapper la seconde). + +Lorsqu'on utilise le constructeur {{jsxref("RegExp")}} avec une chaîne de caractères en paramètre (plutôt qu'un littéral), il faudra échapper la barre oblique inversée qui a un sens particulier dans les chaînes de caractères. Ainsi, le littéral `/a\*b/` et `new RegExp("a\\*b")` créeront la même expression (qui permet de chercher la lettre "a", suivie d'un astérisque, suivi de la lettre "b"). + +La tableau qui suit fournit une liste complète des caractères spéciaux pouvant être utilisés dans les expressions régulières ainsi que leur signification. <table class="standard-table"> - <caption>Caractères spéciaux utilisables pour les expressions rationnelles.</caption> - <thead> - <tr> - <th scope="col">Caractère</th> - <th scope="col">Signification</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>\</code></td> - <td> - <p>Correspond selon les règles suivantes :<br> - <br> - Une barre oblique inversée (<em>backslash</em>) précédant un caractère non spécial indique que le caractère qui suit est spécial et qu'il ne doit pas être interprété directement. Ainsi, un '<code>b</code>', sans <code>\</code> avant, correspondra pour les 'b' minuscules quel que soit leur position. En revanche '<code>\b</code>' ne correspondra à aucun caractère mais indique <a href="#special-word-boundary">un caractère de fin de mot</a>.<br> - <br> - Un <em>backslash</em> précédant un caractère spécial indique que le caractère qui suit doit être interprété littéralement (et non pas comme un caractère spécial). Ainsi, le motif <code>/a*/</code> utilise le caractère spécial '<code>*</code>' pour correspondre à 0 ou plusieurs 'a'. Le motif <code>/a\*/</code>, au contraire, rend '<code>*</code>' non-spécial pour correspondre aux chaînes de caractères qui comportent la lettre a et une astérisque, comme 'a*'.<br> - <br> - Il ne faut pas oublier d'échapper le caractère <code>\</code> car lui-même est un caractère d'échappement dans les chaînes de caractères. Cela est utile lorsqu'on utilise la notation RegExp("motif").</p> - </td> - </tr> - <tr> - <td><code>^</code></td> - <td>Correspond au début la séquence. Si le marqueur (<em>flag</em>) de lignes multiples vaut <code>true</code>, il correspondra également immédiatement après un caractère de saut de ligne.<br> - <br> - Ainsi, <code>/^A/</code> ne correspond pas au 'A' de "un A", mais correspond au 'A' de "Arceau".<br> - <br> - Le caractère '<code>^</code>' possède un sens différent lorsqu'il est utilisé dans un motif d'ensemble de caractères. Voir les <a href="#special-negated-character-set">compléments sur les ensembles de caractères </a>pour plus de détails et d'exemples.</td> - </tr> - <tr> - <td><code>$</code></td> - <td> - <p>Correspond à la fin de la séquence. Si le marqueur (<em>flag</em>) de lignes multiples vaut true, il correspondra également immédiatement avant un caractère de saut de ligne.</p> - - <p>Ainsi, <code>/t$/</code> ne correspond pas au 't' de "printemps", mais correspond au 't' de "aliment".</p> - </td> - </tr> - <tr> - <td><code>*</code></td> - <td> - <p>Correspond à l'expression précédente qui est répétée 0 ou plusieurs fois. Équivalent à <code>{0,}</code></p> - - <p>Ainsi, <code>/bo*/</code> correspond à 'boo' dans "Un booléen" et à 'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin".</p> - </td> - </tr> - <tr> - <td><code>+</code></td> - <td> - <p>Correspond à l'expression précédente qui est répétée une ou plusieurs fois. C'est équivalent à <code>{1,}</code>.</p> - - <p>Ainsi, <code>/a+/</code> correspond au 'a' dans "maison" et à tous les 'a' dans "maaaaaaison" mais ne correspond à rien dans "mission".</p> - </td> - </tr> - <tr> - <td><code>?</code></td> - <td>Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à <code>{0,1}</code>.<br> - <br> - Ainsi, <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".<br> - <br> - S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123". Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait correspondre "1".<br> - <br> - Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau.</td> - </tr> - <tr> - <td><code>.</code></td> - <td> - <p>Par défaut, (Le point) correspond à n'importe quel caractère excepté un caractère de saut de ligne.</p> - - <p>Ainsi, <code>/.n/</code> correspond à 'un' et 'en' dans "Un baobab nain en cours de croissance" mais pas à 'nain'.</p> - - <p>Si le marqueur <code>s</code> (<em>dotAll</em>) est utilisé, le point correspondra également aux caractères de saut de ligne.</p> - </td> - </tr> - <tr> - <td><code>(x)</code></td> - <td> - <p>Correspond à 'x' et garde la correspondance en mémoire. Les parenthèses permettent de <em>capturer </em>l'expression dans un « groupe ».<br> - <br> - Les '<code>(toto)</code>' et '<code>(truc)</code>', dans le motif <code>/(toto) (truc) \1 \2/</code> correspondent et gardent en mémoire les deux premiers mots de la chaîne de caractère "toto truc toto truc". Les <code>\1</code> et <code>\2</code> du motif correspondent respectivement à la première et à la deuxième correspondances pour les sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un remplacement, on utilisera <code>$1</code> et <code>$2</code> pour faire référence au premier et second groupe et <code>$</code><code>n </code>pour faire référence au n-ième groupe capturé (ex. <code>('toto truc'.replace(/(...) (...)/, '$2 $1').</code> <code>$&</code> fera référence à la chaîne entière).</p> - </td> - </tr> - <tr> - <td><code>(?:x)</code></td> - <td>Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les parenthèses ne <em>capturent</em> pas l'expression et permettent d'utiliser des sous-expressions d'une expression régulière pour travailler plus finement. L'expression <code>/(?:zoo){1,2}/</code> sans parenthèses non-capturantes <code>les caractères {1,2}</code> ne s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses capturantes, <code>{1,2}</code> s'applique au mot entier 'zoo'. Pour plus d'informations, voir <a href="#parentheses">Utiliser les parenthèses</a> ci-après.</td> - </tr> - <tr> - <td><code>x(?=y)</code></td> - <td> - <p>Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un test de succession (<em>lookahead</em>).</p> - - <p>Ainsi, <code>/Jack(?=Sparrow)/</code> correspond à 'Jack' seulement s'il est suivi de 'Sparrow'. <code>/Jack(?=Sparrow|Bauer)/</code> correspond à 'Jack' seulement s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni 'Bauer' ne feront partie de la correspondance.</p> - </td> - </tr> - <tr> - <td><code>x(?!y)</code></td> - <td> - <p>Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.</p> - - <p>Ainsi, <code>/\d+(?!\.)/</code> correspond à un nombre qui n'est pas suivi par un point, cette expression utilisée avec <code>la chaîne 3.141</code> correspondra pour '141' mais pas pour '3.141'.</p> - </td> - </tr> - <tr> - <td><code>(?<=<em>y</em>)<em>x</em></code></td> - <td> - <p>Correspond à <code><em>x</em></code> seulement si <code><em>x</em></code> est précédé par <code><em>y</em></code>. C'est ce qu'on appelle une recherche arrière (<em>lookbehind</em>).</p> - - <p>Ainsi /<code>(?<=Jack)Sprat/</code> correspond à "Sprat" seulement s'il est précédé de "Jack".<br> - <code>/(?<=Jack|Tom)Sprat/</code> correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".<br> - Toutefois, "Jack" et "Tom" ne feront pas partie de la correspondance.</p> - </td> - </tr> - <tr> - <td><code>(?<!<em>y</em>)<em>x</em></code></td> - <td> - <p>Correspond à <code><em>x</em></code> uniquement si <code><em>x</em></code> n'est pas précédé par <code><em>y</em></code> (parfois appelée en anglais <em>negated lookbehind</em>)<em>.</em></p> - - <p>Ainsi, <code>/(?<!-)\d+/</code> correspondra à un nombre seulement si celui-ci n'est pas précédé d'un signe moins.<br> - <code>/(?<!-)\d+/.exec('3')</code> cible "3".<br> - <code>/(?<!-)\d+/.exec('-3')</code> ne trouve aucune correspondance car le nombre est précédé d'un signe.</p> - </td> - </tr> - <tr> - <td><code>x|y</code></td> - <td> - <p>Correspond à 'x' ou 'y'.</p> - - <p>Ainsi, <code>/vert|rouge/</code> correspond à 'vert' dans "feu vert" et à 'rouge' dans "feu rouge".</p> - </td> - </tr> - <tr> - <td><code>{n}</code></td> - <td>Correspond pour exactement n occurences de l'expression précédente. N doit être un entier positif.<br> - <br> - Ainsi, <code>/a{2}/</code> ne correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de "Mozilaa" et aux deux premiers 'a' de "Mozillaaa".</td> - </tr> - <tr> - <td><code>{n,}</code></td> - <td> - <p>Correspond lorsqu'il y a au moins <code>n</code> occurences de l'expression précédente. <code>n</code> doit être un entier positif.</p> - - <p>Par exemple <code>/a{2,}/</code> correspondra à <code>"aa"</code> ou à <code>"aaa"</code> ou encore à <code>"aaaa"</code> mais pas à <code>"a"</code>.</p> - </td> - </tr> - <tr> - <td><code>{n,m}</code></td> - <td> - <p>Lorsque <code>n</code> et <code>m</code> sont des entiers positifs, cela correspond à au moins <code>n</code> occurences de l'expression précédente et à au plus <code>m</code> occurrences. Lorsque <code>m</code> n'est pas utilisé, la valeur par défaut correspondante sera l'infini.</p> - - <p>Ainsi, <code>/a{1,3}/</code> ne correspond à rien dans "Mozill", au 'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus de 'a' dans la chaîne de caractères.</p> - </td> - </tr> - <tr> - <td><code>[xyz]</code></td> - <td>Un ensemble de caractère. Ce type de motif correspond pour n'importe quel caractètre présent entre les crochets, y compris les <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement">séquences d'échappement</a>. Les caractères spéciaux comme le point (.) et l'astérisque ne sont pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas besoin d'être échappés. Il est possible de donner un ensemble sur un intervalle de caractères en utilisant un tiret (-), comme le montre l'exemple qui suit.<br> - <br> - Le motif <code>[a-d]</code>, aura les mêmes correspondances que <code>[abcd]</code>, correspondant au 'b' de "bulle" et au 'c' de "ciel". Les motifis <code>/[a-z.]+/ </code>et <code>/[\w.]+/</code> correspondront pour la chaîne entirère : "Adre.ss.e".</td> - </tr> - <tr> - <td><code>[^xyz]</code></td> - <td> - <p>Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui n'est pas compris entre crochets. Il est possible de fournir un intervalle de caractères en utilisant un tiret (-). Les autres règles qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent également ici.</p> - - <p>Par exemple, <code>[^abc]</code> est équivalent à <code>[^a-c]</code>. Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel".</p> - </td> - </tr> - <tr> - <td><code>[\b]</code></td> - <td>Correspond pour un retour arrière (U+0008). (À ne pas confondre avec <code>\b</code>.)</td> - </tr> - <tr> - <td><code>\b</code></td> - <td> - <p>Correspond à la position d'uneAfter the <em>limite de mot</em>. Une limite de mot correspond à la position où un caractère d'un mot n'est pas suivi ou précédé d'un autre caractère de mot. Il faut savoir que la limite correspondante n'est pas incluse dans le résultat. Autrement dit, la longueur d'une telle correspondance est nulle. (À ne pas confondre avec <code>[\b]</code>.)</p> - - <p>Exemples :<br> - <code>/\bm/</code> correspond au 'm' dans "mignon" ;<br> - <code>/no\b/</code> ne correspond pas au 'no' de "mignon" car 'no' est suivi de 'n' qui n'est pas un caractère de limite de mot;<br> - <code>/non\b/</code> correspond au 'non' de "mignon" car 'non' représente la fin de la chaîne de caractère et n'est donc pas suivi par un caractère de mot.<br> - <code>/\w\b\w/</code> ne correspondra jamais à quoi que ce soit car un caractère de mot ne peut pas être suivi à la fois par un caractère de mot et un caractère n'étant pas un caractère de mot.</p> - - <div class="note"> - <p><strong>Note :</strong> Le moteur d'expressions rationnelles JavaScript définit <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">un ensemble de caractères spécifiques</a> qui doivent être considérés comme des caractères de mot. Tout caractère qui n'est pas dans cet ensemble est considéré comme une limite de mot. Cet ensemble de caractères est relativement limité car constitué uniquement des caractères de l'alphabet romain en minuscules et en majuscules, des chiffres décimaux et du tiret-bas (<em>underscore</em>). Les autres caractères, comme les caractères accentués (é ou ü par exemple), sont donc considérés comme des limites de mots.</p> - </div> - </td> - </tr> - <tr> - <td><code>\B</code></td> - <td> - <p>Correspond à une "non-<em>limite de mot</em>". Cela correspond pour les cas suivants :</p> - - <ul> - <li>Avant le premier caractère d'une chaîne de caractères</li> - <li>Après le dernier caractère d'une chaîne de caractères</li> - <li>Entre deux caractères de mot</li> - <li>Entre deux caractères qui ne sont pas des caractères de mot</li> - <li>Avec la chaîne vide.</li> - </ul> - - <p>Ainsi, <code>/\B../</code> correspond au 'oo' de "football" (et <code>/e\B./</code> correspond au 'er' dans "une mer "</p> - </td> - </tr> - <tr> - <td><code>\c<em>X</em></code></td> - <td> - <p>Étant donné un caractère <em>X</em> compris entre A et Z, cela correspond au caractère de contrôle dans une chaîne de caractères.</p> - - <p>Ainsi, <code>/\cM/</code> correspond au caractère de contrôle M (U+000D) d'une chaîne de caractère.</p> - </td> - </tr> - <tr> - <td><code>\d</code></td> - <td> - <p>Correspond à un chiffre et est équivalent à <code>[0-9]</code>.</p> - - <p>Ainsi, <code>/\d/</code> ou <code>/[0-9]/</code> correspond à '2' dans "H2O est la molécule de l'eau".</p> - </td> - </tr> - <tr> - <td><code>\D</code></td> - <td> - <p>Correspond à tout caractère qui n'est pas un chiffre et est équivalent à<code> [^0-9]</code>.</p> - - <p>Ainsi, <code>/\D/</code> ou <code>/[^0-9]/</code> correspond à 'H' dans "H2O est la molécule de l'eau".</p> - </td> - </tr> - <tr> - <td><code>\f</code></td> - <td>Correspond à un saut de page (U+000C).</td> - </tr> - <tr> - <td><code>\n</code></td> - <td>Correspond à un saut de ligne (U+000A).</td> - </tr> - <tr> - <td><code>\r</code></td> - <td>Correspond à un retour chariot (U+000D).</td> - </tr> - <tr> - <td><code>\s</code></td> - <td> - <p>Correspond à un blanc (cela comprend les espace, tabulation, saut de ligne ou saut de page). C'est équivalent à <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> - - <p>Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto".</p> - </td> - </tr> - <tr> - <td><code>\S</code></td> - <td> - <p>Correspond à un caractère qui n'est pas un blanc. C'est équivalent à <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> - - <p>Ainsi, <code>/\S\w*/</code> correspond à 'truc' dans "truc toto".</p> - </td> - </tr> - <tr> - <td><code>\t</code></td> - <td>Correspond à une tabulation (U+0009).</td> - </tr> - <tr> - <td><code>\v</code></td> - <td>Correspond à une tabulation verticale (U+000B).</td> - </tr> - <tr> - <td><code>\w</code></td> - <td> - <p>Correspond à n'importe quel caractère alphanumérique, y compris le tiret bas. C'est équivalent à <code>[A-Za-z0-9_]</code>.</p> - - <p>Ainsi, <code>/\w/</code> correspond à 'l' dans "licorne", à '5' dans "5,28€", et à '3' dans "3D."</p> - </td> - </tr> - <tr> - <td><code>\W</code></td> - <td> - <p>Correspond à n'importe quel caractère n'étant pas un caractère de mot. Cela est équivalent à <code>[^A-Za-z0-9_]</code>.</p> - - <p>Ainsi, <code>/\W/</code> ou <code>/[^A-Za-z0-9_]/</code> correspond à '%' dans "50%."</p> - </td> - </tr> - <tr> - <td><code>\n</code></td> - <td> - <p>Soit <em>n</em> un entier strictement positif, cela fait référence au groupe de la n-ième expression entre parenthèses (en comptant les parenthèses ouvrantes).</p> - - <p>Ainsi, <code>/pomme(,)\spoire\1/</code> correspond à 'pomme, poire,' dans "pomme, poire, cerise, pêche".</p> - </td> - </tr> - <tr> - <td><code>\0</code></td> - <td>Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un autre chiffre car <code>\0<chiffres></code> est une <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement">séquence d'échappement</a> pour les nombres en notation octale (si besoin d'utiliser un chiffre ensuite, on pourra utiliser la forme <code>\x00</code>, cf. ci-après).</td> - </tr> - <tr> - <td><code>\xhh</code></td> - <td>Correspond au caractère dont le code hexadécimal est hh (deux chiffres hexadécimaux).</td> - </tr> - <tr> - <td><code>\uhhhh</code></td> - <td>Correspond au caractère dont le code est hhhh (quatre chiffres hexadécimaux).</td> - </tr> - <tr> - <td><code>\u{hhhh}</code></td> - <td>(Uniquement actif quand le marqueur <code>u</code> est activé) Correspond au caractère dont la valeur Unicode est <code>hhhh</code> (en chiffre hexadécimaux).</td> - </tr> - </tbody> + <caption> + Caractères spéciaux utilisables pour les expressions rationnelles. + </caption> + <thead> + <tr> + <th scope="col">Caractère</th> + <th scope="col">Signification</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\</code></td> + <td> + <p> + Correspond selon les règles suivantes :<br /><br />Une barre oblique + inversée (<em>backslash</em>) précédant un caractère non spécial + indique que le caractère qui suit est spécial et qu'il ne doit pas + être interprété directement. Ainsi, un '<code>b</code>', sans + <code>\</code> avant, correspondra pour les 'b' minuscules quel que + soit leur position. En revanche '<code>\b</code>' ne correspondra à + aucun caractère mais indique + <a href="#special-word-boundary">un caractère de fin de mot</a + >.<br /><br />Un <em>backslash</em> précédant un caractère spécial + indique que le caractère qui suit doit être interprété littéralement + (et non pas comme un caractère spécial). Ainsi, le motif + <code>/a*/</code> utilise le caractère spécial '<code>*</code>' pour + correspondre à 0 ou plusieurs 'a'. Le motif <code>/a\*/</code>, au + contraire, rend '<code>*</code>' non-spécial pour correspondre aux + chaînes de caractères qui comportent la lettre a et une astérisque, + comme 'a*'.<br /><br />Il ne faut pas oublier d'échapper le caractère + <code>\</code> car lui-même est un caractère d'échappement dans les + chaînes de caractères. Cela est utile lorsqu'on utilise la notation + RegExp("motif"). + </p> + </td> + </tr> + <tr> + <td><code>^</code></td> + <td> + Correspond au début la séquence. Si le marqueur (<em>flag</em>) de + lignes multiples vaut <code>true</code>, il correspondra également + immédiatement après un caractère de saut de ligne.<br /><br />Ainsi, + <code>/^A/</code> ne correspond pas au 'A' de "un A", mais correspond au + 'A' de "Arceau".<br /><br />Le caractère '<code>^</code>' possède un + sens différent lorsqu'il est utilisé dans un motif d'ensemble de + caractères. Voir les + <a href="#special-negated-character-set" + >compléments sur les ensembles de caractères </a + >pour plus de détails et d'exemples. + </td> + </tr> + <tr> + <td><code>$</code></td> + <td> + <p> + Correspond à la fin de la séquence. Si le marqueur (<em>flag</em>) de + lignes multiples vaut true, il correspondra également immédiatement + avant un caractère de saut de ligne. + </p> + <p> + Ainsi, <code>/t$/</code> ne correspond pas au 't' de "printemps", mais + correspond au 't' de "aliment". + </p> + </td> + </tr> + <tr> + <td><code>*</code></td> + <td> + <p> + Correspond à l'expression précédente qui est répétée 0 ou plusieurs + fois. Équivalent à <code>{0,}</code> + </p> + <p> + Ainsi, <code>/bo*/</code> correspond à 'boo' dans "Un booléen" et à + 'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin". + </p> + </td> + </tr> + <tr> + <td><code>+</code></td> + <td> + <p> + Correspond à l'expression précédente qui est répétée une ou plusieurs + fois. C'est équivalent à <code>{1,}</code>. + </p> + <p> + Ainsi, <code>/a+/</code> correspond au 'a' dans "maison" et à tous les + 'a' dans "maaaaaaison" mais ne correspond à rien dans "mission". + </p> + </td> + </tr> + <tr> + <td><code>?</code></td> + <td> + Correspond à l'expression précédente qui est présente une fois ou pas du + tout. C'est équivalent à <code>{0,1}</code>.<br /><br />Ainsi, + <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans + "angle" mais aussi au 'l' dans "Oslo".<br /><br />S'il est utilisé + immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend + le quantificateur moins « gourmand » auquel cas le moins de caractères + correspond (le comportement par défaut, « gourmand », permettant de + faire correspondre le plus de caractères possible). Par exemple + <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123". + Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait + correspondre "1".<br /><br />Ce symbole est également utilisé dans les + tests de présence autour de l'expression, décrits par les lignes + <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau. + </td> + </tr> + <tr> + <td><code>.</code></td> + <td> + <p> + Par défaut, (Le point) correspond à n'importe quel caractère excepté + un caractère de saut de ligne. + </p> + <p> + Ainsi, <code>/.n/</code> correspond à 'un' et 'en' dans "Un baobab + nain en cours de croissance" mais pas à 'nain'. + </p> + <p> + Si le marqueur <code>s</code> (<em>dotAll</em>) est utilisé, le point + correspondra également aux caractères de saut de ligne. + </p> + </td> + </tr> + <tr> + <td><code>(x)</code></td> + <td> + <p> + Correspond à 'x' et garde la correspondance en mémoire. Les + parenthèses permettent de <em>capturer </em>l'expression dans un « + groupe ».<br /><br />Les '<code>(toto)</code>' et + '<code>(truc)</code>', dans le motif + <code>/(toto) (truc) \1 \2/</code> correspondent et gardent en mémoire + les deux premiers mots de la chaîne de caractère "toto truc toto + truc". Les <code>\1</code> et <code>\2</code> du motif correspondent + respectivement à la première et à la deuxième correspondances pour les + sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un + remplacement, on utilisera <code>$1</code> et <code>$2</code> pour + faire référence au premier et second groupe et <code>$</code + ><code>n </code>pour faire référence au n-ième groupe capturé (ex. + <code>('toto truc'.replace(/(...) (...)/, '$2 $1').</code> + <code>$&</code> fera référence à la chaîne entière). + </p> + </td> + </tr> + <tr> + <td><code>(?:x)</code></td> + <td> + Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les + parenthèses ne <em>capturent</em> pas l'expression et permettent + d'utiliser des sous-expressions d'une expression régulière pour + travailler plus finement. L'expression <code>/(?:zoo){1,2}/</code> sans + parenthèses non-capturantes <code>les caractères {1,2}</code> ne + s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses + capturantes, <code>{1,2}</code> s'applique au mot entier 'zoo'. Pour + plus d'informations, voir + <a href="#parentheses">Utiliser les parenthèses</a> ci-après. + </td> + </tr> + <tr> + <td><code>x(?=y)</code></td> + <td> + <p> + Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un + test de succession (<em>lookahead</em>). + </p> + <p> + Ainsi, <code>/Jack(?=Sparrow)/</code> correspond à 'Jack' seulement + s'il est suivi de 'Sparrow'. + <code>/Jack(?=Sparrow|Bauer)/</code> correspond à 'Jack' seulement + s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni + 'Bauer' ne feront partie de la correspondance. + </p> + </td> + </tr> + <tr> + <td><code>x(?!y)</code></td> + <td> + <p>Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.</p> + <p> + Ainsi, <code>/\d+(?!\.)/</code> correspond à un nombre qui n'est pas + suivi par un point, cette expression utilisée avec + <code>la chaîne 3.141</code> correspondra pour '141' mais pas pour + '3.141'. + </p> + </td> + </tr> + <tr> + <td> + <code>(?<=<em>y</em>)<em>x</em></code> + </td> + <td> + <p> + Correspond à <code><em>x</em></code> seulement si + <code><em>x</em></code> est précédé par <code><em>y</em></code + >. C'est ce qu'on appelle une recherche arrière (<em>lookbehind</em>). + </p> + <p> + Ainsi /<code>(?<=Jack)Sprat/</code> correspond à "Sprat" + seulement s'il est précédé de "Jack".<br /><code + >/(?<=Jack|Tom)Sprat/</code + > + correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".<br />Toutefois, + "Jack" et "Tom" ne feront pas partie de la correspondance. + </p> + </td> + </tr> + <tr> + <td> + <code>(?<!<em>y</em>)<em>x</em></code> + </td> + <td> + <p> + Correspond à <code><em>x</em></code> uniquement si + <code><em>x</em></code> n'est pas précédé par + <code><em>y</em></code> (parfois appelée en anglais + <em>negated lookbehind</em>)<em>.</em> + </p> + <p> + Ainsi, <code>/(?<!-)\d+/</code> correspondra à un nombre + seulement si celui-ci n'est pas précédé d'un signe moins.<br /><code + >/(?<!-)\d+/.exec('3')</code + > + cible "3".<br /><code>/(?<!-)\d+/.exec('-3')</code> ne trouve + aucune correspondance car le nombre est précédé d'un signe. + </p> + </td> + </tr> + <tr> + <td><code>x|y</code></td> + <td> + <p>Correspond à 'x' ou 'y'.</p> + <p> + Ainsi, <code>/vert|rouge/</code> correspond à 'vert' dans "feu vert" + et à 'rouge' dans "feu rouge". + </p> + </td> + </tr> + <tr> + <td><code>{n}</code></td> + <td> + Correspond pour exactement n occurences de l'expression précédente. N + doit être un entier positif.<br /><br />Ainsi, <code>/a{2}/</code> ne + correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de + "Mozilaa" et aux deux premiers 'a' de "Mozillaaa". + </td> + </tr> + <tr> + <td><code>{n,}</code></td> + <td> + <p> + Correspond lorsqu'il y a au moins <code>n</code> occurences de + l'expression précédente. <code>n</code> doit être un entier positif. + </p> + <p> + Par exemple <code>/a{2,}/</code> correspondra à <code>"aa"</code> ou à + <code>"aaa"</code> ou encore à <code>"aaaa"</code> mais pas à + <code>"a"</code>. + </p> + </td> + </tr> + <tr> + <td><code>{n,m}</code></td> + <td> + <p> + Lorsque <code>n</code> et <code>m</code> sont des entiers positifs, + cela correspond à au moins <code>n</code> occurences de l'expression + précédente et à au plus <code>m</code> occurrences. Lorsque + <code>m</code> n'est pas utilisé, la valeur par défaut correspondante + sera l'infini. + </p> + <p> + Ainsi, <code>/a{1,3}/</code> ne correspond à rien dans "Mozill", au + 'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois + premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter + que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus + de 'a' dans la chaîne de caractères. + </p> + </td> + </tr> + <tr> + <td><code>[xyz]</code></td> + <td> + Un ensemble de caractère. Ce type de motif correspond pour n'importe + quel caractètre présent entre les crochets, y compris les + <a + href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement" + >séquences d'échappement</a + >. Les caractères spéciaux comme le point (.) et l'astérisque ne sont + pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas + besoin d'être échappés. Il est possible de donner un ensemble sur un + intervalle de caractères en utilisant un tiret (-), comme le montre + l'exemple qui suit.<br /><br />Le motif <code>[a-d]</code>, aura les + mêmes correspondances que <code>[abcd]</code>, correspondant au 'b' de + "bulle" et au 'c' de "ciel". Les motifis <code>/[a-z.]+/ </code>et + <code>/[\w.]+/</code> correspondront pour la chaîne entirère : + "Adre.ss.e". + </td> + </tr> + <tr> + <td><code>[^xyz]</code></td> + <td> + <p> + Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui + n'est pas compris entre crochets. Il est possible de fournir un + intervalle de caractères en utilisant un tiret (-). Les autres règles + qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent + également ici. + </p> + <p> + Par exemple, <code>[^abc]</code> est équivalent à <code>[^a-c]</code>. + Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel". + </p> + </td> + </tr> + <tr> + <td><code>[\b]</code></td> + <td> + Correspond pour un retour arrière (U+0008). (À ne pas confondre avec + <code>\b</code>.) + </td> + </tr> + <tr> + <td><code>\b</code></td> + <td> + <p> + Correspond à la position d'uneAfter the <em>limite de mot</em>. Une + limite de mot correspond à la position où un caractère d'un mot n'est + pas suivi ou précédé d'un autre caractère de mot. Il faut savoir que + la limite correspondante n'est pas incluse dans le résultat. Autrement + dit, la longueur d'une telle correspondance est nulle. (À ne pas + confondre avec <code>[\b]</code>.) + </p> + <p> + Exemples :<br /><code>/\bm/</code> correspond au 'm' dans "mignon" + ;<br /><code>/no\b/</code> ne correspond pas au 'no' de "mignon" car + 'no' est suivi de 'n' qui n'est pas un caractère de limite de mot;<br /><code + >/non\b/</code + > + correspond au 'non' de "mignon" car 'non' représente la fin de la + chaîne de caractère et n'est donc pas suivi par un caractère de + mot.<br /><code>/\w\b\w/</code> ne correspondra jamais à quoi que ce + soit car un caractère de mot ne peut pas être suivi à la fois par un + caractère de mot et un caractère n'étant pas un caractère de mot. + </p> + <div class="note"> + <p> + <strong>Note :</strong> Le moteur d'expressions rationnelles + JavaScript définit + <a + href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6" + >un ensemble de caractères spécifiques</a + > + qui doivent être considérés comme des caractères de mot. Tout + caractère qui n'est pas dans cet ensemble est considéré comme une + limite de mot. Cet ensemble de caractères est relativement limité + car constitué uniquement des caractères de l'alphabet romain en + minuscules et en majuscules, des chiffres décimaux et du tiret-bas + (<em>underscore</em>). Les autres caractères, comme les caractères + accentués (é ou ü par exemple), sont donc considérés comme des + limites de mots. + </p> + </div> + </td> + </tr> + <tr> + <td><code>\B</code></td> + <td> + <p> + Correspond à une "non-<em>limite de mot</em>". Cela correspond pour + les cas suivants : + </p> + <ul> + <li>Avant le premier caractère d'une chaîne de caractères</li> + <li>Après le dernier caractère d'une chaîne de caractères</li> + <li>Entre deux caractères de mot</li> + <li>Entre deux caractères qui ne sont pas des caractères de mot</li> + <li>Avec la chaîne vide.</li> + </ul> + <p> + Ainsi, <code>/\B../</code> correspond au 'oo' de "football" (et + <code>/e\B./</code> correspond au 'er' dans "une mer " + </p> + </td> + </tr> + <tr> + <td> + <code>\c<em>X</em></code> + </td> + <td> + <p> + Étant donné un caractère <em>X</em> compris entre A et Z, cela + correspond au caractère de contrôle dans une chaîne de caractères. + </p> + <p> + Ainsi, <code>/\cM/</code> correspond au caractère de contrôle M + (U+000D) d'une chaîne de caractère. + </p> + </td> + </tr> + <tr> + <td><code>\d</code></td> + <td> + <p>Correspond à un chiffre et est équivalent à <code>[0-9]</code>.</p> + <p> + Ainsi, <code>/\d/</code> ou <code>/[0-9]/</code> correspond à '2' dans + "H2O est la molécule de l'eau". + </p> + </td> + </tr> + <tr> + <td><code>\D</code></td> + <td> + <p> + Correspond à tout caractère qui n'est pas un chiffre et est équivalent + à<code> [^0-9]</code>. + </p> + <p> + Ainsi, <code>/\D/</code> ou <code>/[^0-9]/</code> correspond à 'H' + dans "H2O est la molécule de l'eau". + </p> + </td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Correspond à un saut de page (U+000C).</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Correspond à un saut de ligne (U+000A).</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Correspond à un retour chariot (U+000D).</td> + </tr> + <tr> + <td><code>\s</code></td> + <td> + <p> + Correspond à un blanc (cela comprend les espace, tabulation, saut de + ligne ou saut de page). C'est équivalent à + <code + >[ + \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code + >. + </p> + <p> + Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto". + </p> + </td> + </tr> + <tr> + <td><code>\S</code></td> + <td> + <p> + Correspond à un caractère qui n'est pas un blanc. C'est équivalent à + <code + >[^ + \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code + >. + </p> + <p>Ainsi, <code>/\S\w*/</code> correspond à 'truc' dans "truc toto".</p> + </td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Correspond à une tabulation (U+0009).</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Correspond à une tabulation verticale (U+000B).</td> + </tr> + <tr> + <td><code>\w</code></td> + <td> + <p> + Correspond à n'importe quel caractère alphanumérique, y compris le + tiret bas. C'est équivalent à <code>[A-Za-z0-9_]</code>. + </p> + <p> + Ainsi, <code>/\w/</code> correspond à 'l' dans "licorne", à '5' dans + "5,28€", et à '3' dans "3D." + </p> + </td> + </tr> + <tr> + <td><code>\W</code></td> + <td> + <p> + Correspond à n'importe quel caractère n'étant pas un caractère de mot. + Cela est équivalent à <code>[^A-Za-z0-9_]</code>. + </p> + <p> + Ainsi, <code>/\W/</code> ou <code>/[^A-Za-z0-9_]/</code> correspond à + '%' dans "50%." + </p> + </td> + </tr> + <tr> + <td><code>\n</code></td> + <td> + <p> + Soit <em>n</em> un entier strictement positif, cela fait référence au + groupe de la n-ième expression entre parenthèses (en comptant les + parenthèses ouvrantes). + </p> + <p> + Ainsi, <code>/pomme(,)\spoire\1/</code> correspond à 'pomme, poire,' + dans "pomme, poire, cerise, pêche". + </p> + </td> + </tr> + <tr> + <td><code>\0</code></td> + <td> + Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un + autre chiffre car <code>\0<chiffres></code> est une + <a + href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement" + >séquence d'échappement</a + > + pour les nombres en notation octale (si besoin d'utiliser un chiffre + ensuite, on pourra utiliser la forme <code>\x00</code>, cf. ci-après). + </td> + </tr> + <tr> + <td><code>\xhh</code></td> + <td> + Correspond au caractère dont le code hexadécimal est hh (deux chiffres + hexadécimaux). + </td> + </tr> + <tr> + <td><code>\uhhhh</code></td> + <td> + Correspond au caractère dont le code est hhhh (quatre chiffres + hexadécimaux). + </td> + </tr> + <tr> + <td><code>\u{hhhh}</code></td> + <td> + (Uniquement actif quand le marqueur <code>u</code> est activé) + Correspond au caractère dont la valeur Unicode est <code>hhhh</code> (en + chiffre hexadécimaux). + </td> + </tr> + </tbody> </table> -<p>Afin d'échapper les informations saisies par l'utilisateur et de traîter les chaînes de caractères pour les utiliser au sein d'un expression régulière correspondante, il est possible d'utiliser le remplacement suivant :</p> +Afin d'échapper les informations saisies par l'utilisateur et de traîter les chaînes de caractères pour les utiliser au sein d'un expression régulière correspondante, il est possible d'utiliser le remplacement suivant : -<pre class="brush: js notranslate">function escapeRegExp(string){ - // $& correspond à la chaîne correspondante +```js +function escapeRegExp(string){ + // $& correspond à la chaîne correspondante // dans son intégralité - return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); -}</pre> + return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); +} +``` -<p>Le marqueur <code>g</code> situé en fin d'expression permet d'effectuer une recherche globale, qui parcoure toute la chaîne et renvoie l'ensemble des correspondances trouvées (voir <a href="#recherches_flag">Utiliser les marqueurs</a> ci-après).</p> +Le marqueur `g` situé en fin d'expression permet d'effectuer une recherche globale, qui parcoure toute la chaîne et renvoie l'ensemble des correspondances trouvées (voir [Utiliser les marqueurs](#recherches_flag) ci-après). -<div class="note"> -<p><strong>Note :</strong> Voir la page sur la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace">String.replace</a></code> pour plus d'informations.</p> -</div> +> **Note :** Voir la page sur la méthode [`String.replace`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace) pour plus d'informations. -<h3 id="Utiliser_les_parenthèses">Utiliser les parenthèses</h3> +### Utiliser les parenthèses -<p>Les parenthèses encadrant une partie du motif de l'expression régulière peuvent être utilisées pour garder en mémoire les correspondances. Cela pourra être utile pour réutiliser la correspondance trouvée.</p> +Les parenthèses encadrant une partie du motif de l'expression régulière peuvent être utilisées pour garder en mémoire les correspondances. Cela pourra être utile pour réutiliser la correspondance trouvée. -<p>Ainsi, le motif <code>/Chapitre (\d+)\.\d*/</code> utilise des caractères échappés et spéciaux et indique une partie du motif à garder en mémoire. Ce motif correspond aux caractères 'Chapitre ' suivi par un ou plusieurs caractères numériques (<code>\d</code> correspond à un chiffre et <code>+</code> indiquant que une série de 1 ou plusieurs chiffres), suivis par un point (qu'il est nécessaire d'échapper car c'est un caractère spécial, on utilise donc '\' pour indiquer qu'on souhaite reconnaître le caractère '.'), suivi par 0 ou plusieurs chiffres (<code>\d</code> correspondant à un chiffre et l'astérisque indiquant que le caractère est présent 0 ou plusieurs fois). Les parenthèses sont utilisées pour garder en mémoire les premiers chiffres correspondant.</p> +Ainsi, le motif `/Chapitre (\d+)\.\d*/` utilise des caractères échappés et spéciaux et indique une partie du motif à garder en mémoire. Ce motif correspond aux caractères 'Chapitre ' suivi par un ou plusieurs caractères numériques (`\d` correspond à un chiffre et `+` indiquant que une série de 1 ou plusieurs chiffres), suivis par un point (qu'il est nécessaire d'échapper car c'est un caractère spécial, on utilise donc '\\' pour indiquer qu'on souhaite reconnaître le caractère '.'), suivi par 0 ou plusieurs chiffres (`\d` correspondant à un chiffre et l'astérisque indiquant que le caractère est présent 0 ou plusieurs fois). Les parenthèses sont utilisées pour garder en mémoire les premiers chiffres correspondant. -<p>Ce motif est trouvé dans "Ouvrir le Chapitre 4.3 au paragraphe 6" et le chiffre '4' est gardé en mémoire. Le motif n'est pas trouvé dans "Chapitre 3 et 4", car la chaîne de caractères ne comporte pas de point après le '3'.</p> +Ce motif est trouvé dans "Ouvrir le Chapitre 4.3 au paragraphe 6" et le chiffre '4' est gardé en mémoire. Le motif n'est pas trouvé dans "Chapitre 3 et 4", car la chaîne de caractères ne comporte pas de point après le '3'. -<p>Pour qu'une partie de la chaîne de caractère corresponde mais que la correspondance ne soit pas gardée en mémoire, on pourra utiliser <code>?:</code>. Ainsi, <code>(?:\d+)</code> correspondra pour une séquence de chiffres (1 ou plusieurs chiffres) mais on ne gardera pas en mémoire les caractères correspondants.</p> +Pour qu'une partie de la chaîne de caractère corresponde mais que la correspondance ne soit pas gardée en mémoire, on pourra utiliser `?:`. Ainsi, `(?:\d+)` correspondra pour une séquence de chiffres (1 ou plusieurs chiffres) mais on ne gardera pas en mémoire les caractères correspondants. -<h2 id="Utiliser_les_expressions_rationnelles">Utiliser les expressions rationnelles</h2> +## Utiliser les expressions rationnelles -<p>Les expresssions régulières sont utilisées avec les méthodes <code>test</code><code> </code>et<code> exec</code> de l'objet<code> RegExp</code> et avec les méthodes <code>match</code>, <code>replace</code>, <code>search</code>, et <code>split</code> de l'objet <code>String</code>. Ces méthodes sont expliquées en détail dans la <a href="/fr/docs/Web/JavaScript/Reference">Référence JavaScript</a>.</p> +Les expresssions régulières sont utilisées avec les méthodes ` test`` `et` exec` de l'objet` RegExp` et avec les méthodes `match`, `replace`, `search`, et `split` de l'objet `String`. Ces méthodes sont expliquées en détail dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). -<table class="standard-table"> - <caption>Méthodes utilisant les expressions régulières</caption> - <thead> - <tr> - <th scope="col">Méthode</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("RegExp.exec", "exec")}}</td> - <td>Une méthode de l'objet <code>RegExp</code> qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou <code>null</code> lorsqu'il n'y a pas de correspondance.</td> - </tr> - <tr> - <td>{{jsxref("RegExp.test", "test")}}</td> - <td>Une méthode de l'objet <code>RegExp</code> testant la présence d'une correspondance dans une chaîne de caractères. Elle renvoie true ou false.</td> - </tr> - <tr> - <td>{{jsxref("String.match", "match")}}</td> - <td>Une méthode de l'objet <code>String</code> qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou <code>null</code> lorsqu'il n'y a pas de correspondance.</td> - </tr> - <tr> - <td>{{jsxref("String.matchAll", "matchAll")}}</td> - <td>Une méthode de l'objet <code>String</code> qui renvoie un itérateur contenant l'ensemble des correspondances, y compris les groupes capturants.</td> - </tr> - <tr> - <td>{{jsxref("String.search", "search")}}</td> - <td>Une méthode de l'objet <code>String</code> qui teste la présence d'une correspondance dans une chaîne de correspondance. Elle renvoie la position de la correspondance ou -1 s'il n'y en a pas.</td> - </tr> - <tr> - <td>{{jsxref("String.replace", "replace")}}</td> - <td>Une méthode de l'objet <code>String</code> qui recherche une correspondance dans une chaîne de caractères et qui remplace la correspondance par une chaîne de substitution.</td> - </tr> - <tr> - <td>{{jsxref("String.split", "split")}}</td> - <td>Une méthode de l'objet <code>String</code> qui utilise une expression régulière ou une chaîne de caractères pour découper une chaîne de caractères en un tableau comprenant les fragments résultants.</td> - </tr> - </tbody> -</table> +| Méthode | Description | +| -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{jsxref("RegExp.exec", "exec")}} | Une méthode de l'objet `RegExp` qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou `null` lorsqu'il n'y a pas de correspondance. | +| {{jsxref("RegExp.test", "test")}} | Une méthode de l'objet `RegExp` testant la présence d'une correspondance dans une chaîne de caractères. Elle renvoie true ou false. | +| {{jsxref("String.match", "match")}} | Une méthode de l'objet `String` qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou `null` lorsqu'il n'y a pas de correspondance. | +| {{jsxref("String.matchAll", "matchAll")}} | Une méthode de l'objet `String` qui renvoie un itérateur contenant l'ensemble des correspondances, y compris les groupes capturants. | +| {{jsxref("String.search", "search")}} | Une méthode de l'objet `String` qui teste la présence d'une correspondance dans une chaîne de correspondance. Elle renvoie la position de la correspondance ou -1 s'il n'y en a pas. | +| {{jsxref("String.replace", "replace")}} | Une méthode de l'objet `String` qui recherche une correspondance dans une chaîne de caractères et qui remplace la correspondance par une chaîne de substitution. | +| {{jsxref("String.split", "split")}} | Une méthode de l'objet `String` qui utilise une expression régulière ou une chaîne de caractères pour découper une chaîne de caractères en un tableau comprenant les fragments résultants. | -<p>Pour savoir si un motif est présent au sein d'une chaîne de caractères, utiliser les méthodes<code> test</code> ou <code>search</code>. Pour obtenir plus d'informations (moins rapidement) on utilisera les méthodes <code>exec</code> ou <code>match</code>. Si on utilise <code>exec</code> ou <code>match</code> et qu'une correspondance est trouvée, ces méthodes renverront un tableau et mettront à jour des propriétés de l'objet global <code>RegExp</code> et aussi de l'instance de <code>RegExp</code> associée à l'expression rationnelle. Si aucune correspondance n'est trouvée, la méthode <code>exec</code> renverra <code>null</code> (qui est automatiquement converti à <code>false</code> lors d'un test conditionnel).</p> +Pour savoir si un motif est présent au sein d'une chaîne de caractères, utiliser les méthodes` test` ou `search`. Pour obtenir plus d'informations (moins rapidement) on utilisera les méthodes `exec` ou `match`. Si on utilise `exec` ou `match` et qu'une correspondance est trouvée, ces méthodes renverront un tableau et mettront à jour des propriétés de l'objet global `RegExp` et aussi de l'instance de `RegExp` associée à l'expression rationnelle. Si aucune correspondance n'est trouvée, la méthode `exec` renverra `null` (qui est automatiquement converti à `false` lors d'un test conditionnel). -<p>Dans l'exemple qui suit, le script utilise la méthode <code>exec</code> pour trouver une correspondance dans une chaîne de caractères.</p> +Dans l'exemple qui suit, le script utilise la méthode `exec` pour trouver une correspondance dans une chaîne de caractères. -<pre class="brush: js notranslate">var monExpressionReguliere = /d(b+)d/g; +```js +var monExpressionReguliere = /d(b+)d/g; var monTableau = monExpressionReguliere.exec("cdbbdbsbz"); -</pre> +``` -<p>S'il n'est pas nécessaire d'accéder aux propriétés de l'expression régulière, une autre façon de récupérer <code>monTableau</code> peut être :</p> +S'il n'est pas nécessaire d'accéder aux propriétés de l'expression régulière, une autre façon de récupérer `monTableau` peut être : -<pre class="brush: js notranslate">var monTableau = /d(b+)d/g.exec("cdbbdbsbz"); +```js +var monTableau = /d(b+)d/g.exec("cdbbdbsbz"); // équivalent à "cdbbdbsbz".match(/d(b+)d/g); -</pre> +``` -<p>Si on souhaite construire une expression régulière à partir d'une chaîne de caractères, on peut utiliser le script suivant :</p> +Si on souhaite construire une expression régulière à partir d'une chaîne de caractères, on peut utiliser le script suivant : -<pre class="brush: js notranslate">var monExpressionReguliere = new RegExp("d(b+)d", "g"); +```js +var monExpressionReguliere = new RegExp("d(b+)d", "g"); var monTableau = monExpressionReguliere.exec("cdbbdbsbz"); -</pre> +``` -<p>Avec ces scripts, on obtient bien une correspondance, la méthode renvoie un tableau et met à jour les propriétés listées dans le tableau qui suit.</p> +Avec ces scripts, on obtient bien une correspondance, la méthode renvoie un tableau et met à jour les propriétés listées dans le tableau qui suit. <table class="standard-table"> - <caption>Résultats dûs à l'exécution d'une expression rationnelle.</caption> - <thead> - <tr> - <th scope="col">Objet</th> - <th scope="col">Propriété ou indice</th> - <th scope="col">Description</th> - <th scope="col">Pour cet exemple</th> - </tr> - </thead> - <tbody> - <tr> - <td rowspan="4"><code>monTableau</code></td> - <td></td> - <td>La chaîne de caractères correspondante et les fragments de chaînes gardés en mémoire.</td> - <td><code>["dbbd", "bb"]</code></td> - </tr> - <tr> - <td><code>index</code></td> - <td>L'indice (débute à partir de 0) de la correspondance, compté dans la chaîne de caractère initiale.</td> - <td><code>1</code></td> - </tr> - <tr> - <td><code>input</code></td> - <td>La chaîne de caractères initiale.</td> - <td><code>"cdbbdbsbz"</code></td> - </tr> - <tr> - <td><code>[0]</code></td> - <td>Les derniers caractères qui correspondent.</td> - <td><code>"dbbd"</code></td> - </tr> - <tr> - <td rowspan="2"><code>monExpressionRégulière</code></td> - <td><code>lastIndex</code></td> - <td>L'indice auquel débuter la prochaine correspondance. (Cette propriété n'est utilisée que si l'expression régulière utilise l'option g, décrite dans « <a href="#recherches_flag">Effectuer des recherches avancées avec les marqueurs</a> ».</td> - <td><code>5</code></td> - </tr> - <tr> - <td><code>source</code></td> - <td>Le texte du motif, mis à jour à la création de l'expression régulière mais pas lors de son exécution.</td> - <td><code>"d(b+)d"</code></td> - </tr> - </tbody> + <caption> + Résultats dûs à l'exécution d'une expression rationnelle. + </caption> + <thead> + <tr> + <th scope="col">Objet</th> + <th scope="col">Propriété ou indice</th> + <th scope="col">Description</th> + <th scope="col">Pour cet exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="4"><code>monTableau</code></td> + <td></td> + <td> + La chaîne de caractères correspondante et les fragments de chaînes + gardés en mémoire. + </td> + <td><code>["dbbd", "bb"]</code></td> + </tr> + <tr> + <td><code>index</code></td> + <td> + L'indice (débute à partir de 0) de la correspondance, compté dans la + chaîne de caractère initiale. + </td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>input</code></td> + <td>La chaîne de caractères initiale.</td> + <td><code>"cdbbdbsbz"</code></td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Les derniers caractères qui correspondent.</td> + <td><code>"dbbd"</code></td> + </tr> + <tr> + <td rowspan="2"><code>monExpressionRégulière</code></td> + <td><code>lastIndex</code></td> + <td> + L'indice auquel débuter la prochaine correspondance. (Cette propriété + n'est utilisée que si l'expression régulière utilise l'option g, décrite + dans « + <a href="#recherches_flag" + >Effectuer des recherches avancées avec les marqueurs</a + > + ». + </td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>source</code></td> + <td> + Le texte du motif, mis à jour à la création de l'expression régulière + mais pas lors de son exécution. + </td> + <td><code>"d(b+)d"</code></td> + </tr> + </tbody> </table> -<p>Comme le montre la seconde formulation de cet exemple, il est possible d'utiliser une expression rationnelle, créée avec un objet initialisé sans l'affecter à une variable. Cela implique qu'à chaque utilisation, on aura une nouvelle expression régulière distincte et qu'on ne pourra pas, pour cette raison, accéder aux propriétés de l'expression régulière. Avec le script suivant :</p> +Comme le montre la seconde formulation de cet exemple, il est possible d'utiliser une expression rationnelle, créée avec un objet initialisé sans l'affecter à une variable. Cela implique qu'à chaque utilisation, on aura une nouvelle expression régulière distincte et qu'on ne pourra pas, pour cette raison, accéder aux propriétés de l'expression régulière. Avec le script suivant : -<pre class="brush: js notranslate">var monExpressionReguliere = /d(b+)d/g; +```js +var monExpressionReguliere = /d(b+)d/g; var monTableau = monExpressionReguliere.exec("cdbbdbsbz"); console.log("La valeur de lastIndex est " + monExpressionReguliere.lastIndex); // "La valeur de lastIndex est 5" -</pre> +``` -<p>Si le script utilisé est :</p> +Si le script utilisé est : -<pre class="brush: js notranslate">var monTableau = /d(b+)d/g.exec("cdbbdbsbz"); +```js +var monTableau = /d(b+)d/g.exec("cdbbdbsbz"); console.log("La valeur de lastIndex est " + /d(b+)d/g.lastIndex); // "La valeur de lastIndex est 0" -</pre> +``` -<p>Les occurences de <code>/d(b+)d/g</code> dans les deux instructions sont des objets différents. Leurs propriétés <code>lastIndex</code> respectives ont donc des valeurs différentes. Quand il est nécessaire d'accéder aux propriétés d'un objet décrivant une expression rationnelle, il faudra d'abord l'affecter à une variable.</p> +Les occurences de `/d(b+)d/g` dans les deux instructions sont des objets différents. Leurs propriétés `lastIndex` respectives ont donc des valeurs différentes. Quand il est nécessaire d'accéder aux propriétés d'un objet décrivant une expression rationnelle, il faudra d'abord l'affecter à une variable. -<h3 id="Utiliser_les_correspondances_de_groupes_avec_les_parenthèses">Utiliser les correspondances de groupes avec les parenthèses</h3> +### Utiliser les correspondances de groupes avec les parenthèses -<p>Les parenthèses, utilisées dans un motif d'expression régulière, permettent de garder en mémoire un groupe (ou fragment) d'une correspondance. Ainsi, <code>/a(b)c/</code> correspond aux caractères 'abc' et garde 'b' en mémoire. Pour récupérer ces fragments mémorisés, on peut utiliser les éléments du tableau <code>array</code> <code>[1]</code>, ..., <code>[n]</code>.</p> +Les parenthèses, utilisées dans un motif d'expression régulière, permettent de garder en mémoire un groupe (ou fragment) d'une correspondance. Ainsi, `/a(b)c/` correspond aux caractères 'abc' et garde 'b' en mémoire. Pour récupérer ces fragments mémorisés, on peut utiliser les éléments du tableau `array` `[1]`, ..., `[n]`. -<p>Le nombre de fragments qu'il est possible de garder entre parenthèses n'est pas limité. Le tableau renvoyé contiendra tout ce qui aura été trouvé. Les exemples qui suivent montrent comment utiliser cette syntaxe.</p> +Le nombre de fragments qu'il est possible de garder entre parenthèses n'est pas limité. Le tableau renvoyé contiendra tout ce qui aura été trouvé. Les exemples qui suivent montrent comment utiliser cette syntaxe. -<p>Le script qui suit utilise la méthode {{jsxref("String.replace", "replace()")}} pour échanger les mots d'une chaîne de caractères. Pour remplacer le texte, le script utilise <code>$1</code> et <code>$2</code> qui correspondent au premier et deuxième groupe correspondant.</p> +Le script qui suit utilise la méthode {{jsxref("String.replace", "replace()")}} pour échanger les mots d'une chaîne de caractères. Pour remplacer le texte, le script utilise `$1` et `$2` qui correspondent au premier et deuxième groupe correspondant. -<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/; +```js +var re = /(\w+)\s(\w+)/; var str = "Titi toto"; var newstr = str.replace(re, "$2, $1"); console.log(newstr); -</pre> +``` -<p>Cela affichera "toto, Titi".</p> +Cela affichera "toto, Titi". -<h3 id="Effectuer_des_recherches_avancées_en_utilisant_les_marqueurs_flags">Effectuer des recherches avancées en utilisant les marqueurs (<em>flags</em>)</h3> +### Effectuer des recherches avancées en utilisant les marqueurs (_flags_) -<p>Les expressions rationnelles peuvent être utilisées avec des marqueurs optionnels permettant des recherches globales et/ou ne respectant pas la casse. Ces marqueurs peuvent être utilisés séparement ou ensemble, quel que soit l'ordre. Ils font partie de l'expression régulière.</p> +Les expressions rationnelles peuvent être utilisées avec des marqueurs optionnels permettant des recherches globales et/ou ne respectant pas la casse. Ces marqueurs peuvent être utilisés séparement ou ensemble, quel que soit l'ordre. Ils font partie de l'expression régulière. -<table class="standard-table"> - <caption>Drapeaux utilisés avec les expressions régulières.</caption> - <thead> - <tr> - <th scope="col">Drapeau (<em>Flag</em>)</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>g</code></td> - <td>Recherche globale</td> - </tr> - <tr> - <td><code>i</code></td> - <td>Recherche ne respectant pas la casse</td> - </tr> - <tr> - <td><code>m</code></td> - <td>Recherche sur plusieurs lignes</td> - </tr> - <tr> - <td><code>s</code></td> - <td>Le point peut correspondre aux caractères de saut de ligne.</td> - </tr> - <tr> - <td><code>u</code></td> - <td>Unicode. Le motif de recherche est interprété comme une séquence de codets Unicode.</td> - </tr> - <tr> - <td><code>y</code></td> - <td>Effectue une recherche qui « adhère », en partant de la position courante de la chaîne de caractères sur laquelle la recherche est effectuée. Voir la page sur {{jsxref("RegExp.sticky","sticky")}}.</td> - </tr> - </tbody> -</table> +| Drapeau (_Flag_) | Description | +| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `g` | Recherche globale | +| `i` | Recherche ne respectant pas la casse | +| `m` | Recherche sur plusieurs lignes | +| `s` | Le point peut correspondre aux caractères de saut de ligne. | +| `u` | Unicode. Le motif de recherche est interprété comme une séquence de codets Unicode. | +| `y` | Effectue une recherche qui « adhère », en partant de la position courante de la chaîne de caractères sur laquelle la recherche est effectuée. Voir la page sur {{jsxref("RegExp.sticky","sticky")}}. | -<p>Pour utiliser un marqueur avec une expression régulière, on utilisera la syntaxe suivante :</p> +Pour utiliser un marqueur avec une expression régulière, on utilisera la syntaxe suivante : -<pre class="brush: js notranslate">var re = /motif/marqueurs; -</pre> +```js +var re = /motif/marqueurs; +``` -<p>ou</p> +ou -<pre class="brush: js notranslate">var re = new RegExp("motif", "marqueurs"); -</pre> +```js +var re = new RegExp("motif", "marqueurs"); +``` -<p>Les marqueurs font partie intégrante d'une expression régulière, ils ne peuvent pas être ajoutés ou supprimés ensuite.</p> +Les marqueurs font partie intégrante d'une expression régulière, ils ne peuvent pas être ajoutés ou supprimés ensuite. -<p>Ainsi, <code>re = /\w+\s/g</code> permet de créer une expression régulière pour trouver un ou plusieurs caractères suivis d'un espace, la recherche est effectuée globalement, sur toute la chaîne de caractères.</p> +Ainsi, `re = /\w+\s/g` permet de créer une expression régulière pour trouver un ou plusieurs caractères suivis d'un espace, la recherche est effectuée globalement, sur toute la chaîne de caractères. -<pre class="brush: js notranslate">var re = /\w+\s/g; +```js +var re = /\w+\s/g; var str = "un deux trois quatre"; var monTableau = str.match(re); console.log(monTableau); -</pre> +``` -<p>Cela affichera ["un ", "deux ", "trois "]. On pourrait remplacer la ligne :</p> +Cela affichera \["un ", "deux ", "trois "]. On pourrait remplacer la ligne : -<pre class="brush: js notranslate">var re = /\w+\s/g; -</pre> +```js +var re = /\w+\s/g; +``` -<p>avec la ligne :</p> +avec la ligne : -<pre class="brush: js notranslate">var re = new RegExp("\\w+\\s", "g"); -</pre> +```js +var re = new RegExp("\\w+\\s", "g"); +``` -<p>pour obtenir le même résultat.</p> +pour obtenir le même résultat. -<p>Le comportement du marqueur <code>'g'</code> est différent selon qu'il est utilisé avec <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/exec">exec()</a></code> ou avec <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match">match()</a></code>. Pour <code>match()</code>, c'est la chaîne de caractères qui invoque la méthode et l'expression rationnelle est alors un argument. Pour <code>exec()</code>, c'est l'expression rationnelle qui invoque la méthode et c'est la chaîne de caractères qui est passée en argument. Dans l'appel à <code>exec()</code>, le marqueur <code>'g'</code> permet d'avoir une progression itérative.</p> +Le comportement du marqueur `'g'` est différent selon qu'il est utilisé avec [`exec()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/exec) ou avec [`match()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match). Pour `match()`, c'est la chaîne de caractères qui invoque la méthode et l'expression rationnelle est alors un argument. Pour `exec()`, c'est l'expression rationnelle qui invoque la méthode et c'est la chaîne de caractères qui est passée en argument. Dans l'appel à `exec()`, le marqueur `'g'` permet d'avoir une progression itérative. -<p>Le marqueur <code>m</code> pourra être utilisé pour traiter une chaîne de caractères de plusieurs lignes comme plusieurs lignes distinctes. Si ce marqueur est utilisé, les caractères spéciaux <code>^</code> et <code>$</code> correspondront au début ou à la fin de n'importe quelle ligne appartenant à la chaîne de caractères au lieu de correspondre simplement au début ou à la fin de la chaîne.</p> +Le marqueur `m` pourra être utilisé pour traiter une chaîne de caractères de plusieurs lignes comme plusieurs lignes distinctes. Si ce marqueur est utilisé, les caractères spéciaux `^` et `$` correspondront au début ou à la fin de n'importe quelle ligne appartenant à la chaîne de caractères au lieu de correspondre simplement au début ou à la fin de la chaîne. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Les exemples qui suivent utilisent les expressions régulières dans différents cas.</p> +Les exemples qui suivent utilisent les expressions régulières dans différents cas. -<h3 id="Changer_lordre_dune_saisie">Changer l'ordre d'une saisie</h3> +### Changer l'ordre d'une saisie -<p>L'exemple qui suit utilise les expressions régulières et <code>string.split()</code> et <code>string.replace()</code>. Le script nettoie la chaîne de caractères saisie qui contient des noms (prénom puis nom) séparés par des blancs, tabulations et points-virgules. Enfin il inverse les noms et prénoms puis trie la liste.</p> +L'exemple qui suit utilise les expressions régulières et `string.split()` et `string.replace()`. Le script nettoie la chaîne de caractères saisie qui contient des noms (prénom puis nom) séparés par des blancs, tabulations et points-virgules. Enfin il inverse les noms et prénoms puis trie la liste. -<pre class="brush: js notranslate">// La chaîne des noms contient plusieurs blancs et tabulations, +```js +// La chaîne des noms contient plusieurs blancs et tabulations, // il peut y avoir plusieurs espaces entre le nom et le prénom. var noms = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand "; @@ -670,59 +892,66 @@ var listeParNomFamille = []; output.push("---------- Après découpage avec l'expression régulière"); var i, len; -for (i = 0, len = listeNoms.length; i < len; i++){ +for (i = 0, len = listeNoms.length; i < len; i++){ output.push(listeNoms[i]); listeParNomFamille[i] = listeNoms[i].replace(motif, "$2, $1"); } // Afficher le nouveau tableau output.push("---------- Noms et prénoms inversés"); -for (i = 0, len = listeParNomFamille.length; i < len; i++){ +for (i = 0, len = listeParNomFamille.length; i < len; i++){ output.push(listeParNomFamille[i]); } // Trier par le nom de famille puis afficher le tableau trié listeParNomFamille.sort(); output.push("---------- Triée"); -for (i = 0, len = listeParNomFamille.length; i < len; i++){ +for (i = 0, len = listeParNomFamille.length; i < len; i++){ output.push(listeParNomFamille[i]); } output.push("---------- Fin"); console.log(output.join("\n")); -</pre> +``` -<h3 id="Utiliser_les_caractères_spéciaux_pour_vérifier_la_saisie">Utiliser les caractères spéciaux pour vérifier la saisie</h3> +### Utiliser les caractères spéciaux pour vérifier la saisie -<p>Dans l'exemple suivant, on s'attend à ce que l'utilisateur saisissent un numéro de téléphone. Quand l'utilisateur appuie sur le bouton "Vérifier", le script vérifie la validité du numéro. Si le numéro est valide (il correspond à la séquence de caractères fournie par l'expression régulière), le script affiche un message remerciant l'utilisateur et confirmant le numéro. S'il est invalide, le script informe l'utilisateur et lui signifie que les informations saisies ne sont pas valides.</p> +Dans l'exemple suivant, on s'attend à ce que l'utilisateur saisissent un numéro de téléphone. Quand l'utilisateur appuie sur le bouton "Vérifier", le script vérifie la validité du numéro. Si le numéro est valide (il correspond à la séquence de caractères fournie par l'expression régulière), le script affiche un message remerciant l'utilisateur et confirmant le numéro. S'il est invalide, le script informe l'utilisateur et lui signifie que les informations saisies ne sont pas valides. -<p>Dans les parenthèses sans mémoire <code>(?:</code> , l'expression régulière cherche les deux premiers chiffres ou l'indicatif du pays suivi d'un blanc et du premier chiffre, ce qui correspond à</p> +Dans les parenthèses sans mémoire `(?:` , l'expression régulière cherche les deux premiers chiffres ou l'indicatif du pays suivi d'un blanc et du premier chiffre, ce qui correspond à -<pre class="brush: html notranslate">\d{2}|\+\d{2}[ ]\d</pre> +```html +\d{2}|\+\d{2}[ ]\d +``` -<p>Cette partie signifie : deux chiffres OU un signe '+' suivi de deux chiffres, un blanc et un autre chiffre.</p> +Cette partie signifie : deux chiffres OU un signe '+' suivi de deux chiffres, un blanc et un autre chiffre. -<p>Ensuite, on a un groupe qui est mémorisé (entre parenthèses) :</p> +Ensuite, on a un groupe qui est mémorisé (entre parenthèses) : -<pre class="brush: html notranslate">([- ])</pre> +```html +([- ]) +``` -<p>Ce groupe correspond à ce qui va être utilisé pour séparer les différentes composantes du numéro de téléphone.</p> +Ce groupe correspond à ce qui va être utilisé pour séparer les différentes composantes du numéro de téléphone. -<p>Ensuite,</p> +Ensuite, -<pre class="brush: html notranslate">\d{2}\1</pre> +```html +\d{2}\1 +``` -<p>signifie qu'on a deux chiffres suivi du premier groupe qui est celui qui définit le séparateur. Le reste est composé de la même façon. Ainsi les numéros de téléphone +33 1 23 45 67 89 et 01 23 45 67 89 seront tous les deux valides.</p> +signifie qu'on a deux chiffres suivi du premier groupe qui est celui qui définit le séparateur. Le reste est composé de la même façon. Ainsi les numéros de téléphone +33 1 23 45 67 89 et 01 23 45 67 89 seront tous les deux valides. -<p>L'événement <code>Change</code>, provoqué quand l'utilisateur appuie sur Entrée, renseigne la valeur <code>RegExp.input</code>.</p> +L'événement `Change`, provoqué quand l'utilisateur appuie sur Entrée, renseigne la valeur `RegExp.input`. -<pre class="brush: html notranslate"><!DOCTYPE html> -<html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> - <meta http-equiv="Content-Script-Type" content="text/javascript"> - <script type="text/javascript"> +```html +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> + <meta http-equiv="Content-Script-Type" content="text/javascript"> + <script type="text/javascript"> var re = /(?:\d{2}|\+\d{2}[ ]\d)([- ])\d{2}\1\d{2}\1\d{2}\1\d{2}/; function testInfo(phoneInput){ var OK = re.exec(phoneInput.value); @@ -731,16 +960,16 @@ console.log(output.join("\n")); else window.alert("Merci, votre numéro est : " + OK[0]); } - </script> - </head> - <body> - <p>Saisissez votre numéro de téléphone (avec indicatif) puis cliquez sur "Vérifier". - <br>Le format attendu est ## ## ## ## ## ou +## # ## ## ## ##.</p> - <form action="#"> - <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Vérifier</button> - </form> - </body> -</html> -</pre> - -<p>{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}}</p> + </script> + </head> + <body> + <p>Saisissez votre numéro de téléphone (avec indicatif) puis cliquez sur "Vérifier". + <br>Le format attendu est ## ## ## ## ## ou +## # ## ## ## ##.</p> + <form action="#"> + <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Vérifier</button> + </form> + </body> +</html> +``` + +{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}} diff --git a/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.md b/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.md index f27dfa250b..f94599fde7 100644 --- a/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.md @@ -9,90 +9,136 @@ tags: translation_of: Web/JavaScript/Guide/Regular_Expressions/Quantifiers original_slug: Web/JavaScript/Guide/Expressions_régulières/Quantificateurs --- -<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p> +{{jsSidebar("JavaScript Guide")}}{{draft}} -<p>Les quantificateurs indiquent le nombre de caractères ou d'expressions qu'il faut pour une correspondance.</p> +Les quantificateurs indiquent le nombre de caractères ou d'expressions qu'il faut pour une correspondance. -<h2 id="Types">Types</h2> +## Types <table class="standard-table"> - <thead> - <tr> - <th scope="col">Caractères</th> - <th scope="col">Signification</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>x*</code></td> - <td> - <p>Correspond à l'expression précédente qui est répétée 0 ou plusieurs fois. Équivalent à <code>{0,}</code></p> - - <p>Ainsi, <code>/bo*/</code> correspond à 'boo' dans "Un booléen" et à 'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin".</p> - </td> - </tr> - <tr> - <td><code>x+</code></td> - <td> - <p>Correspond à l'expression précédente qui est répétée une ou plusieurs fois. C'est équivalent à <code>{1,}</code>.</p> - - <p>Ainsi, <code>/a+/</code> correspond au 'a' dans "maison" et à tous les 'a' dans "maaaaaaison" mais ne correspond à rien dans "mission".</p> - </td> - </tr> - <tr> - <td><code>x?</code></td> - <td> - <p>Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à <code>{0,1}</code>.<br> - <br> - Ainsi, <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".<br> - <br> - S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123". Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait correspondre "1".<br> - <br> - Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau.</p> - </td> - </tr> - <tr> - <td><code>x{n}</code></td> - <td> - <p>Correspond pour exactement n occurences de l'expression précédente. N doit être un entier positif.<br> - <br> - Ainsi, <code>/a{2}/</code> ne correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de "Mozilaa" et aux deux premiers 'a' de "Mozillaaa".</p> - </td> - </tr> - <tr> - <td><code>x{n,}</code></td> - <td> - <p>Correspond lorsqu'il y a au moins <code>n</code> occurences de l'expression précédente. <code>n</code> doit être un entier positif.</p> - - <p>Par exemple <code>/a{2,}/</code> correspondra à <code>"aa"</code> ou à <code>"aaa"</code> ou encore à <code>"aaaa"</code> mais pas à <code>"a"</code>.</p> - </td> - </tr> - <tr> - <td><code>x{n,m}</code></td> - <td> - <p>Lorsque <code>n</code> et <code>m</code> sont des entiers positifs, cela correspond à au moins <code>n</code> occurences de l'expression précédente et à au plus <code>m</code> occurrences. Lorsque <code>m</code> n'est pas utilisé, la valeur par défaut correspondante sera l'infini.</p> - - <p>Ainsi, <code>/a{1,3}/</code> ne correspond à rien dans "Mozill", au 'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus de 'a' dans la chaîne de caractères.</p> - </td> - </tr> - <tr> - <td> - <p><code>x*?</code><br> - <code>x+?</code><br> - <code>x??</code><br> - <code>x{n}?</code><br> - <code>x{n,}?</code><br> - <code>x{n,m}?</code></p> - </td> - <td> - <p>Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à <code>{0,1}</code>.<br> - <br> - Ainsi, <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".<br> - <br> - S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123". Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait correspondre "1".<br> - <br> - Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau.</p> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Caractères</th> + <th scope="col">Signification</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>x*</code></td> + <td> + <p> + Correspond à l'expression précédente qui est répétée 0 ou plusieurs + fois. Équivalent à <code>{0,}</code> + </p> + <p> + Ainsi, <code>/bo*/</code> correspond à 'boo' dans "Un booléen" et à + 'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin". + </p> + </td> + </tr> + <tr> + <td><code>x+</code></td> + <td> + <p> + Correspond à l'expression précédente qui est répétée une ou plusieurs + fois. C'est équivalent à <code>{1,}</code>. + </p> + <p> + Ainsi, <code>/a+/</code> correspond au 'a' dans "maison" et à tous les + 'a' dans "maaaaaaison" mais ne correspond à rien dans "mission". + </p> + </td> + </tr> + <tr> + <td><code>x?</code></td> + <td> + <p> + Correspond à l'expression précédente qui est présente une fois ou pas + du tout. C'est équivalent à <code>{0,1}</code>.<br /><br />Ainsi, + <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans + "angle" mais aussi au 'l' dans "Oslo".<br /><br />S'il est utilisé + immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend + le quantificateur moins « gourmand » auquel cas le moins de caractères + correspond (le comportement par défaut, « gourmand », permettant de + faire correspondre le plus de caractères possible). Par exemple + <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123". + Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait + correspondre "1".<br /><br />Ce symbole est également utilisé dans les + tests de présence autour de l'expression, décrits par les lignes + <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau. + </p> + </td> + </tr> + <tr> + <td><code>x{n}</code></td> + <td> + <p> + Correspond pour exactement n occurences de l'expression précédente. N + doit être un entier positif.<br /><br />Ainsi, <code>/a{2}/</code> ne + correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de + "Mozilaa" et aux deux premiers 'a' de "Mozillaaa". + </p> + </td> + </tr> + <tr> + <td><code>x{n,}</code></td> + <td> + <p> + Correspond lorsqu'il y a au moins <code>n</code> occurences de + l'expression précédente. <code>n</code> doit être un entier positif. + </p> + <p> + Par exemple <code>/a{2,}/</code> correspondra à <code>"aa"</code> ou à + <code>"aaa"</code> ou encore à <code>"aaaa"</code> mais pas à + <code>"a"</code>. + </p> + </td> + </tr> + <tr> + <td><code>x{n,m}</code></td> + <td> + <p> + Lorsque <code>n</code> et <code>m</code> sont des entiers positifs, + cela correspond à au moins <code>n</code> occurences de l'expression + précédente et à au plus <code>m</code> occurrences. Lorsque + <code>m</code> n'est pas utilisé, la valeur par défaut correspondante + sera l'infini. + </p> + <p> + Ainsi, <code>/a{1,3}/</code> ne correspond à rien dans "Mozill", au + 'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois + premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter + que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus + de 'a' dans la chaîne de caractères. + </p> + </td> + </tr> + <tr> + <td> + <p> + <code>x*?</code><br /><code>x+?</code><br /><code>x??</code + ><br /><code>x{n}?</code><br /><code>x{n,}?</code><br /><code + >x{n,m}?</code + > + </p> + </td> + <td> + <p> + Correspond à l'expression précédente qui est présente une fois ou pas + du tout. C'est équivalent à <code>{0,1}</code>.<br /><br />Ainsi, + <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans + "angle" mais aussi au 'l' dans "Oslo".<br /><br />S'il est utilisé + immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend + le quantificateur moins « gourmand » auquel cas le moins de caractères + correspond (le comportement par défaut, « gourmand », permettant de + faire correspondre le plus de caractères possible). Par exemple + <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123". + Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait + correspondre "1".<br /><br />Ce symbole est également utilisé dans les + tests de présence autour de l'expression, décrits par les lignes + <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau. + </p> + </td> + </tr> + </tbody> </table> diff --git a/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md index 04b21810ae..f7b7b5c99c 100644 --- a/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md @@ -10,422 +10,116 @@ tags: translation_of: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes original_slug: Web/JavaScript/Guide/Expressions_régulières/Échappement_propriétés_Unicode --- -<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p> +{{jsSidebar("JavaScript Guide")}}{{draft}} -<p>Les séquences d'échappement pour les propriétés Unicode permettent de distinguer les caractères Unicodes en fonction de leurs propriétés : majuscules, minuscules, symboles mathématiques, ponctuation, etc.</p> +Les séquences d'échappement pour les propriétés Unicode permettent de distinguer les caractères Unicodes en fonction de leurs propriétés : majuscules, minuscules, symboles mathématiques, ponctuation, etc. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">// Valeurs non-binaires -\p{UnicodePropertyName=<em>ValeurPropriétéUnicode</em>} +```js +// Valeurs non-binaires +\p{UnicodePropertyName=ValeurPropriétéUnicode} \p{UnicodePropertyName} // Valeurs binaires et non-binaires \p{UnicodePropertyName} -</pre> +``` -<dl> - <dt><code>ValeurPropriétéUnicode</code></dt> - <dd>Une des valeurs listées ci-après. Pour certaines valeurs, le mot-clé <code>NomPropriétéUnicode</code> et le signe égal peuvent être omis.</dd> -</dl> +- `ValeurPropriétéUnicode` + - : Une des valeurs listées ci-après. Pour certaines valeurs, le mot-clé `NomPropriétéUnicode` et le signe égal peuvent être omis. -<h2 id="Valeurs">Valeurs</h2> +## Valeurs -<h3 id="Non-binaires">Non-binaires</h3> +### Non-binaires -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Échappements</th> - <th scope="col">Signification</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>\p{LC}<br> - \p{Cased_Letter}<br> - \p{UnicodePropertyName=Cased_Letter}</code></td> - <td>N'importe quelle lettre avec la version minuscule et la version majuscule. Équivalent à <code>\p{Lu}|\p{Ll}|p{Lt}</code>.</td> - </tr> - <tr> - <td><code>\p{Close_Punctuation}<br> - \p{UnicodePropertyName=Close_Punctuation}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Connector_Punctuation}<br> - \p{UnicodePropertyName=Connector_Punctuation}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Control}<br> - \p{UnicodePropertyName=Control}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Currency_Symbol}<br> - \p{UnicodePropertyName=Currency_Symbol}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Dash_Punctuation}<br> - \p{UnicodePropertyName=Dash_Punctuation}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Decimal_Number}<br> - \p{UnicodePropertyName=Decimal_Number}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Enclosing_Mark}<br> - \p{UnicodePropertyName=Enclosing_Mark}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Final_Punctuation}<br> - \p{UnicodePropertyName=Final_Punctuation}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Format}<br> - \p{UnicodePropertyName=Format}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Initial_Punctuation}<br> - \p{UnicodePropertyName=Initial_Punctuation}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Letter}<br> - \p{UnicodePropertyName=Letter}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Letter_Number}<br> - \p{UnicodePropertyName=Line_Separator}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Lowercase_Letter}<br> - \p{UnicodePropertyName=Lowercase_Letter}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Mark}<br> - \p{UnicodePropertyName=Mark}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Math_Symbol;}<br> - \p{UnicodePropertyName=Math_Symbol}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Modifier_Letter}<br> - \p{UnicodePropertyName=Modifier_Letter}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Modifier_Symbol}<br> - \p{UnicodePropertyName=Modifier_Symbol}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Nonspacing_Mark}<br> - \p{UnicodePropertyName=Nonspacing_Mark}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Number}<br> - \p{UnicodePropertyName=Number}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Open_Punctuation}<br> - \p{UnicodePropertyName=Open_Punctuation}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Other}<br> - \p{UnicodePropertyName=Other_Letter}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Other_Letter}<br> - \p{UnicodePropertyName=Other_Letter}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Other_Number}<br> - \p{UnicodePropertyName=Other_Number}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Other_Punctuation}<br> - \p{UnicodePropertyName=Other_Punctuation}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Paragraph_Separator}<br> - \p{UnicodePropertyName=Paragraph_Separator}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Private_Use}</code>Meaning<br> - <code>\p{UnicodePropertyName=Private_Use}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Punctuation}<br> - \p{UnicodePropertyName=Punctuation}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Separator}<br> - \p{UnicodePropertyName=Separator}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Space_Separator}<br> - \p{UnicodePropertyName=Space_Separator}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Spaceing_Mark}<br> - \p{UnicodePropertyName=Spacing_Mark}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Surrogate}<br> - \p{UnicodePropertyName=Surrogate}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Symbol}<br> - \p{UnicodePropertyName=Symbol}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Titlecase_Letter}<br> - \p{UnicodePropertyName=Titlecase_Letter}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Unassigned}<br> - \p{UnicodePropertyName=Unassigned}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Uppercase_Letter}<br> - \p{UnicodePropertyName=UppercaseLetter}</code></td> - <td></td> - </tr> - </tbody> -</table> +| Échappements | Signification | +| ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | +| `\p{LC} \p{Cased_Letter} \p{UnicodePropertyName=Cased_Letter}` | N'importe quelle lettre avec la version minuscule et la version majuscule. Équivalent à `\p{Lu}\|\p{Ll}\|p{Lt}`. | +| `\p{Close_Punctuation} \p{UnicodePropertyName=Close_Punctuation}` | | +| `\p{Connector_Punctuation} \p{UnicodePropertyName=Connector_Punctuation}` | | +| `\p{Control} \p{UnicodePropertyName=Control}` | | +| `\p{Currency_Symbol} \p{UnicodePropertyName=Currency_Symbol}` | | +| `\p{Dash_Punctuation} \p{UnicodePropertyName=Dash_Punctuation}` | | +| `\p{Decimal_Number} \p{UnicodePropertyName=Decimal_Number}` | | +| `\p{Enclosing_Mark} \p{UnicodePropertyName=Enclosing_Mark}` | | +| `\p{Final_Punctuation} \p{UnicodePropertyName=Final_Punctuation}` | | +| `\p{Format} \p{UnicodePropertyName=Format}` | | +| `\p{Initial_Punctuation} \p{UnicodePropertyName=Initial_Punctuation}` | | +| `\p{Letter} \p{UnicodePropertyName=Letter}` | | +| `\p{Letter_Number} \p{UnicodePropertyName=Line_Separator}` | | +| `\p{Lowercase_Letter} \p{UnicodePropertyName=Lowercase_Letter}` | | +| `\p{Mark} \p{UnicodePropertyName=Mark}` | | +| `\p{Math_Symbol;} \p{UnicodePropertyName=Math_Symbol}` | | +| `\p{Modifier_Letter} \p{UnicodePropertyName=Modifier_Letter}` | | +| `\p{Modifier_Symbol} \p{UnicodePropertyName=Modifier_Symbol}` | | +| `\p{Nonspacing_Mark} \p{UnicodePropertyName=Nonspacing_Mark}` | | +| `\p{Number} \p{UnicodePropertyName=Number}` | | +| `\p{Open_Punctuation} \p{UnicodePropertyName=Open_Punctuation}` | | +| `\p{Other} \p{UnicodePropertyName=Other_Letter}` | | +| `\p{Other_Letter} \p{UnicodePropertyName=Other_Letter}` | | +| `\p{Other_Number} \p{UnicodePropertyName=Other_Number}` | | +| `\p{Other_Punctuation} \p{UnicodePropertyName=Other_Punctuation}` | | +| `\p{Paragraph_Separator} \p{UnicodePropertyName=Paragraph_Separator}` | | +| `\p{Private_Use}`Meaning `\p{UnicodePropertyName=Private_Use}` | | +| `\p{Punctuation} \p{UnicodePropertyName=Punctuation}` | | +| `\p{Separator} \p{UnicodePropertyName=Separator}` | | +| `\p{Space_Separator} \p{UnicodePropertyName=Space_Separator}` | | +| `\p{Spaceing_Mark} \p{UnicodePropertyName=Spacing_Mark}` | | +| `\p{Surrogate} \p{UnicodePropertyName=Surrogate}` | | +| `\p{Symbol} \p{UnicodePropertyName=Symbol}` | | +| `\p{Titlecase_Letter} \p{UnicodePropertyName=Titlecase_Letter}` | | +| `\p{Unassigned} \p{UnicodePropertyName=Unassigned}` | | +| `\p{Uppercase_Letter} \p{UnicodePropertyName=UppercaseLetter}` | | -<h3 id="Binaires">Binaires</h3> +### Binaires -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Échappement</th> - <th scope="col">Signification</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>\p{Alphabetic}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Bidi_Control}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Bidi_Mirrored}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Case_Ignorable}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Cased}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Changes_When_Casefolded}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Changes_When_Casemapped}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Changes_When_Lowercased}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Changes_When_NFKC_Casefolded}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Changes_When_Titlecased}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Changes_When_Uppercased}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Dash}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Default_Ignorable_Code_Point}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Deprecated}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Diacritic}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Emoji}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Emoji_Component}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Emoji_Modifier}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Emoji_Modifier_Base}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Emoji_Presentation}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Extender}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Grapheme_Base}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Grapheme_Extend}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Hex_Digit}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{ID_Continue}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{ID_Start}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Ideographic}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{IDS_Binary_Operator}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{IDS_Trinary_Operator}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Join_Control}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Logical_Order_Exception}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Lowercase}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Math}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Noncharacter_Code_Point}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Pattern_Syntax}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Pattern_White_Space}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Quotation_Mark}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Radical}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{RegionalIndicator}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Sentence_Terminal}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Soft_Dotted}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Terminal_Punctuation}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Unified_Ideograph}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Uppercase}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{Variation_Selector}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{White_Space}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{XID_Continue}</code></td> - <td></td> - </tr> - <tr> - <td><code>\p{XID_Start}</code></td> - <td></td> - </tr> - </tbody> -</table> +| Échappement | Signification | +| ---------------------------------- | ------------- | +| `\p{Alphabetic}` | | +| `\p{Bidi_Control}` | | +| `\p{Bidi_Mirrored}` | | +| `\p{Case_Ignorable}` | | +| `\p{Cased}` | | +| `\p{Changes_When_Casefolded}` | | +| `\p{Changes_When_Casemapped}` | | +| `\p{Changes_When_Lowercased}` | | +| `\p{Changes_When_NFKC_Casefolded}` | | +| `\p{Changes_When_Titlecased}` | | +| `\p{Changes_When_Uppercased}` | | +| `\p{Dash}` | | +| `\p{Default_Ignorable_Code_Point}` | | +| `\p{Deprecated}` | | +| `\p{Diacritic}` | | +| `\p{Emoji}` | | +| `\p{Emoji_Component}` | | +| `\p{Emoji_Modifier}` | | +| `\p{Emoji_Modifier_Base}` | | +| `\p{Emoji_Presentation}` | | +| `\p{Extender}` | | +| `\p{Grapheme_Base}` | | +| `\p{Grapheme_Extend}` | | +| `\p{Hex_Digit}` | | +| `\p{ID_Continue}` | | +| `\p{ID_Start}` | | +| `\p{Ideographic}` | | +| `\p{IDS_Binary_Operator}` | | +| `\p{IDS_Trinary_Operator}` | | +| `\p{Join_Control}` | | +| `\p{Logical_Order_Exception}` | | +| `\p{Lowercase}` | | +| `\p{Math}` | | +| `\p{Noncharacter_Code_Point}` | | +| `\p{Pattern_Syntax}` | | +| `\p{Pattern_White_Space}` | | +| `\p{Quotation_Mark}` | | +| `\p{Radical}` | | +| `\p{RegionalIndicator}` | | +| `\p{Sentence_Terminal}` | | +| `\p{Soft_Dotted}` | | +| `\p{Terminal_Punctuation}` | | +| `\p{Unified_Ideograph}` | | +| `\p{Uppercase}` | | +| `\p{Variation_Selector}` | | +| `\p{White_Space}` | | +| `\p{XID_Continue}` | | +| `\p{XID_Start}` | | diff --git a/files/fr/web/javascript/guide/text_formatting/index.md b/files/fr/web/javascript/guide/text_formatting/index.md index 0049f8f7ac..b67205a859 100644 --- a/files/fr/web/javascript/guide/text_formatting/index.md +++ b/files/fr/web/javascript/guide/text_formatting/index.md @@ -8,196 +8,275 @@ tags: translation_of: Web/JavaScript/Guide/Text_formatting original_slug: Web/JavaScript/Guide/Formatage_du_texte --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}} -<p>Ce chapitre présente comment travailler avec les chaînes de caractères et le texte en JavaScript.</p> +Ce chapitre présente comment travailler avec les chaînes de caractères et le texte en JavaScript. -<h2 id="Les_chaînes_de_caractères">Les chaînes de caractères</h2> +## Les chaînes de caractères -<p>Le type {{Glossary("String")}} de JavaScript est utilisé pour représenter des données textuelles. C'est un ensemble d'"éléments" de valeurs non signées sur 16 bits (unités de codage UTF-16). Chaque élément dans la chaîne de caractères occupe une position dans la chaîne de caractères. Le premier élément se trouve à l'indice 0, le suivant à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères est le nombre d'éléments qu'elle contient. Vous pouvez créer des chaînes de caractères en utilisant des littéraux de chaîne de caractères ou des objets chaîne de caractères.</p> +Le type {{Glossary("String")}} de JavaScript est utilisé pour représenter des données textuelles. C'est un ensemble d'"éléments" de valeurs non signées sur 16 bits (unités de codage UTF-16). Chaque élément dans la chaîne de caractères occupe une position dans la chaîne de caractères. Le premier élément se trouve à l'indice 0, le suivant à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères est le nombre d'éléments qu'elle contient. Vous pouvez créer des chaînes de caractères en utilisant des littéraux de chaîne de caractères ou des objets chaîne de caractères. -<h3 id="Les_littéraux_de_chaînes_de_caractères">Les littéraux de chaînes de caractères</h3> +### Les littéraux de chaînes de caractères -<p>Vous pouvez créer des chaînes de caractères simple en utilisant des apostrophes simples ou doubles :</p> +Vous pouvez créer des chaînes de caractères simple en utilisant des apostrophes simples ou doubles : -<pre class="brush: js">'machin' -"truc"</pre> +```js +'machin' +"truc" +``` -<p>Des chaînes plus avancées peuvent être créées en utilisant des séquences d'échappement.</p> +Des chaînes plus avancées peuvent être créées en utilisant des séquences d'échappement. -<h4 id="Les_séquences_déchappement_hexadécimales">Les séquences d'échappement hexadécimales</h4> +#### Les séquences d'échappement hexadécimales -<p>Le nombre situé après \x est interprété comme un nombre <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal">hexadécimal</a> :</p> +Le nombre situé après \x est interprété comme un nombre [hexadécimal](https://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal) : -<pre class="brush: js">'\xA9' // "©"</pre> +```js +'\xA9' // "©" +``` -<h4 id="Les_séquences_déchappement_Unicode">Les séquences d'échappement Unicode</h4> +#### Les séquences d'échappement Unicode -<p>Les séquences d'échappement Unicode requièrent au moins quatres caractères hexadécimaux après \u.</p> +Les séquences d'échappement Unicode requièrent au moins quatres caractères hexadécimaux après \u. -<pre class="brush: js">'\u00A9' // "©"</pre> +```js +'\u00A9' // "©" +``` -<h4 id="Léchappement_dunités_de_codage_Unicode">L'échappement d'unités de codage Unicode</h4> +#### L'échappement d'unités de codage Unicode -<p>Nouveau dans ECMAScript 2015. Avec les échappements d'unités de codage Unicode, tout caractère peut être échappé en utilisant des nombres hexadécimaux, de sorte qu'il est possible de d'utiliser des unités de codage Unicode jusqu'à <code>0x10FFFF</code>. Avec les échappements Unicode simples, il est souvent nécessaire d'écrire les moitiés de remplacement séparément pour obtenir le même résultat.</p> +Nouveau dans ECMAScript 2015. Avec les échappements d'unités de codage Unicode, tout caractère peut être échappé en utilisant des nombres hexadécimaux, de sorte qu'il est possible de d'utiliser des unités de codage Unicode jusqu'à `0x10FFFF`. Avec les échappements Unicode simples, il est souvent nécessaire d'écrire les moitiés de remplacement séparément pour obtenir le même résultat. -<p>Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}.</p> +Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}. -<pre class="brush: js">'\u{2F804}' +```js +'\u{2F804}' // Le même avec des échappements Unicode simples '\uD87E\uDC04' -</pre> +``` -<h3 id="Les_objets_String">Les objets String</h3> +### Les objets String -<p>L'objet {{jsxref("String")}} est un conteneur autour du type de donnée primitif chaîne de caractères.</p> +L'objet {{jsxref("String")}} est un conteneur autour du type de donnée primitif chaîne de caractères. -<pre><code>var s = new String('foo'); // crée un objet String -console.log(s); // affiche : {'0': 'f', '1': 'o', '2': 'o'} -typeof s; // retourne 'object'</code></pre> + var s = new String('foo'); // crée un objet String + console.log(s); // affiche : {'0': 'f', '1': 'o', '2': 'o'} + typeof s; // retourne 'object' -<p>Vous pouvez appeler chacune des méthodes de l'objet <code>String</code> avec une valeur littérale de chaîne de caractères : JavaScript convertira automatiquement le littéral en un objet <code>String</code> temporaire, appellera la méthode, puis supprimera l'objet <code>String</code> temporaire. Vous pouvez aussi utiliser la propriété <code>String.length</code> sur un littéral de chaîne de caractères.</p> +Vous pouvez appeler chacune des méthodes de l'objet `String` avec une valeur littérale de chaîne de caractères : JavaScript convertira automatiquement le littéral en un objet `String` temporaire, appellera la méthode, puis supprimera l'objet `String` temporaire. Vous pouvez aussi utiliser la propriété `String.length` sur un littéral de chaîne de caractères. -<p>Vous devriez utiliser des littéraux de chaîne de caractères, à moins que vous n'ayez spécifiquement besoin d'un objet <code>String</code>, parce que les objets <code>String</code> peuvent avoir un comportement contre-intuitif :</p> +Vous devriez utiliser des littéraux de chaîne de caractères, à moins que vous n'ayez spécifiquement besoin d'un objet `String`, parce que les objets `String` peuvent avoir un comportement contre-intuitif : -<pre class="brush: js">var s1 = '2 + 2'; // crée une valeur de chaîne de caractères +```js +var s1 = '2 + 2'; // crée une valeur de chaîne de caractères var s2 = new String('2 + 2'); // crée un objet String eval(s1); // renvoie le nombre 4 -eval(s2); // renvoie la chaîne "2 + 2"</pre> +eval(s2); // renvoie la chaîne "2 + 2" +``` -<p>Un objet <code>String</code> possède une propriété, <code>length</code>, qui indique le nombre d'unités de codage UTF-16 dans la chaîne de caractères. Par exemple, le code suivant affecte à <code>x</code> la valeur 16, parce que la chaîne "Bonjour, Monde !" contient 16 caractères, chacun représenté par une unité de codage UTF-16. Vous pouvez accéder à chaque unité de codage en utilisant une syntaxe de tableau entre crochets. Vous ne pouvez pas changer les caractères, du fait que les chaînes sont des objets immuables (semblables à des tableaux) :</p> +Un objet `String` possède une propriété, `length`, qui indique le nombre d'unités de codage UTF-16 dans la chaîne de caractères. Par exemple, le code suivant affecte à `x` la valeur 16, parce que la chaîne "Bonjour, Monde !" contient 16 caractères, chacun représenté par une unité de codage UTF-16. Vous pouvez accéder à chaque unité de codage en utilisant une syntaxe de tableau entre crochets. Vous ne pouvez pas changer les caractères, du fait que les chaînes sont des objets immuables (semblables à des tableaux) : -<pre class="brush: js">var machaine = 'Bonjour, Monde !'; +```js +var machaine = 'Bonjour, Monde !'; var x = machaine.length; machaine[0] = 'L'; // cela n'a aucun effet car les chaînes sont immuables machaine[0]; // cela renvoie "B" -</pre> +``` -<p>Les caractères dont les valeurs scalaires sont supérieures à U+FFFF (comme certains rares caractères chinois/japonais/coréens/vietnamiens et certains emojis) sont stockés en UTF-16 via deux unités de codage de remplacement. Par exemple, une chaîne de caractères contenant le seul caractère U+1F600 ("Emoji grinning face") aura une longueur de 2. Le fait d'accéder aux unités de codage individuelles dans une telle chaîne de caractères en utilisant des crochets peut avoir des conséquences indésirables telles que la génération d'unité de codage de remplacement non conformes, en violation du standard Unicode. (Des exemples devraient être ajoutés à cette page après que le bug MDN 857438 sera corrigé. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}.</p> +Les caractères dont les valeurs scalaires sont supérieures à U+FFFF (comme certains rares caractères chinois/japonais/coréens/vietnamiens et certains emojis) sont stockés en UTF-16 via deux unités de codage de remplacement. Par exemple, une chaîne de caractères contenant le seul caractère U+1F600 ("Emoji grinning face") aura une longueur de 2. Le fait d'accéder aux unités de codage individuelles dans une telle chaîne de caractères en utilisant des crochets peut avoir des conséquences indésirables telles que la génération d'unité de codage de remplacement non conformes, en violation du standard Unicode. (Des exemples devraient être ajoutés à cette page après que le bug MDN 857438 sera corrigé. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}. -<p>Un objet String a une grande variété de méthodes : par exemple, celles qui retournent une variation de la chaîne de caractères elle-même, telles que <code>substring</code> et <code>toUpperCase</code>.</p> +Un objet String a une grande variété de méthodes : par exemple, celles qui retournent une variation de la chaîne de caractères elle-même, telles que `substring` et `toUpperCase`. -<p>Le tableau suivant résume les méthodes des objets {{jsxref("String")}}.</p> +Le tableau suivant résume les méthodes des objets {{jsxref("String")}}. -<h4 id="Méthodes_de_String">Méthodes de <code>String</code></h4> +#### Méthodes de `String` <table class="standard-table"> - <thead> - <tr> - <th scope="col">Méthode</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}</td> - <td>Retourne le caractère ou le code de caractère à la position spécifiée de la chaîne de caractères.</td> - </tr> - <tr> - <td>{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}</td> - <td>Retourne la position de la sous-chaîne spécifiée dans la chaîne de caractères, ou la dernière position de la sous-chaîne spécifiée, respectivement.</td> - </tr> - <tr> - <td>{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}</td> - <td>Retourne le fait de savoir si la chaîne de caractères courante commence ou non par, finit ou non par, ou contient ou non, la chaîne spécifiée.</td> - </tr> - <tr> - <td>{{jsxref("String.concat", "concat")}}</td> - <td>Combine le texte de deux chaînes de caractères et retourne une nouvelle chaîne de caractères.</td> - </tr> - <tr> - <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}},</td> - <td>Construit une chaîne de caractères à partir de la séquence de valeurs Unicode fournie. Cette méthode est une méthode de la classe String et non une instance de String.</td> - </tr> - <tr> - <td>{{jsxref("String.split", "split")}}</td> - <td>Découpe un objet <code>String</code> en un tableau de chaînes de caractères en découpant la chaîne de caractères en sous-chaînes.</td> - </tr> - <tr> - <td>{{jsxref("String.slice", "slice")}}</td> - <td>Extrait une partie de la chaîne de caractères et retourne une nouvelle chaîne de caractères.</td> - </tr> - <tr> - <td>{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}</td> - <td>Retourne le sous-ensemble spécifié de la chaîne de caractères, en spécifiant soit des indices de début et de fin, soit l'indice de début et une longueur.</td> - </tr> - <tr> - <td>{{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}</td> - <td>Ces fonctions utilisent des expressions rationnelles.</td> - </tr> - <tr> - <td>{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}}</td> - <td> - <p>Retourne la chaîne tout en minuscules ou tout en majuscules, respectivement.</p> - </td> - </tr> - <tr> - <td>{{jsxref("String.normalize", "normalize")}}</td> - <td>Retourne la Forme Normalisée Unicode de la chaîne de caractères appelante.</td> - </tr> - <tr> - <td>{{jsxref("String.repeat", "repeat")}}</td> - <td>Retourne une chaîne constituée des éléments de l'objet répétés le nombre de fois donné.</td> - </tr> - <tr> - <td>{{jsxref("String.trim", "trim")}}</td> - <td>Retire les blancs en début et en fin de chaîne.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Méthode</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td> + {{jsxref("String.charAt", "charAt")}}, + {{jsxref("String.charCodeAt", "charCodeAt")}}, + {{jsxref("String.codePointAt", "codePointAt")}} + </td> + <td> + Retourne le caractère ou le code de caractère à la position spécifiée de + la chaîne de caractères. + </td> + </tr> + <tr> + <td> + {{jsxref("String.indexOf", "indexOf")}}, + {{jsxref("String.lastIndexOf", "lastIndexOf")}} + </td> + <td> + Retourne la position de la sous-chaîne spécifiée dans la chaîne de + caractères, ou la dernière position de la sous-chaîne spécifiée, + respectivement. + </td> + </tr> + <tr> + <td> + {{jsxref("String.startsWith", "startsWith")}}, + {{jsxref("String.endsWith", "endsWith")}}, + {{jsxref("String.includes", "includes")}} + </td> + <td> + Retourne le fait de savoir si la chaîne de caractères courante commence + ou non par, finit ou non par, ou contient ou non, la chaîne spécifiée. + </td> + </tr> + <tr> + <td>{{jsxref("String.concat", "concat")}}</td> + <td> + Combine le texte de deux chaînes de caractères et retourne une nouvelle + chaîne de caractères. + </td> + </tr> + <tr> + <td> + {{jsxref("String.fromCharCode", "fromCharCode")}}, + {{jsxref("String.fromCodePoint", "fromCodePoint")}}, + </td> + <td> + Construit une chaîne de caractères à partir de la séquence de valeurs + Unicode fournie. Cette méthode est une méthode de la classe String et + non une instance de String. + </td> + </tr> + <tr> + <td>{{jsxref("String.split", "split")}}</td> + <td> + Découpe un objet <code>String</code> en un tableau de chaînes de + caractères en découpant la chaîne de caractères en sous-chaînes. + </td> + </tr> + <tr> + <td>{{jsxref("String.slice", "slice")}}</td> + <td> + Extrait une partie de la chaîne de caractères et retourne une nouvelle + chaîne de caractères. + </td> + </tr> + <tr> + <td> + {{jsxref("String.substring", "substring")}}, + {{jsxref("String.substr", "substr")}} + </td> + <td> + Retourne le sous-ensemble spécifié de la chaîne de caractères, en + spécifiant soit des indices de début et de fin, soit l'indice de début + et une longueur. + </td> + </tr> + <tr> + <td> + {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, + {{jsxref("String.replace", "replace")}}, + {{jsxref("String.search", "search")}} + </td> + <td>Ces fonctions utilisent des expressions rationnelles.</td> + </tr> + <tr> + <td> + {{jsxref("String.toLowerCase", "toLowerCase")}}, + {{jsxref("String.toUpperCase", "toUpperCase")}} + </td> + <td> + <p> + Retourne la chaîne tout en minuscules ou tout en majuscules, + respectivement. + </p> + </td> + </tr> + <tr> + <td>{{jsxref("String.normalize", "normalize")}}</td> + <td> + Retourne la Forme Normalisée Unicode de la chaîne de caractères + appelante. + </td> + </tr> + <tr> + <td>{{jsxref("String.repeat", "repeat")}}</td> + <td> + Retourne une chaîne constituée des éléments de l'objet répétés le nombre + de fois donné. + </td> + </tr> + <tr> + <td>{{jsxref("String.trim", "trim")}}</td> + <td>Retire les blancs en début et en fin de chaîne.</td> + </tr> + </tbody> </table> -<h3 id="Les_littéraux_de_modèle_multi-lignes">Les littéraux de modèle multi-lignes</h3> +### Les littéraux de modèle multi-lignes -<p>Le <a href="/fr/docs/Web/JavaScript/Reference/Litt%C3%A9raux_gabarits">littéraux de modèle</a> sont des littéraux de chaîne de caractères permettant des expressions intégrées. Avec eux, vous pouvez utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation de chaînes.</p> +Le [littéraux de modèle](/fr/docs/Web/JavaScript/Reference/Litt%C3%A9raux_gabarits) sont des littéraux de chaîne de caractères permettant des expressions intégrées. Avec eux, vous pouvez utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation de chaînes. -<p>Les littéraux de gabarits sont délimités par des <a href="https://fr.wikipedia.org/wiki/Accent_grave">accents graves</a> (ou <em>backticks` `</em> en anglais), au lieu des apostrophes simples ou doubles. Les littéraux de modèle peuvent contenir des marque-places. Ceux-ci sont indiqués par le signe dollar et des accolades (<code>${expression}</code>).</p> +Les littéraux de gabarits sont délimités par des [accents graves](https://fr.wikipedia.org/wiki/Accent_grave) (ou _backticks\` \`_ en anglais), au lieu des apostrophes simples ou doubles. Les littéraux de modèle peuvent contenir des marque-places. Ceux-ci sont indiqués par le signe dollar et des accolades (`${expression}`). -<h4 id="Multi-lignes">Multi-lignes</h4> +#### Multi-lignes -<p>Tout caractère de passage à la ligne inséré dans le source fait partie du littéral de modèle. En utilisant les chaînes de caractères normales, vous auriez eu à utiliser la syntaxe suivante afin d'avoir des chaînes de caractères multi-lignes :</p> +Tout caractère de passage à la ligne inséré dans le source fait partie du littéral de modèle. En utilisant les chaînes de caractères normales, vous auriez eu à utiliser la syntaxe suivante afin d'avoir des chaînes de caractères multi-lignes : -<pre class="brush: js">console.log('chaîne ligne de texte 1\n\ +```js +console.log('chaîne ligne de texte 1\n\ chaîne ligne de texte 2'); // "chaîne ligne de texte 1 -// chaîne ligne de texte 2"</pre> +// chaîne ligne de texte 2" +``` -<p>Pour obtenir le même effet avec des chaînes de caractères multi-lignes, vous pouvez maintenant écrire :</p> +Pour obtenir le même effet avec des chaînes de caractères multi-lignes, vous pouvez maintenant écrire : -<pre class="brush: js">console.log(`chaîne ligne de texte 1 +```js +console.log(`chaîne ligne de texte 1 chaîne ligne de texte 2`); // "chaîne ligne de texte 1 -// chaîne ligne de texte 2"</pre> +// chaîne ligne de texte 2" +``` -<h4 id="Expressions_intégrées">Expressions intégrées</h4> +#### Expressions intégrées -<p>Pour intégrer des expressions dans des chaînes normales, vous devriez utiliser la syntaxe suivante :</p> +Pour intégrer des expressions dans des chaînes normales, vous devriez utiliser la syntaxe suivante : -<pre class="brush: js">var a = 5; +```js +var a = 5; var b = 10; console.log('Quinze vaut ' + (a + b) + ' et\npas ' + (2 * a + b) + '.'); // "Quinze vaut 15 et -// pas 20."</pre> +// pas 20." +``` -<p>Maintenant, avec les modèles, vous pouvez utiliser du sucre syntaxique rendant plus lisibles les substitutions comme celle-ci :</p> +Maintenant, avec les modèles, vous pouvez utiliser du sucre syntaxique rendant plus lisibles les substitutions comme celle-ci : -<pre class="brush: js">var a = 5; +```js +var a = 5; var b = 10; console.log(`Quinze vaut ${a + b} et\npas ${2 * a + b}.`); // "Quinze vaut 15 et -// pas 20."</pre> +// pas 20." +``` -<p>Pour plus d'informations, voir les <a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits">Littéraux de modèles</a> dans la <a href="/fr/docs/Web/JavaScript/Reference">Référence JavaScript</a>.</p> +Pour plus d'informations, voir les [Littéraux de modèles](/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits) dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). -<h2 id="Internationalisation">Internationalisation</h2> +## Internationalisation -<p>L'objet {{jsxref("Intl")}} est l'espace de noms pour l'API d'Internationalisation de l'ECMAScript, qui fournit des fonctionnalités de comparaison de chaînes de caractères, de formatage de nombres, et de formatage des dates et heures prenant en compte la langue. Les constructeurs pour les objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}} sont des propriétés de l'objet <code>Intl</code>.</p> +L'objet {{jsxref("Intl")}} est l'espace de noms pour l'API d'Internationalisation de l'ECMAScript, qui fournit des fonctionnalités de comparaison de chaînes de caractères, de formatage de nombres, et de formatage des dates et heures prenant en compte la langue. Les constructeurs pour les objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}} sont des propriétés de l'objet `Intl`. -<h3 id="Formatage_date_et_heure">Formatage date et heure</h3> +### Formatage date et heure -<p>L'objet {{jsxref("DateTimeFormat")}} est utile pour formater la date et l'heure. Ce qui suit formate une date en anglais telle qu'utilisée aux États-Unis (le résultat sera différent dans une autre zone horaire).</p> +L'objet {{jsxref("DateTimeFormat")}} est utile pour formater la date et l'heure. Ce qui suit formate une date en anglais telle qu'utilisée aux États-Unis (le résultat sera différent dans une autre zone horaire). -<pre class="brush: js">var msParJour = 24 * 60 * 60 * 1000; +```js +var msParJour = 24 * 60 * 60 * 1000; // 17 juillet 2014 00:00:00 UTC. var _17juillet2014 = new Date(msParJour * (44 * 365 + 11 + 197)); @@ -207,13 +286,14 @@ var options = { year: "2-digit", month: "2-digit", day: "2-digit", var dateHeureAmericaine = new Intl.DateTimeFormat("en-US", options).format; console.log(dateHeureAmericaine(_17juillet2014)); // 07/16/14, 5:00 PM PDT -</pre> +``` -<h3 id="Formatage_des_nombres">Formatage des nombres</h3> +### Formatage des nombres -<p>L'objet {{jsxref("NumberFormat")}} est utile pour formater les nombres, par exemple, les devises :</p> +L'objet {{jsxref("NumberFormat")}} est utile pour formater les nombres, par exemple, les devises : -<pre class="brush: js">var prixDeLEssence = new Intl.NumberFormat("en-US", +```js +var prixDeLEssence = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 3 }); @@ -223,32 +303,34 @@ var decimalesHanRMBEnChine = new Intl.NumberFormat("zh-CN-u-nu-hanidec", { style: "currency", currency: "CNY" }); console.log(decimalesHanRMBEnChine.format(1314.25)); // ¥ 一,三一四.二五 -</pre> +``` -<h3 id="Ordonnancement">Ordonnancement</h3> +### Ordonnancement -<p>L'objet {{jsxref("Collator")}} est utile pour comparer et trier des chaînes de caractères.</p> +L'objet {{jsxref("Collator")}} est utile pour comparer et trier des chaînes de caractères. -<p>Par exemple, il y a en fait deux ordres de tri en allemand, <em>annuaire</em> et <em>dictionnaire</em>. Annuaire met l'accent sur le son, et c'est comme si "ä", "ö", etc. étaient étendus en "ae", "oe", etc. avant le tri :</p> +Par exemple, il y a en fait deux ordres de tri en allemand, _annuaire_ et _dictionnaire_. Annuaire met l'accent sur le son, et c'est comme si "ä", "ö", etc. étaient étendus en "ae", "oe", etc. avant le tri : -<pre class="brush: js">var noms = ['Hochberg', 'Hönigswald', 'Holzman']; +```js +var noms = ['Hochberg', 'Hönigswald', 'Holzman']; var annuaireAllemand = new Intl.Collator('de-DE-u-co-phonebk'); // Comme si tri de ['Hochberg', 'Hoenigswald', 'Holzman']: console.log(noms.sort(annuaireAllemand.compare).join(', ')); // Affiche "Hochberg, Hönigswald, Holzman" -</pre> +``` -<p>Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri est perceptible (sauf lors du tri de mots ne différant <em>que</em> par des umlauts, comme <em>schon</em> avant <em>schön</em>).</p> +Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri est perceptible (sauf lors du tri de mots ne différant _que_ par des umlauts, comme *schon* avant _schön_). -<pre class="brush: js">var dictionnaireAllemand = new Intl.Collator('de-DE-u-co-dict'); +```js +var dictionnaireAllemand = new Intl.Collator('de-DE-u-co-dict'); // Comme si tri de ["Hochberg", "Honigswald", "Holzman"]: console.log(nom.sort(dictionnaireAllemand.compare).join(', ')); // Affiche "Hochberg, Holzman, Hönigswald" -</pre> +``` -<p>Pour plus d'informations sur l'API {{jsxref("Intl")}}, voir aussi <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducing the JavaScript Internationalization API</a>.</p> +Pour plus d'informations sur l'API {{jsxref("Intl")}}, voir aussi [Introducing the JavaScript Internationalization API](https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/). -<p>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</p> +{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}} diff --git a/files/fr/web/javascript/guide/using_promises/index.md b/files/fr/web/javascript/guide/using_promises/index.md index 5f30035f51..95b35d1884 100644 --- a/files/fr/web/javascript/guide/using_promises/index.md +++ b/files/fr/web/javascript/guide/using_promises/index.md @@ -10,16 +10,17 @@ tags: translation_of: Web/JavaScript/Guide/Using_promises original_slug: Web/JavaScript/Guide/Utiliser_les_promesses --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}} -<p>Une promesse est un objet ({{jsxref("Promise")}}) qui représente la complétion ou l'échec d'une opération asynchrone. La plupart du temps, on « consomme » des promesses et c'est donc ce que nous verrons dans la première partie de ce guide pour ensuite expliquer comment les créer.</p> +Une promesse est un objet ({{jsxref("Promise")}}) qui représente la complétion ou l'échec d'une opération asynchrone. La plupart du temps, on « consomme » des promesses et c'est donc ce que nous verrons dans la première partie de ce guide pour ensuite expliquer comment les créer. -<p>En résumé, une promesse est un objet qui est renvoyé et auquel on attache des <em>callbacks</em> plutôt que de passer des <em>callbacks</em> à une fonction. Ainsi, au lieu d'avoir une fonction qui prend deux <em>callbacks</em> en arguments :</p> +En résumé, une promesse est un objet qui est renvoyé et auquel on attache des _callbacks_ plutôt que de passer des _callbacks_ à une fonction. Ainsi, au lieu d'avoir une fonction qui prend deux _callbacks_ en arguments : -<pre class="brush: js">function faireQqcALAncienne(successCallback, failureCallback){ +```js +function faireQqcALAncienne(successCallback, failureCallback){ console.log("C'est fait"); // réussir une fois sur deux - if (Math.random() > .5) { + if (Math.random() > .5) { successCallback("Réussite"); } else { failureCallback("Échec"); @@ -36,16 +37,16 @@ function failureCallback(erreur) { } faireQqcALAncienne(successCallback, failureCallback); +``` -</pre> +On aura une fonction qui renvoie une promesse et on attachera les callbacks sur cette promesse : -<p>On aura une fonction qui renvoie une promesse et on attachera les callbacks sur cette promesse :</p> - -<pre class="brush: js">function faireQqc() { - return new Promise((successCallback, failureCallback) => { +```js +function faireQqc() { + return new Promise((successCallback, failureCallback) => { console.log("C'est fait"); // réussir une fois sur deux - if (Math.random() > .5) { + if (Math.random() > .5) { successCallback("Réussite"); } else { failureCallback("Échec"); @@ -55,58 +56,61 @@ faireQqcALAncienne(successCallback, failureCallback); const promise = faireQqc(); promise.then(successCallback, failureCallback); -</pre> +``` -<p>ou encore :</p> +ou encore : -<pre class="brush: js">faireQqc().then(successCallback, failureCallback); -</pre> +```js +faireQqc().then(successCallback, failureCallback); +``` -<p>Cette dernière forme est ce qu'on appelle <em>un appel de fonction asynchrone</em>. Cette convention possède différents avantages dont le premier est <em>le chaînage</em>.</p> +Cette dernière forme est ce qu'on appelle _un appel de fonction asynchrone_. Cette convention possède différents avantages dont le premier est _le chaînage_. -<h2 id="Garanties">Garanties</h2> +## Garanties -<p>À la différence des imbrications de <em>callbacks</em>, une promesse apporte certaines garanties :</p> +À la différence des imbrications de _callbacks_, une promesse apporte certaines garanties : -<ul> - <li>Les <em>callbacks</em> ne seront jamais appelés avant la fin du parcours de la boucle d'évènements JavaScript courante</li> - <li>Les <em>callbacks</em> ajoutés grâce à <code>then</code> seront appelés, y compris après le succès ou l'échec de l'opération asynchrone</li> - <li>Plusieurs <em>callbacks</em> peuvent être ajoutés en appelant <code>then</code> plusieurs fois, ils seront alors exécutés l'un après l'autre selon l'ordre dans lequel ils ont été insérés.</li> -</ul> +- Les _callbacks_ ne seront jamais appelés avant la fin du parcours de la boucle d'évènements JavaScript courante +- Les _callbacks_ ajoutés grâce à `then` seront appelés, y compris après le succès ou l'échec de l'opération asynchrone +- Plusieurs _callbacks_ peuvent être ajoutés en appelant `then` plusieurs fois, ils seront alors exécutés l'un après l'autre selon l'ordre dans lequel ils ont été insérés. -<h2 id="Chaînage_des_promesses">Chaînage des promesses</h2> +## Chaînage des promesses -<p>Un besoin fréquent est d'exécuter deux ou plus d'opérations asynchrones les unes à la suite des autres, avec chaque opération qui démarre lorsque la précédente a réussi et en utilisant le résultat de l'étape précédente. Ceci peut être réalisé en créant une chaîne de promesses.</p> +Un besoin fréquent est d'exécuter deux ou plus d'opérations asynchrones les unes à la suite des autres, avec chaque opération qui démarre lorsque la précédente a réussi et en utilisant le résultat de l'étape précédente. Ceci peut être réalisé en créant une chaîne de promesses. -<p>La méthode <code>then()</code> renvoie une <em>nouvelle</em> promesse, différente de la première :</p> +La méthode `then()` renvoie une _nouvelle_ promesse, différente de la première : -<pre class="brush: js">const promise = faireQqc(); +```js +const promise = faireQqc(); const promise2 = promise.then(successCallback, failureCallback); -</pre> +``` -<p>ou encore :</p> +ou encore : -<pre class="brush: js">const promise2 = faireQqc().then(successCallback, failureCallback); -</pre> +```js +const promise2 = faireQqc().then(successCallback, failureCallback); +``` -<p>La deuxième promesse (<code>promise2</code>) indique l'état de complétion, pas uniquement pour <code>faireQqc()</code> mais aussi pour le callback qui lui a été passé (<code>successCallback</code> ou <code>failureCallback</code>) qui peut aussi être une fonction asynchrone qui renvoie une promesse. Lorsque c'est le cas, tous les <em>callbacks</em> ajoutés à <code>promise2</code> forment une file derrière la promesse renvoyée par <code>successCallback</code> ou <code>failureCallback</code>.</p> +La deuxième promesse (`promise2`) indique l'état de complétion, pas uniquement pour `faireQqc()` mais aussi pour le callback qui lui a été passé (`successCallback` ou `failureCallback`) qui peut aussi être une fonction asynchrone qui renvoie une promesse. Lorsque c'est le cas, tous les _callbacks_ ajoutés à `promise2` forment une file derrière la promesse renvoyée par `successCallback` ou `failureCallback`. -<p>Autrement dit, chaque promesse représente l'état de complétion d'une étape asynchrone au sein de cette succession d'étapes.</p> +Autrement dit, chaque promesse représente l'état de complétion d'une étape asynchrone au sein de cette succession d'étapes. -<p>Auparavant, l'enchaînement de plusieurs opérations asynchrones déclenchait une pyramide dantesque de <em>callbacks</em> :</p> +Auparavant, l'enchaînement de plusieurs opérations asynchrones déclenchait une pyramide dantesque de _callbacks_ : -<pre class="brush: js">faireQqc(function(result) { +```js +faireQqc(function(result) { faireAutreChose(result, function(newResult) { faireUnTroisiemeTruc(newResult, function(finalResult) { console.log('Résultat final :' + finalResult); }, failureCallback); }, failureCallback); }, failureCallback); -</pre> +``` -<p>Grâce à des fonctions plus modernes et aux promesses, on attache les <em>callbacks</em> aux promesses qui sont renvoyées. On peut ainsi construire une <em>chaîne de promesses</em> :</p> +Grâce à des fonctions plus modernes et aux promesses, on attache les _callbacks_ aux promesses qui sont renvoyées. On peut ainsi construire une _chaîne de promesses_ : -<pre class="brush: js">faireQqc().then(function(result) { +```js +faireQqc().then(function(result) { return faireAutreChose(result); }) .then(function(newResult) { @@ -116,68 +120,69 @@ const promise2 = promise.then(successCallback, failureCallback); console.log('Résultat final : ' + finalResult); }) .catch(failureCallback); -</pre> +``` -<p>Les arguments passés à <code>then</code> sont optionnels. La forme <code>catch(failureCallback)</code> est un alias plus court pour <code>then(null, failureCallback)</code>. Ces chaînes de promesses sont parfois construites avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">des fonctions fléchées</a> :</p> +Les arguments passés à `then` sont optionnels. La forme `catch(failureCallback)` est un alias plus court pour `then(null, failureCallback)`. Ces chaînes de promesses sont parfois construites avec [des fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) : -<pre class="brush: js">faireQqc() -.then(result => faireAutreChose(result)) -.then(newResult => faireUnTroisiemeTruc(newResult)) -.then(finalResult => { +```js +faireQqc() +.then(result => faireAutreChose(result)) +.then(newResult => faireUnTroisiemeTruc(newResult)) +.then(finalResult => { console.log('Résultat final : ' + finalResult); }) .catch(failureCallback); -</pre> +``` -<div class="warning"> -<p><strong>Attention :</strong> cela implique que les fonctions asynchrones renvoient toutes des promesses, sinon les <em>callbacks</em> ne pourront être chaînés et les erreurs ne seront pas interceptées (les fonctions fléchées ont une valeur de retour implicite si les accolades ne sont pas utilisées : <code>() => x</code> est synonyme de <code>() => { return x; }</code>).</p> -</div> +> **Attention :** cela implique que les fonctions asynchrones renvoient toutes des promesses, sinon les _callbacks_ ne pourront être chaînés et les erreurs ne seront pas interceptées (les fonctions fléchées ont une valeur de retour implicite si les accolades ne sont pas utilisées : `() => x` est synonyme de `() => { return x; }`). -<h3 id="Chaînage_après_un_catch">Chaînage après un catch</h3> +### Chaînage après un catch -<p>Il est possible de chaîner de nouvelles actions <em>après</em> un rejet, c'est-à-dire un <code>catch</code>. C'est utile pour accomplir de nouvelles actions après qu'une action ait échoué dans la chaine. Par exemple :</p> +Il est possible de chaîner de nouvelles actions _après_ un rejet, c'est-à-dire un `catch`. C'est utile pour accomplir de nouvelles actions après qu'une action ait échoué dans la chaine. Par exemple : -<pre class="brush: js">new Promise((resolve, reject) => { +```js +new Promise((resolve, reject) => { console.log('Initial'); resolve(); }) -.then(() => { +.then(() => { throw new Error('Something failed'); console.log('Do this'); }) -.catch(() => { +.catch(() => { console.error('Do that'); }) -.then(() => { +.then(() => { console.log('Do this whatever happened before'); }); -</pre> +``` -<p>Cela va produire la sortie suivante :</p> +Cela va produire la sortie suivante : -<pre>Initial -Do that -Do this whatever happened before -</pre> + Initial + Do that + Do this whatever happened before -<p>Notez que le texte <q>Do this</q> n'est pas affiché car l'erreur <q>Something failed</q> a produit un rejet.</p> +Notez que le texte "Do this" n'est pas affiché car l'erreur "Something failed" a produit un rejet. -<h2 id="Propagation_des_erreurs">Propagation des erreurs</h2> +## Propagation des erreurs -<p>Dans les exemples précédents, <code>failureCallback</code> était présent trois fois dans la pyramide de <em>callbacks</em> et une seule fois, à la fin, dans la chaîne des promesses :</p> +Dans les exemples précédents, `failureCallback` était présent trois fois dans la pyramide de _callbacks_ et une seule fois, à la fin, dans la chaîne des promesses : -<pre class="brush: js">faireQqc() -.then(result => faireAutreChose(result)) -.then(newResult => faireUnTroisiemeTruc(newResult)) -.then(finalResult => console.log('Résultat final : ' + finalResult)) +```js +faireQqc() +.then(result => faireAutreChose(result)) +.then(newResult => faireUnTroisiemeTruc(newResult)) +.then(finalResult => console.log('Résultat final : ' + finalResult)) .catch(failureCallback); -</pre> +``` -<p>En fait, dès qu'une exception est levée, la chaîne de promesses utilisera le premier <code>catch()</code> ou <code>onRejected</code> disponible. Ce fonctionnement est assez proche de ce qu'on peut trouver pour du code synchrone :</p> +En fait, dès qu'une exception est levée, la chaîne de promesses utilisera le premier `catch()` ou `onRejected` disponible. Ce fonctionnement est assez proche de ce qu'on peut trouver pour du code synchrone : -<pre class="brush: js">try { +```js +try { const result = syncFaireQqc(); const newResult = syncFaireQqcAutre(result); const finalResult = syncFaireUnTroisiemeTruc(newResult); @@ -185,11 +190,12 @@ Do this whatever happened before } catch(error) { failureCallback(error); } -</pre> +``` -<p>Cette symétrie entre le code asynchrone et le code synchrone atteint son paroxysme avec le couple d'opérateurs <a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function"><code>async</code>/<code>await</code></a> d'ECMAScript 2017:</p> +Cette symétrie entre le code asynchrone et le code synchrone atteint son paroxysme avec le couple d'opérateurs [`async`/`await`](/fr/docs/Web/JavaScript/Reference/Instructions/async_function) d'ECMAScript 2017: -<pre class="brush: js">async function toto() { +```js +async function toto() { try { const result = await faireQqc(); const newResult = await faireQqcAutre(result); @@ -199,117 +205,126 @@ Do this whatever happened before failureCallback(error); } } -</pre> +``` -<p>Ce fonctionnement est construit sur les promesses et <code>faireQqc()</code> est la même fonction que celle utilisée dans les exemples précédents.</p> +Ce fonctionnement est construit sur les promesses et `faireQqc()` est la même fonction que celle utilisée dans les exemples précédents. -<p>Les promesses permettent de résoudre les problèmes de cascades infernales de <em>callbacks</em> notamment en interceptant les différentes erreurs (exceptions et erreurs de programmation). Ceci est essentiel pour obtenir une composition fonctionnelle des opérations asynchrones.</p> +Les promesses permettent de résoudre les problèmes de cascades infernales de _callbacks_ notamment en interceptant les différentes erreurs (exceptions et erreurs de programmation). Ceci est essentiel pour obtenir une composition fonctionnelle des opérations asynchrones. -<h2 id="Évènements_liés_à_la_rupture_dune_promesse">Évènements liés à la rupture d'une promesse</h2> +## Évènements liés à la rupture d'une promesse -<p>Lorsqu'une promesse est rompue/rejetée, un des deux évènements suivants est envoyé au niveau de la portée globale ({{domxref("window")}} ou {{domxref("Worker")}} si le script est utilisé dans un <em>worker</em>) :</p> +Lorsqu'une promesse est rompue/rejetée, un des deux évènements suivants est envoyé au niveau de la portée globale ({{domxref("window")}} ou {{domxref("Worker")}} si le script est utilisé dans un _worker_) : -<dl> - <dt>{{domxref("Window.rejectionhandled_event","rejectionhandled")}}</dt> - <dd>Cet évènement est envoyé lorsqu'une promesse est rompue et après que le rejet ai été traité par la fonction <code>reject</code> associée à la promesse.</dd> - <dt>{{domxref("Window.unhandledrejection_event","unhandledrejection")}}</dt> - <dd>Cet évènement est envoyé lorsque la promesse est rompue et qu'aucune fonction n'a été définie pour gérer le rejet de la promesse.</dd> -</dl> +- {{domxref("Window.rejectionhandled_event","rejectionhandled")}} + - : Cet évènement est envoyé lorsqu'une promesse est rompue et après que le rejet ai été traité par la fonction `reject` associée à la promesse. +- {{domxref("Window.unhandledrejection_event","unhandledrejection")}} + - : Cet évènement est envoyé lorsque la promesse est rompue et qu'aucune fonction n'a été définie pour gérer le rejet de la promesse. -<p>Dans les deux cas, l'évènement (dont le type est {{domxref("PromiseRejectionEvent")}}) aura deux propriétés :</p> +Dans les deux cas, l'évènement (dont le type est {{domxref("PromiseRejectionEvent")}}) aura deux propriétés : -<dl> - <dt>{{domxref("PromiseRejectionEvent.promise","promise")}}</dt> - <dd>La promesse qui a été rompue.</dd> - <dt>{{domxref("PromiseRejectionEvent.reason","reason")}}</dt> - <dd>La raison pour laquelle la promesse a été rompue.</dd> -</dl> +- {{domxref("PromiseRejectionEvent.promise","promise")}} + - : La promesse qui a été rompue. +- {{domxref("PromiseRejectionEvent.reason","reason")}} + - : La raison pour laquelle la promesse a été rompue. -<p>Gérer ces évènements permet d'avoir une ultime méthode pour gérer le rejet des promesses. Cela peut notamment s'avérer utile pour le débogage. Ces évènements sont déclenchés au niveau global et permettent ainsi d'intercepter les erreurs pour chaque contexte (fenêtre ou <em>worker</em>)</p> +Gérer ces évènements permet d'avoir une ultime méthode pour gérer le rejet des promesses. Cela peut notamment s'avérer utile pour le débogage. Ces évènements sont déclenchés au niveau global et permettent ainsi d'intercepter les erreurs pour chaque contexte (fenêtre ou _worker_) -<pre class="brush: js">window.addEventListener("unhandledrejection", event => { +```js +window.addEventListener("unhandledrejection", event => { // Examiner la ou les promesse(s) qui posent problème en debug // Nettoyer ce qui doit l'être quand ça se produit en réel -}, false);</pre> +}, false); +``` -<h2 id="Envelopper_les_callbacks_des_API">Envelopper les <em>callbacks</em> des API</h2> +## Envelopper les _callbacks_ des API -<p>Il est possible de créer un objet {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des <em>callbacks</em> passés en arguments. C'est notamment le cas de la méthode {{domxref("WindowTimers.setTimeout", "setTimeout()")}} :</p> +Il est possible de créer un objet {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des _callbacks_ passés en arguments. C'est notamment le cas de la méthode {{domxref("WindowTimers.setTimeout", "setTimeout()")}} : -<pre class="brush: js">setTimeout(() => saySomething("10 seconds passed"), 10 * 1000); -</pre> +```js +setTimeout(() => saySomething("10 seconds passed"), 10 * 1000); +``` -<p>Si on mélange des <em>callbacks</em> et des promesses, cela sera problématique. Si <code>saySomething</code> échoue ou contient des erreurs, rien n'interceptera l'erreur.</p> +Si on mélange des _callbacks_ et des promesses, cela sera problématique. Si `saySomething` échoue ou contient des erreurs, rien n'interceptera l'erreur. -<p>Pour ces fonctions, la meilleure pratique consiste à les <em>envelopper</em> dans des promesses au plus bas niveau possible et de ne plus les appeler directement :</p> +Pour ces fonctions, la meilleure pratique consiste à les _envelopper_ dans des promesses au plus bas niveau possible et de ne plus les appeler directement : -<pre class="brush: js">const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); +```js +const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); -wait(10 * 1000).then(() => saySomething("10 seconds")).catch(failureCallback); -</pre> +wait(10 * 1000).then(() => saySomething("10 seconds")).catch(failureCallback); +``` -<p>Le constructeur <code>Promise</code> prend en argument une fonction et nous permet de la convertir manuellement en une promesse. Ici, vu que <code>setTimeout</code> n'échoue pas vraiment, on laisse de côté la gestion de l'échec.</p> +Le constructeur `Promise` prend en argument une fonction et nous permet de la convertir manuellement en une promesse. Ici, vu que `setTimeout` n'échoue pas vraiment, on laisse de côté la gestion de l'échec. -<h2 id="Composition">Composition</h2> +## Composition -<p>{{jsxref("Promise.resolve()")}} et {{jsxref("Promise.reject()")}} sont des méthodes qui permettent de créer des promesses déjà tenues ou rompues.</p> +{{jsxref("Promise.resolve()")}} et {{jsxref("Promise.reject()")}} sont des méthodes qui permettent de créer des promesses déjà tenues ou rompues. -<p>{{jsxref("Promise.all()")}} et {{jsxref("Promise.race()")}} sont deux outils de composition qui permettent de mener des opérations asynchrones en parallèle.</p> +{{jsxref("Promise.all()")}} et {{jsxref("Promise.race()")}} sont deux outils de composition qui permettent de mener des opérations asynchrones en parallèle. -<p>On peut lancer des opérations en parallèles et attendre qu'elles soient toutes finies de cette façon :</p> +On peut lancer des opérations en parallèles et attendre qu'elles soient toutes finies de cette façon : -<pre class="brush: js">Promise.all([func1(), func2(), func3()]) -.then(([resultat1, resultat2, resultat3]) => { /* où on utilise resultat1/2/3 */ });</pre> +```js +Promise.all([func1(), func2(), func3()]) +.then(([resultat1, resultat2, resultat3]) => { /* où on utilise resultat1/2/3 */ }); +``` -<p>Il est possible de construire une composition séquentielle de la façon suivante :</p> +Il est possible de construire une composition séquentielle de la façon suivante : -<pre class="brush: js">[func1, func2].reduce((p, f) => p.then(f), Promise.resolve()); -</pre> +```js +[func1, func2].reduce((p, f) => p.then(f), Promise.resolve()); +``` -<p>Dans ce fragment de code, on réduit un tableau de fonctions asynchrones en une chaîne de promesse équivalente à : <code>Promise.resolve().then(func1).then(func2);</code></p> +Dans ce fragment de code, on réduit un tableau de fonctions asynchrones en une chaîne de promesse équivalente à : `Promise.resolve().then(func1).then(func2);` -<p>On peut également accomplir cela avec une fonction de composition réutilisable :</p> +On peut également accomplir cela avec une fonction de composition réutilisable : -<pre class="brush: js">const applyAsync = (acc, val) => acc.then(val); -const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));</pre> +```js +const applyAsync = (acc, val) => acc.then(val); +const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x)); +``` -<p>La fonction <code>composeAsync</code> accepte autant de fonctions que nécessaire comme arguments et renvoie une nouvelle fonction qui prend une valeur initiale pour la passer à travers ces étapes de compositions. Cette façon de faire garantit que les fonctions, qu'elles soient synchrones ou asynchrones, sont exécutées dans le bon ordre :</p> +La fonction `composeAsync` accepte autant de fonctions que nécessaire comme arguments et renvoie une nouvelle fonction qui prend une valeur initiale pour la passer à travers ces étapes de compositions. Cette façon de faire garantit que les fonctions, qu'elles soient synchrones ou asynchrones, sont exécutées dans le bon ordre : -<pre class="brush: js">const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2); -transformData(data);</pre> +```js +const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2); +transformData(data); +``` -<p>Avec ECMAScript 2017, on peut obtenir une composition séquentielle plus simplement avec les opérateurs <code>await</code>/<code>async</code> :</p> +Avec ECMAScript 2017, on peut obtenir une composition séquentielle plus simplement avec les opérateurs `await`/`async` : -<pre class="brush: js">let result; +```js +let result; for(const f of [func1, func2, func3]) { result = await f(result); -} </pre> +} +``` -<h2 id="Gestion_du_temps">Gestion du temps</h2> +## Gestion du temps -<p>Pour éviter de mauvaises surprises, les fonctions passées à <code>then()</code> ne seront jamais appelées de façon synchrone, y compris lorsqu'il s'agit d'une promesse déjà résolue :</p> +Pour éviter de mauvaises surprises, les fonctions passées à `then()` ne seront jamais appelées de façon synchrone, y compris lorsqu'il s'agit d'une promesse déjà résolue : -<pre class="brush: js">Promise.resolve().then(() => console.log(2)); +```js +Promise.resolve().then(() => console.log(2)); console.log(1); // 1, 2 -</pre> +``` -<p>En fait, la fonction passée à <code>then</code><code>()</code> est placée dans une file de micro-tâches qui sont exécutées lorsque cette file est vidée à la fin de la boucle d'évènements JavaScript :</p> +En fait, la fonction passée à ` then``() ` est placée dans une file de micro-tâches qui sont exécutées lorsque cette file est vidée à la fin de la boucle d'évènements JavaScript : -<pre class="brush: js">var wait = ms => new Promise(resolve => setTimeout(resolve, ms)); +```js +var wait = ms => new Promise(resolve => setTimeout(resolve, ms)); -wait().then(() => console.log(4)); -Promise.resolve().then(() => console.log(2)).then(() => console.log(3)); +wait().then(() => console.log(4)); +Promise.resolve().then(() => console.log(2)).then(() => console.log(3)); console.log(1); // 1, 2, 3, 4 -</pre> +``` -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{jsxref("Promise.then()")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function"><code>async</code>/<code>await</code></a></li> - <li><a href="http://promisesaplus.com/">La spécification Promises/A+</a></li> - <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson : We have a problem with promises — Common mistakes with promises (article en anglais)</a></li> -</ul> +- {{jsxref("Promise.then()")}} +- [`async`/`await`](/fr/docs/Web/JavaScript/Reference/Instructions/async_function) +- [La spécification Promises/A+](http://promisesaplus.com/) +- [Nolan Lawson : We have a problem with promises — Common mistakes with promises (article en anglais)](http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) -<p>{{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}</p> +{{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}} diff --git a/files/fr/web/javascript/guide/working_with_objects/index.md b/files/fr/web/javascript/guide/working_with_objects/index.md index f02ca6ff02..214902c6dd 100644 --- a/files/fr/web/javascript/guide/working_with_objects/index.md +++ b/files/fr/web/javascript/guide/working_with_objects/index.md @@ -12,56 +12,60 @@ tags: translation_of: Web/JavaScript/Guide/Working_with_Objects original_slug: Web/JavaScript/Guide/Utiliser_les_objets --- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div> +{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}} -<p>JavaScript est conçu autour d'un paradigme simple, basé sur les objets. Un objet est un ensemble de propriétés et une propriété est une association entre un nom (aussi appelé <em>clé</em>) et une valeur. La valeur d'une propriété peut être une fonction, auquel cas la propriété peut être appelée « méthode ». En plus des objets natifs fournis par l'environnement, il est possible de construire ses propres objets. Ce chapitre aborde la manipulation d'objets, l'utilisation des propriétés, fonctions et méthodes, il explique également comment créer ses objets.</p> +JavaScript est conçu autour d'un paradigme simple, basé sur les objets. Un objet est un ensemble de propriétés et une propriété est une association entre un nom (aussi appelé _clé_) et une valeur. La valeur d'une propriété peut être une fonction, auquel cas la propriété peut être appelée « méthode ». En plus des objets natifs fournis par l'environnement, il est possible de construire ses propres objets. Ce chapitre aborde la manipulation d'objets, l'utilisation des propriétés, fonctions et méthodes, il explique également comment créer ses objets. -<h2 id="objects_overview">Un aperçu des objets</h2> +## Un aperçu des objets -<p>À l'instar de nombreux autres langages de programmation, on peut comparer les objets JavaScript aux objets du monde réel.</p> +À l'instar de nombreux autres langages de programmation, on peut comparer les objets JavaScript aux objets du monde réel. -<p>En JavaScript, un objet est une entité à part entière qui possède des propriétés et un type. Si on effectue cette comparaison avec une tasse par exemple, on pourra dire qu'une tasse est un objet avec des propriétés. Ces propriétés pourront être la couleur, la forme, le poids, le matériau qui la constitue, etc. De la même façon, un objet JavaScript possède des propriétés, chacune définissant une caractéristique.</p> +En JavaScript, un objet est une entité à part entière qui possède des propriétés et un type. Si on effectue cette comparaison avec une tasse par exemple, on pourra dire qu'une tasse est un objet avec des propriétés. Ces propriétés pourront être la couleur, la forme, le poids, le matériau qui la constitue, etc. De la même façon, un objet JavaScript possède des propriétés, chacune définissant une caractéristique. -<h2 id="objects_and_properties">Les objets et les propriétés</h2> +## Les objets et les propriétés -<p>Un objet JavaScript possède donc plusieurs propriétés qui lui sont associées. Une propriété peut être vue comme une variable attachée à l'objet. Les propriétés d'un objet sont des variables tout ce qu'il y a de plus classiques, exception faite qu'elles sont attachées à des objets. Les propriétés d'un objet représentent ses caractéristiques et on peut y accéder avec une notation utilisant le point « . », de la façon suivante :</p> +Un objet JavaScript possède donc plusieurs propriétés qui lui sont associées. Une propriété peut être vue comme une variable attachée à l'objet. Les propriétés d'un objet sont des variables tout ce qu'il y a de plus classiques, exception faite qu'elles sont attachées à des objets. Les propriétés d'un objet représentent ses caractéristiques et on peut y accéder avec une notation utilisant le point « . », de la façon suivante : -<pre class="brush: js">nomObjet.nomPropriete</pre> +```js +nomObjet.nomPropriete +``` -<p>Comme pour les variables JavaScript en général, le nom de l'objet (qui peut être une variable) et le nom des propriétés sont sensibles à la casse (une lettre minuscule ne sera pas équivalente à une lettre majuscule). On peut définir une propriété en lui affectant une valeur. Ainsi, si on crée un objet <code>maVoiture</code> et qu'on lui donne les propriétés <code>fabricant</code>, <code>modèle</code>, et <code>année</code> :</p> +Comme pour les variables JavaScript en général, le nom de l'objet (qui peut être une variable) et le nom des propriétés sont sensibles à la casse (une lettre minuscule ne sera pas équivalente à une lettre majuscule). On peut définir une propriété en lui affectant une valeur. Ainsi, si on crée un objet `maVoiture` et qu'on lui donne les propriétés `fabricant`, `modèle`, et `année` : -<pre class="brush: js"> +```js let maVoiture = new Object(); maVoiture.fabricant = "Ford"; maVoiture.modele = "Mustang"; maVoiture.annee = 1969; -</pre> +``` -<p>L'exemple précédent peut également s'écrire avec <strong><a href="#object_initializers">la syntaxe littérale pour initialiser les objets</a></strong> : on fournit une liste, délimitée par des virgules, qui contient des paires de noms et de valeurs décrivant les propriétés et où le tout est encadré d'accolades (<code>{}</code>) :</p> +L'exemple précédent peut également s'écrire avec **[la syntaxe littérale pour initialiser les objets](#object_initializers)** : on fournit une liste, délimitée par des virgules, qui contient des paires de noms et de valeurs décrivant les propriétés et où le tout est encadré d'accolades (`{}`) : -<pre class="brush: js"> +```js let maVoiture = { make: 'Ford', model: 'Mustang', year: 1969 }; -</pre> +``` -<p>Les propriétés d'un objet qui n'ont pas été affectées auront la valeur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> (et non <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>).</p> +Les propriétés d'un objet qui n'ont pas été affectées auront la valeur [`undefined`](/fr/docs/Web/JavaScript/Reference/Global_Objects/undefined) (et non [`null`](/fr/docs/Web/JavaScript/Reference/Global_Objects/null)). -<pre class="brush: js">maVoiture.color; // undefined</pre> +```js +maVoiture.color; // undefined +``` -<p>On peut aussi définir ou accéder à des propriétés JavaScript en utilisant une notation avec les crochets (voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors">les accesseurs de propriétés</a> pour plus de détails). Les objets sont parfois appelés « tableaux associatifs ». Cela peut se comprendre, car chaque propriété est associée avec une chaîne de caractères qui permet d'y accéder. Ainsi, par exemple, on peut accéder aux propriétés de l'objet <code>maVoiture</code> de la façon suivante :</p> +On peut aussi définir ou accéder à des propriétés JavaScript en utilisant une notation avec les crochets (voir la page sur [les accesseurs de propriétés](/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors) pour plus de détails). Les objets sont parfois appelés « tableaux associatifs ». Cela peut se comprendre, car chaque propriété est associée avec une chaîne de caractères qui permet d'y accéder. Ainsi, par exemple, on peut accéder aux propriétés de l'objet `maVoiture` de la façon suivante : -<pre class="brush: js"> +```js maVoiture["fabricant"] = "Ford"; maVoiture["modèle"] = "Mustang"; maVoiture["année"] = 1969; -</pre> +``` -<p>Le nom d'une propriété d'un objet peut être n'importe quelle chaîne JavaScript valide (ou n'importe quelle valeur qui puisse être convertie en une chaîne de caractères), y compris la chaîne vide. Cependant, n'importe quel nom de propriété qui n'est pas un identifiant valide (par exemple si le nom d'une propriété contient un tiret, un espace ou débute par un chiffre) devra être utilisé avec la notation à crochets. Cette notation s'avère également utile quand les noms des propriétés sont déterminés de façon dynamique (c'est-à-dire qu'on ne sait pas le nom de la propriété avant l'exécution). Par exemple :</p> +Le nom d'une propriété d'un objet peut être n'importe quelle chaîne JavaScript valide (ou n'importe quelle valeur qui puisse être convertie en une chaîne de caractères), y compris la chaîne vide. Cependant, n'importe quel nom de propriété qui n'est pas un identifiant valide (par exemple si le nom d'une propriété contient un tiret, un espace ou débute par un chiffre) devra être utilisé avec la notation à crochets. Cette notation s'avère également utile quand les noms des propriétés sont déterminés de façon dynamique (c'est-à-dire qu'on ne sait pas le nom de la propriété avant l'exécution). Par exemple : -<pre class="brush: js"> +```js // on crée quatre variables avec une même instruction let monObj = new Object(); let str = "maChaîne"; @@ -76,23 +80,23 @@ monObj[obj] = "Objet"; monObj[""] = "Une chaîne vide"; console.log(monObj); -</pre> +``` -<p>On notera que les valeurs utilisées entre les crochets sont automatiquement converties en chaînes de caractères grâce à la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString()</a></code> sauf si ces valeurs sont des symboles (cf. <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol"><code>Symbol</code></a>). En effet, les noms des propriétés pour les objets JavaScript peuvent être des chaînes de caractères ou des symboles. Ainsi, dans l'exemple précédent, lorsqu'on ajoute la clé <code>obj</code> sur <code>monObj</code>, le moteur JavaScript appelle la méthode <code>obj.toString()</code> et utilise la chaîne de caractères renvoyée par cette méthode comme nom pour la propriété.</p> +On notera que les valeurs utilisées entre les crochets sont automatiquement converties en chaînes de caractères grâce à la méthode [`toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) sauf si ces valeurs sont des symboles (cf. [`Symbol`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Symbol)). En effet, les noms des propriétés pour les objets JavaScript peuvent être des chaînes de caractères ou des symboles. Ainsi, dans l'exemple précédent, lorsqu'on ajoute la clé `obj` sur `monObj`, le moteur JavaScript appelle la méthode `obj.toString()` et utilise la chaîne de caractères renvoyée par cette méthode comme nom pour la propriété. -<p>On peut également accéder aux propriétés d'un objet en utilisant une valeur qui est une chaîne de caractères enregistrée dans une variable :</p> +On peut également accéder aux propriétés d'un objet en utilisant une valeur qui est une chaîne de caractères enregistrée dans une variable : -<pre class="brush: js"> +```js let nomPropriété = "fabricant"; maVoiture[nomPropriété] = "Ford"; nomPropriété = "modèle"; maVoiture[nomPropriété] = "Mustang"; -</pre> +``` -<p>La notation avec les crochets peut être utilisée dans une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> afin de parcourir les propriétés énumérables d'un objet. Pour illustrer comment cela fonctionne, on définit la fonction suivante qui affiche les propriétés d'un objet qu'on lui a passé en argument avec le nom associé :</p> +La notation avec les crochets peut être utilisée dans une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in) afin de parcourir les propriétés énumérables d'un objet. Pour illustrer comment cela fonctionne, on définit la fonction suivante qui affiche les propriétés d'un objet qu'on lui a passé en argument avec le nom associé : -<pre class="brush: js"> +```js function afficherProps(obj, nomObjet) { let resultat = ""; for (let i in obj) { @@ -102,29 +106,27 @@ function afficherProps(obj, nomObjet) { } return resultat; } -</pre> +``` -<p>Si on appelle la fonction avec <code>afficherProps(maVoiture, "maVoiture")</code>, cela affichera le contenu suivant dans la console :</p> +Si on appelle la fonction avec `afficherProps(maVoiture, "maVoiture")`, cela affichera le contenu suivant dans la console : -<pre class="brush: js"> +```js maVoiture.fabricant = Ford maVoiture.modele = Mustang maVoiture.annee = 1969 -</pre> +``` -<h2 id="enumerate_the_properties_of_an_object">Lister les propriétés d'un objet</h2> +## Lister les propriétés d'un objet -<p>À partir d'ECMAScript 5, il existe trois méthodes natives pour lister/parcourir les propriétés d'un objet :</p> +À partir d'ECMAScript 5, il existe trois méthodes natives pour lister/parcourir les propriétés d'un objet : -<ul> - <li>Les boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> qui permettent de parcourir l'ensemble des propriétés énumérables d'un objet et de sa chaîne de prototypes.</li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys(o)</code></a> qui permet de renvoyer un tableau contenant les noms (clés ou <em>keys</em>) des propriétés propres (celles qui ne sont pas héritées via la chaîne de prototypes) d'un objet <code>o</code> pour les propriétés énumérables.</li> - <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames"><code>Object.getOwnPropertyNames(o)</code></a> qui permet de renvoyer un tableau contenant les noms des propriétés propres (énumérables ou non) d'un objet <code>o</code>.</li> -</ul> +- Les boucles [`for...in`](/fr/docs/Web/JavaScript/Reference/Statements/for...in) qui permettent de parcourir l'ensemble des propriétés énumérables d'un objet et de sa chaîne de prototypes. +- [`Object.keys(o)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) qui permet de renvoyer un tableau contenant les noms (clés ou _keys_) des propriétés propres (celles qui ne sont pas héritées via la chaîne de prototypes) d'un objet `o` pour les propriétés énumérables. +- [`Object.getOwnPropertyNames(o)`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames) qui permet de renvoyer un tableau contenant les noms des propriétés propres (énumérables ou non) d'un objet `o`. -<p>Avant ECMAScript 5, il n'existait aucune méthode native pour lister l'ensemble des propriétés d'un objet. Cependant, on pouvait utiliser le code suivant pour y parvenir :</p> +Avant ECMAScript 5, il n'existait aucune méthode native pour lister l'ensemble des propriétés d'un objet. Cependant, on pouvait utiliser le code suivant pour y parvenir : -<pre class="brush: js"> +```js function listerToutesLesProprietes(o){ let objectToInspect; let resultat = []; @@ -136,41 +138,42 @@ function listerToutesLesProprietes(o){ } return resultat; } -</pre> +``` -<p>Cela peut être utile pour révéler les propriétés « cachées » où leur nom est réutilisé dans la chaîne de prototypes. Pour lister les propriétés accessibles, il suffit de retirer les duplicatas du tableau.</p> +Cela peut être utile pour révéler les propriétés « cachées » où leur nom est réutilisé dans la chaîne de prototypes. Pour lister les propriétés accessibles, il suffit de retirer les duplicatas du tableau. -<h2 id="creating_new_objects">Créer de nouveaux objets</h2> +## Créer de nouveaux objets -<p>Un environnement JavaScript possède certains objets natifs prédéfinis. En plus de ces objets, il est possible de créer ses propres objets. Pour cela, on peut utiliser un <a href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer">initialisateur d'objet</a>. On peut aussi créer un constructeur puis instancier un objet avec cette fonction en utilisant l'opérateur <code>new</code>.</p> +Un environnement JavaScript possède certains objets natifs prédéfinis. En plus de ces objets, il est possible de créer ses propres objets. Pour cela, on peut utiliser un [initialisateur d'objet](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer). On peut aussi créer un constructeur puis instancier un objet avec cette fonction en utilisant l'opérateur `new`. -<h3 id="using_object_initializers">Utiliser les initialisateurs d'objets</h3> +### Utiliser les initialisateurs d'objets -<p>On peut créer des objets avec une fonction qui est un constructeur, mais on peut aussi créer des objets avec des <a href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer">initialisateurs d'objets</a>. On appelle parfois cette syntaxe la notation <em>littérale</em>.</p> +On peut créer des objets avec une fonction qui est un constructeur, mais on peut aussi créer des objets avec des [initialisateurs d'objets](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer). On appelle parfois cette syntaxe la notation _littérale_. -<p>La syntaxe utilisée avec les initialisateurs d'objets est la suivante :</p> +La syntaxe utilisée avec les initialisateurs d'objets est la suivante : -<pre class="brush: js"> +```js let obj = { propriete_1: valeur_1, // propriete_# peut être un identifiant 2: valeur_2, // ou un nombre // ..., "propriete n": valeur_n }; // ou une chaîne -</pre> +``` -<p>où on a <code>obj</code> le nom de l'objet qu'on souhaite créer et chaque <code>propriete_<em>i</em></code> un identifiant (que ce soit un nom, un nombre ou une chaîne de caractères) et chaque <code>valeur_<em>i</em></code> une expression dont la valeur sera affectée à la propriété <code>propriete_<em>i</em></code>. S'il n'est pas nécessaire d'utiliser l'objet <code>obj</code> par la suite, il n'est pas nécessaire de réaliser l'affectation à une variable (attention alors à l'encadrer dans des parenthèses pour que le littéral objet soit bien interprété comme une instruction et non pas comme un bloc.)</p> +où on a `obj` le nom de l'objet qu'on souhaite créer et chaque `propriete_i` un identifiant (que ce soit un nom, un nombre ou une chaîne de caractères) et chaque `valeur_i` une expression dont la valeur sera affectée à la propriété `propriete_i`. S'il n'est pas nécessaire d'utiliser l'objet `obj` par la suite, il n'est pas nécessaire de réaliser l'affectation à une variable (attention alors à l'encadrer dans des parenthèses pour que le littéral objet soit bien interprété comme une instruction et non pas comme un bloc.) -<p>Les initialisateurs d'objets sont des expressions et chaque initialisateur entraîne la création d'un nouvel objet dans l'instruction pour laquelle il est exécuté. Des initialisateurs d'objets identiques créeront des objets distincts qui ne seront pas équivalents. Les objets sont créés de la même façon qu'avec <code>new Object()</code>, les objets créés à partir d'une expression littérale seront des instances d'<code>Object</code>.</p> +Les initialisateurs d'objets sont des expressions et chaque initialisateur entraîne la création d'un nouvel objet dans l'instruction pour laquelle il est exécuté. Des initialisateurs d'objets identiques créeront des objets distincts qui ne seront pas équivalents. Les objets sont créés de la même façon qu'avec `new Object()`, les objets créés à partir d'une expression littérale seront des instances d'`Object`. -<p>L'instruction suivante crée un objet et l'affecte à une variable <code>x</code> si et seulement si l'expression <code>cond</code> est vraie :</p> +L'instruction suivante crée un objet et l'affecte à une variable `x` si et seulement si l'expression `cond` est vraie : -<pre class="brush: js">if (cond) let x = {emplacement: "le monde"}; -</pre> +```js +if (cond) let x = {emplacement: "le monde"}; +``` -<p>Dans l'exemple suivant, on crée un objet <code>maHonda</code> avec trois propriétés. La propriété <code>moteur</code> est également un objet avec ses propres propriétés.</p> +Dans l'exemple suivant, on crée un objet `maHonda` avec trois propriétés. La propriété `moteur` est également un objet avec ses propres propriétés. -<pre class="brush: js"> +```js let maHonda = { couleur: "rouge", roue: 4, @@ -179,99 +182,98 @@ let maHonda = { taille: 2.2 } }; -</pre> +``` -<p>De la même façon, on pourra utiliser des initialisateurs pour créer des tableaux. Pour plus d'informations à ce sujet, voir <a href="/fr/docs/Web/JavaScript/Guide/Grammar_and_types#les_litt.c3.a9raux_de_tableaux">les littéraux de tableaux</a>.</p> +De la même façon, on pourra utiliser des initialisateurs pour créer des tableaux. Pour plus d'informations à ce sujet, voir [les littéraux de tableaux](/fr/docs/Web/JavaScript/Guide/Grammar_and_types#les_litt.c3.a9raux_de_tableaux). -<h3 id="using_a_constructor_function">Utiliser les constructeurs</h3> +### Utiliser les constructeurs -<p>On peut aussi créer des objets d'une autre façon, en suivant deux étapes :</p> +On peut aussi créer des objets d'une autre façon, en suivant deux étapes : -<ol> - <li>On définit une fonction qui sera un constructeur définissant le type de l'objet. La convention, pour nommer les constructeurs, est d'utiliser une majuscule comme première lettre pour l'identifiant de la fonction.</li> - <li>On crée une instance de l'objet avec <code>new</code>.</li> -</ol> +1. On définit une fonction qui sera un constructeur définissant le type de l'objet. La convention, pour nommer les constructeurs, est d'utiliser une majuscule comme première lettre pour l'identifiant de la fonction. +2. On crée une instance de l'objet avec `new`. -<p>Pour définir le type d'un objet, on crée une fonction qui définit le nom de ce type et les propriétés et méthodes des instances. Ainsi, si on souhaite créer un type d'objet pour représenter des voitures, on pourra nommer ce type <code>voiture</code>, et il pourra avoir des propriétés pour le fabricant, le modèle et l'année. Pour ce faire, on pourra écrire la fonction suivante :</p> +Pour définir le type d'un objet, on crée une fonction qui définit le nom de ce type et les propriétés et méthodes des instances. Ainsi, si on souhaite créer un type d'objet pour représenter des voitures, on pourra nommer ce type `voiture`, et il pourra avoir des propriétés pour le fabricant, le modèle et l'année. Pour ce faire, on pourra écrire la fonction suivante : -<pre class="brush: js"> +```js function Voiture(fabricant, modele, annee) { this.fabricant = fabricant; this.modele = modele; this.annee = annee; } -</pre> +``` -<p>On voit ici qu'on utilise le mot-clé <code>this</code> pour affecter des valeurs aux propriétés d'un objet en fonction des valeurs passées en arguments de la fonction.</p> +On voit ici qu'on utilise le mot-clé `this` pour affecter des valeurs aux propriétés d'un objet en fonction des valeurs passées en arguments de la fonction. -<p>On peut désormais créer un objet <code>maVoiture</code> de la façon suivante :</p> +On peut désormais créer un objet `maVoiture` de la façon suivante : -<pre class="brush: js"> +```js let maVoiture = new Voiture("Eagle", "Talon TSi", 1993); -</pre> +``` -<p>Cette instruction crée un objet <code>maVoiture</code> et lui affecte les valeurs fournies pour ses propriétés. On obtient donc <code>maVoiture.fabricant</code> qui sera la chaîne de caractères "Eagle", <code>maVoiture.annee</code> qui sera l'entier 1993, et ainsi de suite.</p> +Cette instruction crée un objet `maVoiture` et lui affecte les valeurs fournies pour ses propriétés. On obtient donc `maVoiture.fabricant` qui sera la chaîne de caractères "Eagle", `maVoiture.annee` qui sera l'entier 1993, et ainsi de suite. -<p>Grâce à ce constructeur, on peut ensuite créer autant d'objets <code>Voiture</code> que nécessaire. Par exemple :</p> +Grâce à ce constructeur, on peut ensuite créer autant d'objets `Voiture` que nécessaire. Par exemple : -<pre class="brush: js"> +```js let voitureMorgan = new Voiture("Audi", "A3", 2005); let voitureMax = new Voiture("Mazda", "Miata", 1990); -</pre> +``` -<p>Un objet peut avoir une propriété qui est elle-même un objet. Ainsi, si on définit un type d'objet <code>personne</code> de cette façon :</p> +Un objet peut avoir une propriété qui est elle-même un objet. Ainsi, si on définit un type d'objet `personne` de cette façon : -<pre class="brush: js"> +```js function Personne(nom, age, sexe) { this.nom = nom; this.age = age; this.sexe = sexe; } -</pre> +``` -<p>et qu'on instancie deux nouveaux objets <code>personne</code> avec</p> +et qu'on instancie deux nouveaux objets `personne` avec -<pre class="brush: js"> +```js let max = new Personne("Max Gun", 33, "M"); let morgan = new Personne("Morgan Sousbrouille", 39, "M"); -</pre> +``` -<p>On pourra réécrire la fonction de définition pour le type <code>Voiture</code> pour inclure une propriété <code>proprietaire</code> qui est représentée par un objet <code>personne</code> :</p> +On pourra réécrire la fonction de définition pour le type `Voiture` pour inclure une propriété `proprietaire` qui est représentée par un objet `personne` : -<pre class="brush: js"> +```js function Voiture(fabricant, modele, annee, proprietaire) { this.fabricant = fabricant; this.modele = modele; this.annee = annee; this.proprietaire = proprietaire; } -</pre> +``` -<p>Pour instancier des nouveaux objets, on pourra donc utiliser :</p> +Pour instancier des nouveaux objets, on pourra donc utiliser : -<pre class="brush: js"> +```js let voiture1 = new Voiture("Mazda", "Miata", 1993, max); let voiture2 = new Voiture("Audi", "A3", 2005, morgan); -</pre> +``` -<p>On notera que le dernier argument n'est pas une chaîne de caractères ou une valeur numérique mais bien un objet. Les objets <code>max</code> et <code>morgan</code> sont passés en arguments pour représenter les propriétaires. Ainsi, si on veut obtenir le nom du propriétaire pour <code>voiture2</code>, on peut accéder à la propriété de la façon suivante :</p> +On notera que le dernier argument n'est pas une chaîne de caractères ou une valeur numérique mais bien un objet. Les objets `max` et `morgan` sont passés en arguments pour représenter les propriétaires. Ainsi, si on veut obtenir le nom du propriétaire pour `voiture2`, on peut accéder à la propriété de la façon suivante : -<pre class="brush: js"> +```js voiture2.proprietaire.nom -</pre> +``` -<p>Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, on peut ajouter une propriété à l'objet <code>voiture1</code> avec l'instruction :</p> +Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, on peut ajouter une propriété à l'objet `voiture1` avec l'instruction : -<pre class="brush: js">voiture1.couleur = "noir"; -</pre> +```js +voiture1.couleur = "noir"; +``` -<p>Ici, on ajoute une propriété <code>couleur</code> à <code>voiture1</code>, et on lui affecte une valeur "noir". Cependant, cela n'affecte pas les autres objets <code>voiture</code>. Pour ajouter une nouvelle propriété à tous les objets, il faudra ajouter la propriété au constructeur <code>voiture</code>.</p> +Ici, on ajoute une propriété `couleur` à `voiture1`, et on lui affecte une valeur "noir". Cependant, cela n'affecte pas les autres objets `voiture`. Pour ajouter une nouvelle propriété à tous les objets, il faudra ajouter la propriété au constructeur `voiture`. -<h3 id="using_the_object.create_method">Utiliser la méthode <code>Object.create()</code></h3> +### Utiliser la méthode `Object.create()` -<p>Les objets peuvent également être créés en utilisant la méthode <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create"><code>Object.create()</code></a>. Cette méthode peut s'avérer très utile, car elle permet de choisir le prototype pour l'objet qu'on souhaite créer, sans avoir à définir un constructeur.</p> +Les objets peuvent également être créés en utilisant la méthode [`Object.create()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create). Cette méthode peut s'avérer très utile, car elle permet de choisir le prototype pour l'objet qu'on souhaite créer, sans avoir à définir un constructeur. -<pre class="brush: js"> +```js // Propriétés pour animal et encapsulation des méthodes let Animal = { type: "Invertébrés", // Valeur par défaut value of properties @@ -288,36 +290,36 @@ animal1.afficherType(); // affichera Invertébrés let poisson = Object.create(Animal); poisson.type = "Poisson"; poisson.afficherType(); // affichera Poisson -</pre> +``` -<h2 id="inheritance">L'héritage</h2> +## L'héritage -<p>Tous les objets JavaScript héritent d'un autre objet. L'objet dont on hérite est appelé <em>prototype</em> et les propriétés héritées peuvent être accédées via l'objet <code>prototype</code> du constructeur. Pour plus d'informations sur le fonctionnement de l'héritage, voir la page sur <a href="/fr/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">l'héritage et la chaîne de prototypes</a>.</p> +Tous les objets JavaScript héritent d'un autre objet. L'objet dont on hérite est appelé _prototype_ et les propriétés héritées peuvent être accédées via l'objet `prototype` du constructeur. Pour plus d'informations sur le fonctionnement de l'héritage, voir la page sur [l'héritage et la chaîne de prototypes](/fr/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). -<h2 id="indexing_object_properties">Indexer les propriétés d'un objet</h2> +## Indexer les propriétés d'un objet -<p>Il est possible d'accéder à une propriété via son nom et via son indice (ordinal). Si on définit une propriété grâce à un nom, on accédera toujours à la valeur via le nom. De même, si on définit une propriété grâce à un indice, on y accèdera toujours via son indice.</p> +Il est possible d'accéder à une propriété via son nom et via son indice (ordinal). Si on définit une propriété grâce à un nom, on accédera toujours à la valeur via le nom. De même, si on définit une propriété grâce à un indice, on y accèdera toujours via son indice. -<p>Cette restriction s'applique lorsqu'on crée un objet et ses propriétés via un constructeur et lorsqu'on déclare les propriétés explicitement (par exemple avec <code>maVoiture.couleur = "rouge"</code>). Si on définit une propriété d'un objet avec <code>maVoiture[5] = "25 kmh"</code>, on pourra faire référence à cette propriété grâce à <code>maVoiture[5]</code>.</p> +Cette restriction s'applique lorsqu'on crée un objet et ses propriétés via un constructeur et lorsqu'on déclare les propriétés explicitement (par exemple avec `maVoiture.couleur = "rouge"`). Si on définit une propriété d'un objet avec `maVoiture[5] = "25 kmh"`, on pourra faire référence à cette propriété grâce à `maVoiture[5]`. -<p>Il existe une exception à cette règle lorsqu'on manipule des objets "semblables à des tableaux" provenant d'API Web telles que l'objet <code>forms</code>. Pour ces objets semblables à des tableaux, on peut accéder à une propriété de l'objet grâce à son nom (si l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#name"><code>name</code></a> est utilisé sur l'élément HTML) ou grâce à son index selon l'ordre dans le document. Ainsi, si on souhaite cibler un élément <code><form></code> du document possédant un attribut <code>name</code> qui vaut <code>monForm</code> et que cet élément est le deuxième élément du document, on pourra y accéder avec <code>document.forms[1]</code>, <code>document.forms["monForm"]</code> ou encore avec <code>document.forms.monForm</code>.</p> +Il existe une exception à cette règle lorsqu'on manipule des objets "semblables à des tableaux" provenant d'API Web telles que l'objet `forms`. Pour ces objets semblables à des tableaux, on peut accéder à une propriété de l'objet grâce à son nom (si l'attribut [`name`](/fr/docs/Web/HTML/Global_attributes#name) est utilisé sur l'élément HTML) ou grâce à son index selon l'ordre dans le document. Ainsi, si on souhaite cibler un élément `<form>` du document possédant un attribut `name` qui vaut `monForm` et que cet élément est le deuxième élément du document, on pourra y accéder avec `document.forms[1]`, `document.forms["monForm"]` ou encore avec `document.forms.monForm`. -<h2 id="defining_properties_for_an_object_type">Définir des propriétés pour un type d'objet</h2> +## Définir des propriétés pour un type d'objet -<p>On peut ajouter une propriété à un type précédemment défini en utilisant la propriété <code>prototype</code>. Cela permettra de définir une propriété qui sera partagée par tous les objets d'un même type plutôt qu'elle ne soit définie que pour un seul objet. Le code suivant permet d'ajouter une propriété <code>couleur</code> à tous les objets de type <code>voiture</code>. On affecte ensuite une valeur à cette propriété pour l'objet <code>voiture1</code>.</p> +On peut ajouter une propriété à un type précédemment défini en utilisant la propriété `prototype`. Cela permettra de définir une propriété qui sera partagée par tous les objets d'un même type plutôt qu'elle ne soit définie que pour un seul objet. Le code suivant permet d'ajouter une propriété `couleur` à tous les objets de type `voiture`. On affecte ensuite une valeur à cette propriété pour l'objet `voiture1`. -<pre class="brush: js"> +```js Voiture.prototype.couleur = null; voiture1.couleur = "noir"; -</pre> +``` -<p>Pour plus d'informations, voir l'article sur <a href="/fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function">la propriété <code>prototype</code></a> de l'objet <code>Function</code> de la <a href="/fr/docs/Web/JavaScript/Reference">référence JavaScript</a>.</p> +Pour plus d'informations, voir l'article sur [la propriété `prototype`](/fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function) de l'objet `Function` de la [référence JavaScript](/fr/docs/Web/JavaScript/Reference). -<h2 id="defining_methods">Définir des méthodes</h2> +## Définir des méthodes -<p>Une <em>méthode</em> est une fonction associée à un objet. Autrement dit, une méthode est une propriété d'un objet qui est une fonction. Les méthodes sont définies comme des fonctions normales et sont affectées à des propriétés d'un objet. Voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions">les définitions de méthodes</a> pour plus d'informations. Par exemple :</p> +Une _méthode_ est une fonction associée à un objet. Autrement dit, une méthode est une propriété d'un objet qui est une fonction. Les méthodes sont définies comme des fonctions normales et sont affectées à des propriétés d'un objet. Voir la page sur [les définitions de méthodes](/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions) pour plus d'informations. Par exemple : -<pre class="brush: js"> +```js nomObjet.nomMethode = nomFonction; let monObj = { @@ -331,34 +333,34 @@ let monObj = { // …faire autre chose } }; -</pre> +``` -<p>avec <code>nomObjet</code> qui est un objet existant, <code>nomMethode</code> est le nom de la propriété à laquelle on souhaite affecter la méthode et <code>nomFonction</code> le nom de la fonction.</p> +avec `nomObjet` qui est un objet existant, `nomMethode` est le nom de la propriété à laquelle on souhaite affecter la méthode et `nomFonction` le nom de la fonction. -<p>On peut ensuite appeler la méthode sur l'objet :</p> +On peut ensuite appeler la méthode sur l'objet : -<pre class="brush: js"> +```js object.nomMethode(parametres); -</pre> +``` -<p>On peut définir des méthodes pour un type d'objet en incluant la définition de la méthode dans le constructeur. Par exemple, on peut définir une fonction qui mettrait en forme et qui afficherait les propriétés d'un objet <code>voiture</code>. Par exemple :</p> +On peut définir des méthodes pour un type d'objet en incluant la définition de la méthode dans le constructeur. Par exemple, on peut définir une fonction qui mettrait en forme et qui afficherait les propriétés d'un objet `voiture`. Par exemple : -<pre class="brush: js"> +```js function afficheVoiture() { let resultat = `Une belle ${this.modele}, fabriquée en ${this.annee} par ${this.fabricant}`; console.log(résultat); } -</pre> +``` -<p>On peut ensuite ajouter cette fonction comme méthode dans le constructeur avec cette instruction :</p> +On peut ensuite ajouter cette fonction comme méthode dans le constructeur avec cette instruction : -<pre class="brush: js"> +```js this.afficheVoiture = afficheVoiture; -</pre> +``` -<p>La définition complète de <code>Voiture</code> serait donc :</p> +La définition complète de `Voiture` serait donc : -<pre class="brush: js"> +```js function Voiture(fabricant, modele, annee, proprietaire) { this.fabricant = fabricant; this.modele = modele; @@ -366,21 +368,22 @@ function Voiture(fabricant, modele, annee, proprietaire) { this.proprietaire = proprietaire; this.afficheVoiture = afficheVoiture; } -</pre> +``` -<p>On pourra donc ensuite appeler la méthode <code>afficheVoiture</code> pour chaque objet de ce type :</p> +On pourra donc ensuite appeler la méthode `afficheVoiture` pour chaque objet de ce type : -<pre class="brush: js">voiture1.afficheVoiture(); +```js +voiture1.afficheVoiture(); voiture2.afficheVoiture(); -</pre> +``` -<h2 id="using_this_for_object_references">Utiliser <code>this</code> pour les références aux objets</h2> +## Utiliser `this` pour les références aux objets -<p>JavaScript possède un mot-clé spécial <code><a href="/fr/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, qui peut être utilisé à l'intérieur d'une méthode pour faire référence à l'objet courant.</p> +JavaScript possède un mot-clé spécial [`this`](/fr/docs/Web/JavaScript/Reference/Operators/this), qui peut être utilisé à l'intérieur d'une méthode pour faire référence à l'objet courant. -<p>Par exemple, supposons qu'on ait deux objets, <code>responsable</code> et <code>stagiaire</code>. Chaque objet possède son propre <code>nom</code>, <code>age</code> et <code>poste</code>. Dans la fonction <code>direBonjour()</code>, on remarque qu'on utilise <code>this.nom</code>. Lorsqu'on ajoute cette méthode aux deux objets, on peut alors appeler cette fonction depuis les deux objets et celle-ci affichera <code>'Bonjour, mon nom est '</code> suivi de la valeur de la propriété <code>nom</code> rattaché à l'objet indiqué.</p> +Par exemple, supposons qu'on ait deux objets, `responsable` et `stagiaire`. Chaque objet possède son propre `nom`, `age` et `poste`. Dans la fonction `direBonjour()`, on remarque qu'on utilise `this.nom`. Lorsqu'on ajoute cette méthode aux deux objets, on peut alors appeler cette fonction depuis les deux objets et celle-ci affichera `'Bonjour, mon nom est '` suivi de la valeur de la propriété `nom` rattaché à l'objet indiqué. -<pre class="brush: js"> +```js const responsable = { nom: "Jean", age: 27, @@ -403,33 +406,31 @@ stagiaire.direBonjour = direBonjour; responsable.direBonjour(); // Bonjour, mon nom est John' stagiaire.direBonjour(); // Bonjour, mon nom est Ben' -</pre> +``` -<p>Ici, <code>this</code> fait référence à l'objet courant. On peut également créer une fonction <code>direMonAge()</code> qui affiche une phrase indiquant l'age.</p> +Ici, `this` fait référence à l'objet courant. On peut également créer une fonction `direMonAge()` qui affiche une phrase indiquant l'age. -<pre class="brush: js"> +```js function direMonAge(){ console.log("J'ai " + this.age + " ans."); }; responsable.direMonAge = direMonAge; responsable.direMonAge(); // J'ai 27 ans. -</pre> +``` -<h2 id="defining_getters_and_setters">Définir des accesseurs et des mutateurs (<em>getters</em> et <em>setters</em>)</h2> +## Définir des accesseurs et des mutateurs (_getters_ et _setters_) -<p>Un <a href="/fr/docs/Web/JavaScript/Reference/Functions/get">accesseur</a> (<em>getter</em>) est une méthode qui permet de récupérer la valeur d'une propriété donnée. Un <a href="/fr/docs/Web/JavaScript/Reference/Functions/set">mutateur</a> (<em>setter</em>) est une méthode qui permet de définir la valeur d'une propriété donnée. Il est possible de définir des accesseurs et des mutateurs sur chaque objet (qu'il soit natif ou défini par l'utilisateur) qui supporte l'ajout de nouvelles propriétés.</p> +Un [accesseur](/fr/docs/Web/JavaScript/Reference/Functions/get) (_getter_) est une méthode qui permet de récupérer la valeur d'une propriété donnée. Un [mutateur](/fr/docs/Web/JavaScript/Reference/Functions/set) (_setter_) est une méthode qui permet de définir la valeur d'une propriété donnée. Il est possible de définir des accesseurs et des mutateurs sur chaque objet (qu'il soit natif ou défini par l'utilisateur) qui supporte l'ajout de nouvelles propriétés. -<p>Les accesseurs et mutateurs peuvent être :</p> +Les accesseurs et mutateurs peuvent être : -<ul> - <li>définis avec <a href="#object_initializers">les initialisateurs d'objet</a>, ou</li> - <li>ajoutés après la construction en utilisant une méthode pour ajouter un accesseur ou un mutateur.</li> -</ul> +- définis avec [les initialisateurs d'objet](#object_initializers), ou +- ajoutés après la construction en utilisant une méthode pour ajouter un accesseur ou un mutateur. -<p>Lorsqu'on définit des accesseurs et des mutateurs <a href="#object_initializers">en utilisant la syntaxe littérale des initialisateurs d'objet</a>, il suffit d'ajouter un préfixe <code>get</code> devant une fonction pour un accesseur et un préfixe <code>set</code> devant une fonction pour un mutateur. La méthode pour l'accesseur ne doit pas utiliser de paramètre tandis que la méthode pour le mutateur doit utiliser un seul paramètre (la nouvelle valeur à définir). Ainsi :</p> +Lorsqu'on définit des accesseurs et des mutateurs [en utilisant la syntaxe littérale des initialisateurs d'objet](#object_initializers), il suffit d'ajouter un préfixe `get` devant une fonction pour un accesseur et un préfixe `set` devant une fonction pour un mutateur. La méthode pour l'accesseur ne doit pas utiliser de paramètre tandis que la méthode pour le mutateur doit utiliser un seul paramètre (la nouvelle valeur à définir). Ainsi : -<pre class="brush: js"> +```js let o = { a: 7, get b() { @@ -441,24 +442,22 @@ let o = { }; console.log(o.a); // 7 -console.log(o.b); // 8 <-- À ce moment, la méthode get b() est invoquée -o.c = 50; // <-- À ce moment, la méthode set c(x) est invoquée +console.log(o.b); // 8 <-- À ce moment, la méthode get b() est invoquée +o.c = 50; // <-- À ce moment, la méthode set c(x) est invoquée console.log(o.a); // 25 -</pre> +``` -<p>Les propriétés de l'objet <code>o</code> sont :</p> +Les propriétés de l'objet `o` sont : -<ul> - <li><code>o.a</code> — un nombre</li> - <li><code>o.b</code> — un accesseur qui renvoie la valeur de <code>o.a</code> plus 1</li> - <li><code>o.c</code> — un mutateur qui définit la valeur de <code>o.a</code> avec la moitié de la valeur passée pour <code>o.c</code></li> -</ul> +- `o.a` — un nombre +- `o.b` — un accesseur qui renvoie la valeur de `o.a` plus 1 +- `o.c` — un mutateur qui définit la valeur de `o.a` avec la moitié de la valeur passée pour `o.c` -<p>On notera que les noms des fonctions pour les accesseurs et les mutateurs définis dans un initialisateur d'objet avec la forme <code>[gs]et <em>propriete</em>()</code> ne sont pas les noms des accesseurs/mutateurs eux-mêmes malgré ce que pourrait laisser croire la syntaxe.</p> +On notera que les noms des fonctions pour les accesseurs et les mutateurs définis dans un initialisateur d'objet avec la forme `[gs]et propriete()` ne sont pas les noms des accesseurs/mutateurs eux-mêmes malgré ce que pourrait laisser croire la syntaxe. -<p>Les accesseurs et mutateurs peuvent également être ajoutés à un objet après sa création via la méthode <code>Object.defineProperties()</code> (ou <code>Object.defineProperty()</code>). Le premier paramètre de cette méthode est l'objet sur lequel on souhaite ajouter les fonctions. Le deuxième paramètre est un objet dont les noms des propriétés sont les noms des accesseurs et/ou des mutateurs et les valeurs de ces propriétés sont les objets qui définissent les fonctions correspondantes. Voici un exemple qui définit un accesseur et un mutateur pour obtenir un résultat équivalent à l'exemple précédent :</p> +Les accesseurs et mutateurs peuvent également être ajoutés à un objet après sa création via la méthode `Object.defineProperties()` (ou `Object.defineProperty()`). Le premier paramètre de cette méthode est l'objet sur lequel on souhaite ajouter les fonctions. Le deuxième paramètre est un objet dont les noms des propriétés sont les noms des accesseurs et/ou des mutateurs et les valeurs de ces propriétés sont les objets qui définissent les fonctions correspondantes. Voici un exemple qui définit un accesseur et un mutateur pour obtenir un résultat équivalent à l'exemple précédent : -<pre class="brush: js"> +```js let o = { a: 0 }; Object.defineProperties(o, { @@ -468,15 +467,15 @@ Object.defineProperties(o, { o.c = 10; // Exécute le mutateur qui affecte 10 / 2 (5) à la propriété 'a' console.log(o.b); // Exécute l'accesseur qui renvoie a + 1, soit 6 -</pre> +``` -<p>Le choix de l'une ou l'autre de ces formes dépend de votre style et du type de tâche à réaliser. Si vous utilisez déjà un initialisateur d'objet lors de la définition d'un prototype, vous choisirez probablement la première forme, plus concise et plus naturelle. Toutefois, si vous avez besoin d'ajouter des accesseurs/mutateurs plus tard, parce que vous n'avez pas écrit le prototype ou la définition de l'objet, seule la seconde forme sera possible. Cette dernière représente mieux la nature dynamique de JavaScript mais peut rendre la lecture et la compréhension du code plus difficiles.</p> +Le choix de l'une ou l'autre de ces formes dépend de votre style et du type de tâche à réaliser. Si vous utilisez déjà un initialisateur d'objet lors de la définition d'un prototype, vous choisirez probablement la première forme, plus concise et plus naturelle. Toutefois, si vous avez besoin d'ajouter des accesseurs/mutateurs plus tard, parce que vous n'avez pas écrit le prototype ou la définition de l'objet, seule la seconde forme sera possible. Cette dernière représente mieux la nature dynamique de JavaScript mais peut rendre la lecture et la compréhension du code plus difficiles. -<h2 id="deleting_properties">Supprimer des propriétés</h2> +## Supprimer des propriétés -<p>Il est possible de retirer des propriétés propres (celles qui ne sont pas héritées) grâce à l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>. Le code suivant montre comment retirer une propriété :</p> +Il est possible de retirer des propriétés propres (celles qui ne sont pas héritées) grâce à l'opérateur [`delete`](/fr/docs/Web/JavaScript/Reference/Operators/delete). Le code suivant montre comment retirer une propriété : -<pre class="brush: js"> +```js // On crée un nouvel objet, monObj, avec deux propriétés a et b. let monObj = new Object; monObj.a = 5; @@ -485,29 +484,30 @@ monObj.b = 12; // On retire la propriété a, monObj a donc uniquement la propriété b delete monObj.a; console.log("a" in monObj) // produit "false" -</pre> +``` -<p>Il est aussi possible de supprimer une propriété de l'objet global avec <code>delete</code> si aucun mot-clé comme <code>var</code>, <code>let</code> ou <code>const</code> n'avait été utilisé :</p> +Il est aussi possible de supprimer une propriété de l'objet global avec `delete` si aucun mot-clé comme `var`, `let` ou `const` n'avait été utilisé : -<pre class="brush: js"> +```js g = 17; delete g; -</pre> +``` -<h2 id="comparing_objects">Comparer des objets</h2> +## Comparer des objets -<p>En JavaScript, les objets fonctionnent par référence. Deux objets distincts ne sont jamais égaux, même s'ils ont les mêmes valeurs pour les mêmes propriétés. On aura une équivalence uniquement si on compare deux références vers un seul et même objet donné.</p> +En JavaScript, les objets fonctionnent par référence. Deux objets distincts ne sont jamais égaux, même s'ils ont les mêmes valeurs pour les mêmes propriétés. On aura une équivalence uniquement si on compare deux références vers un seul et même objet donné. -<pre class="brush: js"> +```js // Deux variables avec deux objets distincts // qui ont les mêmes propriétés let fruit = {nom: "pomme"}; let fruit2 = {nom: "pomme"}; fruit == fruit2 // renvoie false -fruit === fruit2 // renvoie false</pre> +fruit === fruit2 // renvoie false +``` -<pre class="brush: js"> +```js // Deux variables référençant un même objet let fruit = {nom: "pomme"}; let fruit2 = fruit; // On affecte la même référence @@ -518,15 +518,13 @@ fruit === fruit2 // renvoie true fruit.nom = "raisin"; console.log(fruit2); // affiche {nom: "raisin"} et non {nom: "pomme"} -</pre> +``` -<p>Pour plus d'informations sur les opérateurs de comparaisons, voir <a href="/fr/docs/Web/JavaScript/Reference/Operators">cet article</a>.</p> +Pour plus d'informations sur les opérateurs de comparaisons, voir [cet article](/fr/docs/Web/JavaScript/Reference/Operators). -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>Pour aller plus loin, voir <a href="/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">les détails du modèle objet javaScript</a></li> - <li>Pour en savoir plus sur les classes ECMAScript 2015 (une nouvelle façon de créer des objets), lire le chapitre sur les <a href="/fr/docs/Web/JavaScript/Reference/Classes">classes JavaScript</a>.</li> -</ul> +- Pour aller plus loin, voir [les détails du modèle objet javaScript](/fr/docs/Web/JavaScript/Guide/Details_of_the_Object_Model) +- Pour en savoir plus sur les classes ECMAScript 2015 (une nouvelle façon de créer des objets), lire le chapitre sur les [classes JavaScript](/fr/docs/Web/JavaScript/Reference/Classes). -<p>{{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p> +{{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}} |