diff options
Diffstat (limited to 'files/fr/web/javascript/reference/virgules_finales/index.html')
| -rw-r--r-- | files/fr/web/javascript/reference/virgules_finales/index.html | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/files/fr/web/javascript/reference/virgules_finales/index.html b/files/fr/web/javascript/reference/virgules_finales/index.html new file mode 100644 index 0000000000..a9cc88ac47 --- /dev/null +++ b/files/fr/web/javascript/reference/virgules_finales/index.html @@ -0,0 +1,183 @@ +--- +title: Virgules finales (trailing commas) +slug: Web/JavaScript/Reference/Virgules_finales +tags: + - ECMAScript2017 + - ECMAScript5 + - JavaScript + - Syntaxe + - Virgule +translation_of: Web/JavaScript/Reference/Trailing_commas +--- +<div>{{JsSidebar("More")}}</div> + +<p>Les <strong>virgules finales</strong> (<em>trailing commas</em> en anglais) s'avèrent utiles lorsqu'on souhaite ajouter de nouveaux éléments, paramètres ou de nouvelles propriétés à du code JavaScript. Si on souhaite ajouter une propriété en fin de course, on peut simplement ajouter une ligne sans avoir à modifier la précédente si celle-ci utilise une virgule finale. Cela permet d'avoir des vues de différences (<em>diffs</em>) plus claires et de simplifier l'édition de code.</p> + +<p>Les virgules finales peuvent être utilisées dans les littéraux de tableau depuis le début. Elles sont été ajoutées dans les littéraux objets à partir d'ECMAScript 5 et ECMAScript 2017 permet de les utiliser dans la liste des paramètres d'une fonction.</p> + +<p>{{Glossary("JSON")}}, en revanche, ne permet pas d'utiliser des virgules finales.</p> + +<h2 id="Les_virgules_finales_dans_les_littéraux">Les virgules finales dans les littéraux</h2> + +<h3 id="Tableaux">Tableaux</h3> + +<p>JavaScript ignore les virgules finales dans les tableaux :</p> + +<pre class="brush: js">var arr = [ + 1, + 2, + 3, +]; + +arr; // [1, 2, 3] +arr.length; // 3</pre> + +<p>Si plusieurs virgules finales sont utilisées, cela crée un vide dans le tableau. Un tableau avec des vides est parfois qualifié de <em>parsemé</em> (ou <em>sparse</em> en anglais). Lorsqu'on parcourt un tableau avec les méthodes {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.map()")}}, par exemple, ces vides sont ignorés.</p> + +<pre class="brush: js">var arr = [1, 2, 3,,,]; +arr.length; // 5 +</pre> + +<h3 id="Objets">Objets</h3> + +<p>À partir d'ECMAScript 5, on peut également utiliser les virgules finales dans les littéraux objets :</p> + +<pre class="brush: js">var objet = { + toto: "truc", + bidule: "azerty", + age: 42, +};</pre> + +<h2 id="Les_virgules_finales_dans_les_fonctions">Les virgules finales dans les fonctions</h2> + +<p>ECMAScript 2017 permet d'utiliser les virgules finales dans la liste des paramètres d'une fonction.</p> + +<h3 id="Définitions_des_paramètres">Définitions des paramètres</h3> + +<p>Pour chacune des deux paires de définitions qui suivent, les deux définitions sont autorisées et équivalentes entre elles. Les virgules finales n'ont pas d'impact sur la propriété <code>length</code> de la fonction ni sur l'objet <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a>.</p> + +<pre class="brush: js">function f(p) {} +function f(p,) {} + +(p) => {}; +(p,) => {}; +</pre> + +<p>Les virgules finales peuvent également être utilisées lors <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">des définitions de méthodes</a> dans les objets et les classes :</p> + +<pre class="brush: js">class C { + un(a,) {}, + deux(a, b,) {}, +} + +var obj = { + un(a,) {}, + deux(a, b,) {}, +}; +</pre> + +<h3 id="Appels_de_fonctions">Appels de fonctions</h3> + +<p>Pour chacune des deux paires d'appels qui suivent, les deux appels sont équivalents entre eux :</p> + +<pre class="brush: js">f(p); +f(p,); + +Math.max(10, 20); +Math.max(10, 20,); +</pre> + +<h3 id="Virgules_finales_non-autorisées">Virgules finales non-autorisées</h3> + +<p>Les définitions de paramètres ou les appels de fonctions qui ne contiennent qu'une seule virgule lèveront une exception {{Jsxref("SyntaxError")}}. Par ailleurs, on ne peut pas utiliser de virgule finale avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a> :</p> + +<pre class="brush: js example-bad">function f(,) {} // SyntaxError: missing formal parameter +(,) => {}; // SyntaxError: expected expression, got ',' +f(,) // SyntaxError: expected expression, got ',' + +function f(...p,) {} // SyntaxError: parameter after rest parameter +(...p,) => {} // SyntaxError: expected closing parenthesis, got ',' +</pre> + +<h2 id="Les_virgules_finales_et_la_décomposition">Les virgules finales et la décomposition</h2> + +<p>On peut aussi utiliser une virgule finale dans l'opérande gauche lorsqu'on utilise <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">l'affectation par décomposition</a> :</p> + +<pre class="brush: js">// Décomposition d'un tableau avec +// une virgule finale +[a, b,] = [1, 2]; + +// Décomposition d'un objet avec une +// virgule finale +var o = { + p: 42, + q: true, +}; +var {p, q,} = o; +</pre> + +<p>Là encore, si on utilise un élément du reste, une exception {{jsxref("SyntaxError")}} sera levée :</p> + +<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3]; +// SyntaxError: rest element may not have a trailing comma</pre> + +<h2 id="Les_virgules_finales_en_JSON">Les virgules finales en JSON</h2> + +<p>L'utilisation des virgules finales dans les objets a été introduite avec ECMAScript 5. Toutefois, le format JSON est basé sur la syntaxe JavaScript antérieure à ES5 <strong>et les virgules finales sont donc interdites en JSON</strong>.</p> + +<p>Les deux lignes suivantes lèveront une exception {{jsxref("SyntaxError")}} :</p> + +<pre class="brush: js example-bad">JSON.parse('[1, 2, 3, 4, ]'); +JSON.parse('{"foo" : 1, }'); +// SyntaxError JSON.parse: unexpected character +// at line 1 column 14 of the JSON data +</pre> + +<p>Pour analyser le JSON correctement, on évitera les virgules finales :</p> + +<pre class="brush: js example-good">JSON.parse('[1, 2, 3, 4 ]'); +JSON.parse('{"foo" : 1 }');</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES5.1')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Ajout des virgules finales pour les littéraux objets.</td> + </tr> + <tr> + <td>{{SpecName('ES6')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Aucune modification.</td> + </tr> + <tr> + <td>{{SpecName('ES2017')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td>Ajout des virgules finales à la liste des arguments d'une fonction (déclaration et appels).</td> + </tr> + <tr> + <td>{{SpecName('ESDraft')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>ES2017 added trailing function commas.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.grammar.trailing_commas")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La proposition initiale pour ECMAScript, déposée par Jeff Morrison, afin d'utiliser <a href="https://github.com/tc39/proposal-trailing-function-commas">les virgules finales dans les fonctions</a>.</li> +</ul> |