diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-12-19 07:01:23 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-12-19 07:01:23 +0100 |
commit | b1e7241f9e66591988e7de54a514eb6c15d555eb (patch) | |
tree | 9d18ed09737a092575c1bf88c9ff5b3d58377ab0 /files/fr/web/javascript | |
parent | a0b7fb61a2618e6972789ae73a7c2c5e02dd52be (diff) | |
download | translated-content-b1e7241f9e66591988e7de54a514eb6c15d555eb.tar.gz translated-content-b1e7241f9e66591988e7de54a514eb6c15d555eb.tar.bz2 translated-content-b1e7241f9e66591988e7de54a514eb6c15d555eb.zip |
Translation of untranslated pages in JS section (out of Global Objects subpages) (#3150)
* Translation of Class_static_initialization_blocks
* Translation of Hash_outside_class
* Translate working w private class features
* Translate RegExp Cheatsheet
Diffstat (limited to 'files/fr/web/javascript')
4 files changed, 1007 insertions, 0 deletions
diff --git a/files/fr/web/javascript/guide/regular_expressions/cheatsheet/index.md b/files/fr/web/javascript/guide/regular_expressions/cheatsheet/index.md new file mode 100644 index 0000000000..e0abf47c98 --- /dev/null +++ b/files/fr/web/javascript/guide/regular_expressions/cheatsheet/index.md @@ -0,0 +1,552 @@ +--- +title: Antisèche sur la syntaxe des expressions rationnelles +slug: Web/JavaScript/Guide/Regular_Expressions/Cheatsheet +translation_of: Web/JavaScript/Guide/Regular_Expressions/Cheatsheet +--- +{{jsSidebar("JavaScript Guide")}} + +Cette page fournit une « antisèche » sur l'ensemble des fonctionnalités offertes par la syntaxe des objets `RegExp` en agrégeant le contenu des articles contenus dans le guide sur les expressions rationnelles. Si vous avez besoin de plus d'informations sur un sujet donné, vous pouvez suivre le lien donné en début de chaque section pour accéder à l'article correspondant. Vous pouvez également aller consulter [le guide en question](/fr/docs/Web/JavaScript/Guide/Regular_Expressions). + +## Classes de caractères +[Les classes de caractères](/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes) permettent de distinguer différents types de caractères comme, entre autres, les lettres ou les chiffres. + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caractères</th> + <th scope="col">Signification</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>.</code></td> + <td> + <p>Peut signifier :</p> + <ul> + <li> + Correspond à n'importe quel caractère <em>à l'exception</em> des terminateurs de ligne : <code>\n</code>, <code>\r</code>, <code>\u2028</code> ou <code>\u2029</code>. Ainsi, <code>/.y/</code> correspondra à "my" et "ay", mais pas à "yes" pour la chaîne de caractères "yes make my day". + </li> + <li> + À l'intérieur d'une classe de caractères, le point perd ce sens spécial et correspond, littéralement, à un point. + </li> + </ul> + <p> + On notera que le marqueur multiligne <code>m</code> ne modifie pas le comportement du point. Aussi, pour qu'un motif corresponde sur plusieurs lignes, la classe de caractères <code>[^]</code> pour être utilisée, car elle correspondra à tout caractère, y compris ceux de nouvelle ligne. + </p> + <p> + ES2018 a ajouté le marqueur <code>s</code> "dotAll", qui permet au point de correspondre aux terminateurs de ligne. + </p> + </td> + </tr> + <tr> + <td><code>\d</code></td> + <td> + <p> + Correspond à tout chiffre (chiffre arabe). Équivalent à la classe <code>[0-9]</code>. Ainsi, <code>/\d/</code> ou <code>/[0-9]/</code> correspondent à "2" dans "B2 est le numéro de suite". + </p> + </td> + </tr> + <tr> + <td><code>\D</code></td> + <td> + <p> + Correspond à tout caractère qui n'est pas un chiffre (chiffre arabe). Équivalent à la classe <code>[^0-9]</code>. Ainsi, <code>/\D/</code> ou <code>/[^0-9]/</code> correspondent à "B" dans "B2 est le numéro de suite". + </p> + </td> + </tr> + <tr> + <td><code>\w</code></td> + <td> + <p> + Correspond à tout caractère alphanumérique appartenant à l'alphabet latin ou aux chiffres arabes, incluant également le tiret bas. Équivalent à la classe <code>[A-Za-z0-9_]</code>. Ainsi, <code>/\w/</code> pourra correspondre à "a" dans "apple", "5" dans "$5.28", et "3" dans "3D". + </p> + </td> + </tr> + <tr> + <td><code>\W</code></td> + <td> + <p> + Correspond à tout caractère qui n'est pas un caractère de mot de l'alphabet latin ou des chiffres arabes. Équivalent à la classe <code>[^A-Za-z0-9_]</code>. Ainsi, <code>/\W/</code> ou <code>/[^A-Za-z0-9_]/</code> correspondra à "%" dans "50%". + </p> + </td> + </tr> + <tr> + <td><code>\s</code></td> + <td> + <p> + Correspond à un caractère de blanc, ce qui inclut un espace, une tabulation, une tabulation verticale, un saut de ligne ou les autres caractères d'espacement Unicode. Équivalent à la classe <code>[\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Ainsi, <code>/\s\w*/</code> correspondra à " truc" dans "toto truc". + </p> + </td> + </tr> + <tr> + <td><code>\S</code></td> + <td> + <p> + Correspond à un caractère qui n'est pas un blanc. Équivalent <code>[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Ainsi, <code>/\S\w*/</code> correspondra à "toto" dans "toto truc". + </p> + </td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Correspond à une tabulation horizontale.</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Correspond à un retour chariot.</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Correspond à un saut de ligne.</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Correspond à une tabulation verticale.</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Correspond à un saut de page.</td> + </tr> + <tr> + <td><code>[\b]</code></td> + <td>Correspond à un retour arrière. Si vous recherchez le caractère de limite de mot, (<code>\b</code>), voir <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Limites</a>. + </td> + </tr> + <tr> + <td><code>\0</code></td> + <td>Correspond au caractère NUL. Ne doit pas être suivi par un autre chiffre.</td> + </tr> + <tr> + <td> + <code>\c<em>X</em></code> + </td> + <td> + <p> + Correspond à un caractère de contrôle représenté par sa <a href="https://fr.wikipedia.org/wiki/Notation_caret">notation caret</a>, où "X" est une lettre de A à Z (correspondant respectivement aux points de code <code>U+0001</code><em> à </em><code>U+001F</code>). Ainsi, <code>/\cM/</code> correspondra à "\r" dans "\r\n". + </p> + </td> + </tr> + <tr> + <td> + <code>\x<em>hh</em></code> + </td> + <td> + Correspond au caractère dont le code hexadécimal sur deux chiffres vaut <code><em>hh</em></code>. + </td> + </tr> + <tr> + <td> + <code>\u<em>hhhh</em></code> + </td> + <td> + Correspond au codet UTF-16 de valeur hexadécimale (représentée sur 4 chiffres) <code><em>hhhh</em></code>. + </td> + </tr> + <tr> + <td> + <code>\u<em>{hhhh}</em> or <em>\u{hhhhh}</em></code> + </td> + <td> + (Uniquement lorsque le marqueur <code>u</code> est activé) Correspond au caractère dont la valeur Unicode représentée en hexadécimale vaut <code>U+<em>hhhh</em></code> ou <code>U+<em>hhhhh</em></code> . + </td> + </tr> + <tr> + <td><code>\</code></td> + <td> + <p> + Indique que le caractère suivant devrait être traité spécialement ou échappé. Il se comporte d'une de ces deux façons. + </p> + <ul> + <li> + Pour les caractères usuellement traités littéralement, cela indique que le prochain caractère est spécial et ne devrait pas être interprété littéralement. Ainsi, <code>/b/</code> correspond au caractère "b". En ajoutant une barre oblique inversée devant "b", c'est-à-dire en utilisant <code>/\b/</code>, le caractère devient spécial et indique une limite de mot. + </li> + <li> + Pour les caractères usuellement traités comme spéciaux, cela indique que le prochain caractère n'est pas spécial et devrait être interprété littéralement. Par exemple, "*" est un caractère spécial qui indique 0 ou plusieurs occurrences du caractère précédent : <code>/a*/</code> correspondre à 0 ou plusieurs fois le caractère "a". Pour avoir une correspondance littérale du caractère <code>*</code>, il faudra utiliser une barre oblique inversée en préfixe : <code>/a\*/</code> correspondra à "a*". + </li> + </ul> + <p> + On notera que certains caractères comme <code>:</code>, <code>-</code>, <code>@</code> n'ont pas de signification spéciale, qu'ils soient échappés ou non. Ainsi, les séquences d'échappement comme <code>\:</code>, <code>\-</code>, <code>\@</code> seront équivalentes à la forme littérale du caractère non échappé. Toutefois, pour les expressions rationnelles avec <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags_2">le marqueur unicode</a>, ces échappements génèreront une erreur <em>invalid identity escape</em>. Cela est fait pour s'assurer de la rétro-compatibilité pour le code existant qui utilise des nouvelles séquences d'échappement comme <code>\p</code> ou <code>\k</code>. + </p> + <div class="note"> + <p> + <strong>Note :</strong> Afin de correspondre à ce caractère ("\") littéralement, on l'échappera lui-même en utilisant <code>/\\/</code>. + </p> + </div> + </td> + </tr> + </tbody> +</table> + +## Assertions + +[Les assertions](/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions) incluent les limites (décrivant les débuts et fins de ligne ou de mots) et d'autres motifs indiquant certains critères pour qu'une correspondance soit possible (recherche en avant, en arrière, expressions conditionnelles). + +### Assertions de limites + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caractères</th> + <th scope="col">Signification</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>^</code></td> + <td> + <p> + Correspond au début de la chaîne. Si le marqueur multiligne est présent, cela correspond également immédiatement après un caractère de rupture de ligne. Ainsi, <code>/^U/</code> ne correspond pas au "U" dans "un U", mais correspond au premier "U" dans "Un U". + </p> + <div class="note"> + <p> + <strong>Note :</strong> Ce caractère a un sens différent s'il apparaît au début d'un <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">groupe</a>. + </p> + </div> + </td> + </tr> + <tr> + <td><code>$</code></td> + <td> + <p> + Correspond à la fin de la chaîne. Si le marqueur multiligne est présent, cela correspond également immédiatement avant un caractère de rupture de ligne. Ainsi, <code>/t$/</code> ne correspond pas au "t" dans "élémentaire", mais lui correspond dans "élément". + </p> + </td> + </tr> + <tr> + <td><code>\b</code></td> + <td> + <p> + Correspond à une limite de mot. Il s'agit de la position où un caractère de mot n'est pas suivi ou précédé d'un autre caractère de mot. Par exemple entre une lettre et un espace. La limite de mot n'est pas incluse dans la correspondance. Autrement dit, la longueur d'une limite de mot vaut zéro. + </p> + <p>Exemples :</p> + <ul> + <li><code>/\bm/</code> correspond au "m" dans "mur".</li> + <li> + <code>/oo\b/</code> ne correspond pas à "oo" dans "cool", car "oo" + est suivi par "l" qui est un caractère de mot. + </li> + <li> + <code>/ool\b/</code> correspond à "ool" dans "cool", car "ool" est à la fin de la chaîne de caractères et n'est donc pas suivi par un caractère de mot. + </li> + <li> + <code>/\w\b\w/</code> ne correspondra jamais à rien, car un caractère de mot ne peut pas être suivi à la fois par une limite de mot et par un caractère de mot. + </li> + </ul> + <p> + Pour la correspondance du caractère retour arrière (<code>[\b]</code>), voir <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">les classes de caractères</a>. + </p> + </td> + </tr> + <tr> + <td><code>\B</code></td> + <td> + <p> + Correspond à une position qui n'est pas une limite de mot. Il s'agit d'une position où le caractère précédent et le caractère suivant sont du même type : ou tous les deux sont des caractères de mot, ou tous les deux ne sont pas des caractères de mot. On a donc cette correspondance entre deux lettres ou entre deux espaces. De même que pour la limite de mot, cette position n'est pas incluse dans la correspondance. Ainsi, <code>/\Bol/</code> correspond à "ol" dans "truc cool", et <code>/hi\B/</code> correspond à "hi" dans "c'était hier". + </p> + </td> + </tr> + </tbody> +</table> + +### Autres assertions + +> **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> + <strong>Recherche en avant</strong> Correspond à "x" uniquement si "x" est suivi par "y". Ainsi, /<code>Jack(?=Sprat)/</code> ne correspond à "Jack" qui si celui-ci est suivi par "Sprat". <code>/Jack(?=Sprat|Frost)/</code> correspond à "Jack" uniquement si celui-ci est suivi par "Sprat" ou "Frost". Toutefois, "Sprat" ou "Frost" ne font pas partie du résultat de la correspondance. + </p> + </td> + </tr> + <tr> + <td><code>x(?!y)</code></td> + <td> + <p> + <strong>Recherche en avant négative</strong> Correspond à "x" uniquement si "x" n'est pas suivi par "y". Ainsi, <code>/\d+(?!\.)/</code> correspond à un nombre, uniquement s'il n'est pas suivi par un point. <code>/\d+(?!\.)/.exec('3.141')</code> trouvera une correspondance pour "141" mais pas pour "3". + </p> + </td> + </tr> + <tr> + <td><code>(?<=y)x</code></td> + <td> + <p> + <strong>Recherche en arrière</strong> Correspond à "x" uniquement si "x" est précédé de "y". Ainsi, <code>/(?<=Jack)Sprat/</code> correspond à "Sprat" uniquement s'il est précédé par "Jack". <code>/(?<=Jack|Tom)Sprat/</code> correspond à "Sprat" uniquement s'il est précédé par "Jack" ou "Tom". Toutefois, ni "Jack" ni "Tom" ne font partie du résultat de la correspondance. + </p> + </td> + </tr> + <tr> + <td><code>(?<!y)x</code></td> + <td> + <p> + <strong>Recherche en arrière négative</strong> Correspond à "x" uniquement si "x" n'est pas précédé de "y". Ainsi, <code>/(?<!-)\d+/</code> correspond à un nombre, uniquement s'il n'est pas précédé d'un signe moins <code>/(?<!-)\d+/.exec('3')</code> trouvera une correspondance avec "3". <code>/(?<!-)\d+/.exec('-3')</code> ne trouvera pas de correspondance car le nombre est précédé d'un signe moins. + </p> + </td> + </tr> + </tbody> +</table> + +## Groupes et intervalles + +[Les groupes et intervalles](/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges) indiquent des groupes ou intervalles pour les caractères. + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caractères</th> + <th scope="col">Signification</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <code><em>x</em>|<em>y</em></code> + </td> + <td> + <p> + Correspond à "x" ou "y". Ainsi <code>/verte|rouge/</code> correspondra à "verte" dans "pomme verte" et à "rouge" dans "pomme rouge". + </p> + </td> + </tr> + <tr> + <td> + <code>[xyz]<br />[a-c]</code> + </td> + <td> + <p> + Une classe de caractères. Correspond à n'importe lequel des caractères entre crochets. Il est possible d'indiquer un intervalle de caractères en utilisant un tiret. Toutefois, si le tiret apparaît comme premier ou dernier caractère entre les crochets, il sera interprété littéralement. + </p> + <p> + Ainsi, <code>[abcd]</code> est équivalent à <code>[a-d]</code> et trouve "b" comme correspondance dans "bonnet", et "c" comme correspondance dans "côté". + </p> + <p> + Par exemple, <code>[abcd-]</code> et <code>[-abcd]</code> correspondent au "b" dans "bonnet", au "c" dans "côté" et au tiret dans "peut-être". + </p> + <p> + Par exemple, <code>[\w-]</code> est équivalent à <code>[A-Za-z0-9_-]</code>. "b" est une correspondance dans "bonnet", "c" est une correspondance dans "côté", et "t" est une correspondance dans "peut-être". + </p> + </td> + </tr> + <tr> + <td> + <p> + <code>[^xyz]<br />[^a-c]</code> + </p> + </td> + <td> + <p> + La négation ou le complément d'une classe de caractère. Correspond à tout ce qui n'est pas indiqué entre les crochets. Il est possible d'indiquer un intervalle de caractères en utilisant un tiret. Si ce dernier est le premier ou le dernier caractère entre les crochets, il est interprété littéralement. Ainsi <code>[^abc]</code> est équivalent à <code>[^a-c]</code>. En utilisant ce motif, on a une correspondance pour "o" dans "coucou" et pour "h" dans "chouette". + </p> + <div class="note"> + <p> + <strong>Note :</strong> Le caractère ^ peut également indiquer <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">le début d'une chaîne de caractères</a>. + </p> + </div> + </td> + </tr> + <tr> + <td><code>(<em>x</em>)</code></td> + <td> + <p> + <strong>Groupe capturant</strong> Correspond à <code><em>x</em></code> et mémorise la correspondance. Ainsi, <code>/(toto)/</code> correspond à "toto" dans "toto truc" et mémorise cette correspondance. + </p> + <p> + Une expression rationnelle peut avoir plusieurs groupes capturants. Les résultats de ces mémorisations sont stockés dans un tableau dont les éléments suivent le même ordre que les parenthèses ouvrantes des groupes capturants, ce qui correspond généralement à l'ordre des groupes. On peut ainsi accéder aux résultats avec l'index correspondant (<code>[1], ..., [n]</code>) ou en utilisant les propriétés de l'objet <code>RegExp</code> (<code>$1, ..., $9</code>). + </p> + <p> + Les groupes capturants induisent un coût en performances. Si vous n'avez pas besoin de réutiliser les fragments de chaînes qui correspondent, privilégiez l'utilisation des groupes non capturants (voir ci-après). + </p> + <p> + <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/match">String.match()</a></code> ne renverra pas de groupes si le marqueur <code>/.../g</code> est utilisé. Toutefois, on peut toujours utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll">String.matchAll()</a></code> pour obtenir toutes les correspondances. + </p> + </td> + </tr> + <tr> + <td> + <code>\<em>n</em></code> + </td> + <td> + <p> + Avec "n" un entier positif. Une référence à la n-ième correspondance fournie par un groupe. Ainsi, <code>/pomme(,)\sorange\1/</code> correspond à "pommme, orange," dans "pommme, orange, cerise, pêche". + </p> + </td> + </tr> + <tr> + <td>\k<Nom></td> + <td> + <p> + Une référence au dernier fragment de chaîne correspondant au <strong>groupe capturant nommé</strong> indiqué par <code><Nom></code>. + </p> + <p> + Ainsi, <code>/(?<titre>\w+), oui \k<titre>/</code> correspondra à "Messire, oui Messire" dans "Encore du travail ? Messire, oui Messire". + </p> + <div class="note"> + <p> + <strong>Note :</strong> <code>\k</code> est utilisé ici littéralement pour indiquer le début d'une référence vers un groupe de capture nommé. + </p> + </div> + </td> + </tr> + <tr> + <td><code>(?<Nom>x)</code></td> + <td> + <p> + <strong>Groupe de capture nommé</strong> Correspond à "x" et enregistre la correspondance avec le nom indiqué par <code><Nom></code>. Les chevrons (<code><</code> et <code>></code>) sont nécessaires pour indiquer le nom du groupe. + </p> + <p> + Ainsi, pour extraire le département d'un code postal, on pourra utiliser <code>/\((?<dep>\d{2})\d+\)/</code>. Le résultat sera alors disponible via <code>matches.groups.dep</code>. + </p> + </td> + </tr> + <tr> + <td><code>(?:<em>x</em>)</code></td> + <td> + <strong>Groupe non-capturant</strong> Correspond à "x" mais ne garde pas la correspondance en mémoire. La sous-chaîne correspondante ne peut pas être récupérée depuis les éléments du tableau des correspondances (<code>[1], ..., [n]</code>) ou depuis les propriétés prédéfinies de l'objet <code>RegExp</code> (<code>$1, ..., $9</code>). + </td> + </tr> + </tbody> +</table> + +## Quantificateurs + +[Les quantificateurs](/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers) indiquent le nombre de caractères ou d'expressions pour la correspondance. + +> **Note :** Dans ce qui suit, *élément* fait référence à des caractères uniques ou à des [classes de caractères](/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes), [des échappements Unicode](/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes), [des groupes et des intervalles](/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges). + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caractères</th> + <th scope="col">Signification</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <code><em>x</em>*</code> + </td> + <td> + <p> + Correspond à l'élément précédent "x" 0 ou plusieurs fois. Ainsi, <code>/bo*/</code> correspondra à "buuuuu" dans "Il a marqué un buuuuut" et à "b" dans "Un bateau gazouilla", mais à rien dans "Un fromage de chèvre". + </p> + </td> + </tr> + <tr> + <td> + <code><em>x</em>+</code> + </td> + <td> + <p> + Correspond à l'élément précédent "x" 1 ou plusieurs fois. Cette forme est équivalente à <code>{1,}</code>. Ainsi, <code>/a+/</code> correspond à "a" dans "bateau" et à tous les "a" dans "levioosaaaaa". + </p> + </td> + </tr> + <tr> + <td> + <code><em>x</em>?</code> + </td> + <td> + <p> + Correspond à l'élément précédent "x" 0 ou 1 fois. Ainsi, <code>/e?le?/</code> correspond à "el" dans "dégel" et à "le" dans "angle." + </p> + <p> + S'il est utilisé immédiatement après l'un des quantificateurs <code>*</code>, <code>+</code>, <code>?</code>, ou <code>{}</code>, cela rend le quantificateur « non-glouton » et celui correspond alors pour le minimum de la quantité (alors que par défaut, la correspondance s'effectue pour la quantité maximale). + </p> + </td> + </tr> + <tr> + <td> + <code><em>x</em>{<em>n</em>}</code> + </td> + <td> + <p> + Avec "n" un entier positif, correspond à "n" occurrences, exactement, de l'élément "x" précédent. Ainsi, <code>/a{2}/</code> ne correspond pas à "a" dans "bateau" mais correspond à tous les "a" dans "baateau" et seulement au deux premiers "a" dans "baaaaateau". + </p> + </td> + </tr> + <tr> + <td> + <code><em>x</em>{<em>n</em>,}</code> + </td> + <td> + <p> + Avec "n" un entier positif, correspond à au moins "n" occurrences de l'élément "x" précédent. Ainsi, <code>/a{2,}/</code> ne correspond pas à "a" dans "bateau", mais correspond à tous les "a" dans "baateau" et dans "baaaaaateau". + </p> + </td> + </tr> + <tr> + <td> + <code><em>x</em>{<em>n</em>,<em>m</em>}</code> + </td> + <td> + <p> + Avec "n" qui vaut 0 ou un entier positif et "m" un autre entier positif, et + <code><em>m</em> > <em>n</em></code>, correspond au moins à "n" et au plus à "m" occurrences de l'élément "x" précédent. Ainsi, <code>/a{1,3}/</code> ne correspond à rien dans "bteau", à "a" dans "bateau", aux deux "a" dans "baateau", et aux trois premiers "a" dans "baaaaateau". On voit ici que la correspondance dans le dernier exemple est "aaa", même si la chaîne originale contient plus de "a". + </p> + </td> + </tr> + <tr> + <td> + <p><code><em>x</em>*?</code></p> + <p><code><em>x</em>+?</code></p> + <p><code><em>x</em>??</code></p> + <p><code><em>x</em>{n}?</code></p> + <p><code><em>x</em>{n,}?</code></p> + <p><code><em>x</em>{n,m}?</code></p> + </td> + <td> + <p> + Par défaut, les quantificateurs comme <code>*</code> et <code>+</code> sont « gloutons », ce qui signifie que la correspondance est la plus grande possible. Ajouter le caractère <code>?</code> après le quantificateur le rend « non-glouton », ce qui signifie que la correspondance est alors la plus courte possible. Ainsi, avec une chaîne comme "du <toto> <truc> avec </truc> </toto> bidule": + </p> + <ul> + <li> + <code>/<.*>/</code> correspondra à "<toto> <truc> avec </truc> </toto>" + </li> + <li><code>/<.*?>/</code> correspondra à "<toto>"</li> + </ul> + </td> + </tr> + </tbody> +</table> + +## Échappement de propriétés Unicode + +[Les séquences d'échappement de propriétés Unicode](/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes) permettent de cibler des caractères en fonction de leurs propriétés Unicode. + +```js +// Valeurs non-binaires +\p{ValeurPropriétéUnicode} +\p{NomPropriétéUnicode=ValeurPropriétéUnicode} + +// Valeurs binaires et non-binaires +\p{NomPropriétéUnicodeBinaire} + +// Négation : \P correspond à la négation de \p +\P{ValeurPropriétéUnicode} +\P{NomPropriétéUnicodeBinaire} +``` + +- NomPropriétéUnicodeBinaire + - : Le nom d'une [propriété binaire Unicode](https://tc39.es/ecma262/multipage/text-processing.html#table-binary-unicode-properties). Par exemple [`ASCII`](https://unicode.org/reports/tr18/#General_Category_Property), [`Alpha`](https://unicode.org/reports/tr44/#Alphabetic), `Math`, [`Diacritic`](https://unicode.org/reports/tr44/#Diacritic), [`Emoji`](https://unicode.org/reports/tr51/#Emoji_Properties), [`Hex_Digit`](https://unicode.org/reports/tr44/#Hex_Digit), `Math`, [`White_space`](https://unicode.org/reports/tr44/#White_Space), etc. Voir [la liste des propriétés dans les données Unicode](https://www.unicode.org/Public/UCD/latest/ucd/PropList.txt) pour plus d'informations. +- NomPropriétéUnicode + + - : Le nom d'une propriété [non-binaire](https://tc39.es/ecma262/multipage/text-processing.html#table-nonbinary-unicode-properties) : + + - [General_Category](https://unicode.org/reports/tr18/#General_Category_Property) (`gc`) + - [Script](https://unicode.org/reports/tr24/#Script) (`sc`) + - [Script_Extensions](https://unicode.org/reports/tr24/#Script_Extensions) (`scx`) + + Voir aussi [PropertyValueAliases.txt](https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt) + +- ValeurPropriétéUnicode + - : L'une des valeurs indiquées dans la section "Values". De nombreuses valeurs ont des alias ou des noms raccourcis (par exemple, la valeur `Decimal_Number`, de la propriété `General_Category`, peut être écrite `Nd`, `digit`, ou encore `Decimal_Number`). Pour la plupart des valeurs, la partie *`NomPropriétéUnicode`* et le signe égal peuvent être omis. Si *`NomPropriétéUnicode`* est indiqué, la valeur doit correspondre au type de propriété indiquée. + +> **Note :** Il existe de nombreuses propriétés et valeurs disponibles. Il serait laborieux de les lister ici de façon exhaustive. diff --git a/files/fr/web/javascript/guide/working_with_private_class_features/index.md b/files/fr/web/javascript/guide/working_with_private_class_features/index.md new file mode 100644 index 0000000000..be63d6d239 --- /dev/null +++ b/files/fr/web/javascript/guide/working_with_private_class_features/index.md @@ -0,0 +1,221 @@ +--- +title: Utiliser les champs privés d'une classe +slug: Web/JavaScript/Guide/Working_With_Private_Class_Features +translation_of: Web/JavaScript/Guide/Working_With_Private_Class_Features +--- +{{jsSidebar("JavaScript Guide")}} + +Il arrive souvent de vouloir utiliser des champs ou des méthodes privées. Seulement, cette fonctionnalité n'était pas présente aux débuts de JavaScript et, même si des conventions ont été mises en place comme l'utilisation d'un tiret bas comme préfixe afin d'indiquer des champs ou des méthodes privées (`_masqué`) : ce n'était que des conventions et les propriétés concernées étaient bien publiques. + +Avec l'arrivée de la fonctionnalité des champs privés au sein des classes JavaScript, le langage peut désormais implémenter cet aspect privé. Cela fournit plusieurs avantages comme éviter les collisions de nommage entre les classes et le reste du code, permettre aux classes d'exposer une interface réduite. + +## Champs privés + +Pour comprendre la façon dont les champs privés fonctionnent, voyons d'abord une classe uniquement dôtée de champs publics et qui utilise un constructeur pour encapsuler des données. La classe qui suit crée un compteur qui peut démarrer à une valeur indiquer et fournit des méthodes pour augmenter, réduire ou réinitialiser le compteur avec une autre valeur. + +```js example-bad +class CompteurPublic { + constructor(debut = 0) { + let _compteur = debut; + let _init = debut; + this.augmenter = (x = 1) => _compteur += x; + this.reduire = (x = 1) => _compteur -= x; + this.reinitialiser = (x = _init) => _compteur = x; + this.getCompteur = () => _compteur; + } + get actuel() { + return this.getCompteur(); + } +} +``` + +Ici, dès qu'on construit une instance de cette classe, on a un compteur dont la valeur initiale et la valeur courante ne sont pas disponibles au code à l'extérieur du compteur. La seule façon de modifier la valeur de `_compteur` est d'utiliser les méthodes définies comme `augmenter()` et `reinitialiser()`. De même, `_init` ne peut être modifiée, car il n'y a pas de méthode à l'intérieur de la classe pour et le code extérieur ne peut pas y accéder. + +Voici un fragment de code équivalent qui utilise des champs privés : + +```js +class CompteurPrive { + #compteur; + #init; + constructor(debut = 0) { + this.#init = debut; + this.reinitialiser(debut); + } + augmenter(x = 1) { this.#compteur += x; } + reduire(x = 1) { this.#compteur -= x; } + reinitialiser(x = this.#init) { this.#compteur = x; } + get actuel() { + return this.#compteur; + } +} + +let total = new CompteurPrive(7); +console.log(total.actuel); // valeur attendue : 7 +total.augmenter(); // #compteur vaut désormais 8 +total.augmenter(5); // #compteur vaut désormais 13 +console.log(total.actuel); // valeur attendue : 13 +total.reinitialiser(); // #compteur vaut désormais 7 +``` + +Le croisillon (`#`) est le symbole qui indique que le champ est privé. Il permet aussi d'éviter certains conflits de nommage : les noms des champs privés doivent commencer par ce symboles tandis que les noms des propriétés publiques ne peuvent pas commencer par ce caractère. + +Une fois les champs privés déclarés, ils se comportent comme indiqué avec l'exemple précédent. La seule façon de modifier la valeur `#compteur` est d'utiliser les méthodes publiques disponibles comme `reduire()`. De même, il n'existe aucune façon de modifier `#init`. Sa valeur est fixée lorsqu'un instance de `CompteurPrive` est construite et ne peut être changée après. + +On ne peut pas non plus lire une valeur privée depuis le code à l'extérieur de la classe. Par exemple : + +```js +let score = new CompteurPrive(); +// #compteur et #init valent tous les deux 0 +score.augmenter(100); +console.log(score.actuel); // 100 +console.log(score.#compteur); + // output: + // "Uncaught SyntaxError: Private field '#compteur' must be declared in an enclosing class" +``` + +Si vous souhaitez lire des données privées en dehors d'une classe, vous devez d'abord implémenter une méthode ou une autre fonction au sein de la classe pour renvoyer cette donnée. C'est ce que nous avons fait ici avec l'accesseur `actuel()` qui renvoie la valeur courante de `#compteur`. Toutefois, `#init` reste inaccessible. Ainsi, à moins d'ajouter une méthode comme `getInit()` à la classe, la valeur initiale ne peut pas être vue en dehors de la classe (et encore moins la modifier). Toute tentative d'accès renverra une erreur. + +Il est également impossible d'accéder à un champ privé qui n'a pas été précédemment défini. + +```js example-bad +class MauvaiseIdee { + constructor(arg) { + this.#init = arg; // erreur de syntaxe + #startState = arg; // erreur de syntaxe ici aussi + } +} +``` + +Un même nom ne peut être défini deux fois dans une même classe. Un champ privé ne peut pas non plus être supprimé. + +```js example-bad +class MauvaiseIdees { + #prenom; + #prenom; // erreur de syntaxe + #nomFamille; + constructor() { + delete this.#nomFamille; // erreur de syntaxe + } +} +``` + +Il est également impossible de déclarer des champs ou des méthodes privées avec [des littéraux objets](/fr/docs/Web/JavaScript/Guide/Working_with_Objects#using_object_initializers). Pour un objet classique, on peut utiliser : + +```js +const planete = { + nom: 'Terre', + rayonKM: 6371 +}; +``` + +En revanche, on ne peut pas inclure de champs privés ici. + +```js example-bad +const planete = { + nom: 'Terre', + rayonKM: 6371, + #secret: 'cœur de la planète' // erreur de syntaxe +}; +``` + +Au sein d'une classe, on peut avoir des champs statiques privés : + +```js +class MelangeCouleur { + static #rouge = "rgba(1,0,0,1)"; + static #vert = "rgba(0,1,0,1)"; + static #bleu = "rgba(0,0,1,1)"; + #couleurMelangee; + constructor() { + … + } +} +``` + +## Méthodes privées + +À l'instar des champs privés, il est aussi possible de déclarer des méthodes privées, également indiquées par `#`. On ne peut pas accéder à celles-ci en dehors de la classe. Elles permettent de réaliser des actions complexes qui sont nécessaire à l'intérieur de la classe et qui ne pourront pas être invoquée depuis le reste du code. + +Par exemple, on peut créer [un élément HTML personnalisé](/fr/docs/Web/Web_Components/Using_custom_elements) qui effectue des actions complexes lors d'un clic/d'une touche ou d'une quelconque activation. Ces actions complexes qui concernent l'élément devraient être restreintes à l'élément et inaccessibles par ailleurs. On pourra donc écrire : + +```js +class ClicPersonnalise extends HTMLElement { + #gererClic() { + // faire des choses complexes + } + constructor() { + super(); + this.#gererClic(); + } + connectedCallback() { + this.addEventListener('click', this.#gererClic) + } +} + +customElements.define('chci-interactive', ClicPersonnalise); +``` + +Il en va de même avec les accesseurs et les mutateurs. Cela s'avère utile lorsqu'on souhaite uniquement accéder ou modifier des valeurs depuis la même classe. Là encore, on utilise le croisillon `#` pour indiquer le caractère privé. + +```js +class Compteur extends HTMLElement { + #valeurX = 0; + get #x() { return #valeurX; } + set #x(valeur) { + this.#valeurX = valeur; + window.requestAnimationFrame(this.#render.bind(this)); + } + #clic() { + this.#x++; + } + constructor() { + super(); + this.onclick = this.#clic.bind(this); + } + connectedCallback() { this.#render(); } + #render() { + this.textContent = this.#x.toString(); + } +} + +customElements.define('num-compteur', Compteur); +``` + +Dans cet exemple, la quasi-totalité des champs et méthodes est privée. Aucun autre endroit du code JavaScript ne pourra être utilisé pour modifier les valeurs internes d'une instance de cette classe. + +## Vérifier l'existence d'un champ ou d'une méthode privée + +JavaScript lèvera une exception si on essaie d'accéder à une méthode ou à un champ privé qui n'existe pas (à la différence des champs publiques pour lesquels la valeur sera `undefined`). On peut donc utiliser `try`/`catch` ou l'opérateur [`in`](/fr/docs/Web/JavaScript/Reference/Operators/in), plus concis, pour tester l'existence d'une propriété privée. + +Dans le code qui suit, on illustre cette approche avec l'opérateur `in` pour vérifier que les objets ajoutés disposent bien d'un champ privé `#length`. Si ce n'est pas le cas, une exception avec un message détaillé est levée. + +```js +class Scalaire { + #total = 0; + constructor(valeur) { + this.#total = valeur || this.#total; + } + + ajoute(s) { + // On vérifie que l'objet définit #total + if (!(#total in s)) { + throw new TypeError("Une instance de Scalaire est atttendue"); + } + this.#total += s.#total; + } +} + +let scalaire1 = new Scalaire(1); +scalaire1.ajoute(scalaire1); +scalaire1.ajoute({}); // lève l'exception TypeError +``` + +## Compatibilité des navigateurs + +{{Compat("javascript.classes")}} + +## Voir ausi + +- [Les champs privés d'une classe dans la référence JavaScript](/fr/docs/Web/JavaScript/Reference/Classes/Private_class_fields) +- [FAQ (en anglais) sur la syntaxe des champs privés](https://github.com/tc39/proposal-class-fields/blob/master/PRIVATE_SYNTAX_FAQ.md) +- [La sémantique pour les différentes propriétés au sein des classes JavaScript (en anglais)](https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html) diff --git a/files/fr/web/javascript/reference/classes/class_static_initialization_blocks/index.md b/files/fr/web/javascript/reference/classes/class_static_initialization_blocks/index.md new file mode 100644 index 0000000000..f216ee399a --- /dev/null +++ b/files/fr/web/javascript/reference/classes/class_static_initialization_blocks/index.md @@ -0,0 +1,167 @@ +--- +title: Class static initialization blocks +slug: Web/JavaScript/Reference/Classes/Class_static_initialization_blocks +tags: + - Classes + - ECMAScript 2022 + - JavaScript + - Language feature + - Static + - Reference + - Initialization +browser-compat: javascript.classes.class_static_initialization_blocks +--- +{{jsSidebar("Classes")}} + +**Class static initialization blocks** are a special feature of a {{jsxref("Statements/class", "class")}} that enable more flexible initialization of {{jsxref("Classes/static", "static")}} properties than can be achieved using per-field initialization. + +Static blocks allow statements to be evaluated during initialization, which allows initializations that (for example) include `try...catch` or set multiple fields from a single value. + +Initialization is performed in the context of the current class declaration, with privileged access to private state. +This means that static blocks can also be used to share information between classes with instance private fields and other classes or functions declared in the same scope (analogous to "friend" classes in C++). + +{{EmbedInteractiveExample("pages/js/classes-static-initialization.html")}} + +## Syntax + +```js +static { ... } +``` + + +## Description + +A {{jsxref("Statements/class", "class")}} can have any number of `static {}` initialization blocks in its class body. +These are evaluated, along with any interleaved static field initializers, in the order they are declared. +Any static initialization of a super class is performed first, before that of its sub classes. + +The scope of the variables declared inside the static block is local to the block. +Since `var`, `function`, `const` or `let` declared in a `static {}` initialization block are local to the block, any `var` declarations in the block are not hoisted. + +```js +var y = 'Outer y'; + +class A { + static field = 'Inner y'; + static { + var y = this.field; + } +} + +// var defined in static block is not hoisted +console.log(y); +// > 'Outer y' +``` + +The `this` inside a static block refers to the constructor object of the class. +`super.<property>` can be used to access properties of a super class. +Note however that it is a syntax error to call {{jsxref("Operators/super", "super()")}} in a class static initialization block, or to attempt to access arguments of the class constructor function. + +The scope of the static block is nested _within_ the lexical scope of the class body, and can access the private instance variables of the class. + +A static initialization block may not have decorators (the class itself may). + + +## Examples + +### Multiple blocks + +The code below demonstrates a class with static initialization blocks and interleaved static field initializers. +The output shows that the blocks and fields are evaluated in execution order. + +```js +class MyClass { + static field1 = console.log('field1 called'); + static { + console.log('Class static block #1 called'); + } + static field2 = console.log('field2 called'); + static { + console.log('Class static block #2 called'); + } +} + +/* +> "field1 called" +> "Class static block #1 called" +> "field2 called" +> "Class static block #2 called" +*/ +``` + +Note that any static initialization of a super class is performed first, before that of its sub classes. + + +### Using `this` and `super.property` + +The `this` inside a static block refers to the constructor object of the class. +This code shows how to access a public static field. + +```js +class A { + static field = 'A static field'; + static { + var y = this.field; + } +} +``` + +The [`super.property`](/en-US/docs/Web/JavaScript/Reference/Operators/super) can be used inside a `static` block to reference properties of a super class. +This includes static properties, as shown below: + +```js +class A { + static fieldA = 'A.fieldA'; +} +class B extends A { + static { + let x = super.fieldA; + // 'A.fieldA' + } +} +``` + +### Access to private fields + +This example below shows how access can be granted to the private object of a class from an object outside the class (example from the [v8.dev blog](https://v8.dev/features/class-static-initializer-blocks#access-to-private-fields)): + + +```js +let getDPrivateField; + +class D { + #privateField; + constructor(v) { + this.#privateField = v; + } + static { + getDPrivateField = (d) => d.#privateField; + } +} + +getDPrivateField(new D('private')); +// > private +``` + +### Workarounds + +Prior to ES13 more complex static initialization might be achieved by using a static method that is called after the other properties to perform static initialization, or having a method that is external to the class that performs initialization tasks. + +In both cases the approach is less elegant, and does not grant access to private methods in the class. + + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Class static initialization blocks](https://v8.dev/features/class-static-initializer-blocks) (v8.dev blog) +- [ES2022 feature: class static initialization blocks](https://2ality.com/2021/09/class-static-block.html) (2ality.com blog) +- [Classes](/en-US/docs/Web/JavaScript/Reference/Classes) +- {{jsxref("Operators/super", "super()")}} +- [Object.prototype.constructor](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) diff --git a/files/fr/web/javascript/reference/errors/hash_outside_class/index.md b/files/fr/web/javascript/reference/errors/hash_outside_class/index.md new file mode 100644 index 0000000000..991af98458 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/hash_outside_class/index.md @@ -0,0 +1,67 @@ +--- +title: 'SyntaxError: Unexpected ''#'' used outside of class body' +slug: Web/JavaScript/Reference/Errors/Hash_outside_class +translation_of: Web/JavaScript/Reference/Errors/Hash_outside_class +--- +{{jsSidebar("Errors")}} + +L'expression JavaScript "Unexpected '#' used outside of class body" (qu'on peut traduire par « '#' inattendu en dehors d'un corps de classe ») se produit lorsqu'un croisillon (« # ») est trouvé dans un contexte inattendu, notamment [en dehors d'une déclaration de classe](/fr/docs/Web/JavaScript/Reference/Classes/Private_class_fields). Les croisillons sont valides au début d'un fichier [comme commentaire d'interpréteur](/fr/docs/Web/JavaScript/Reference/Lexical_grammar), ou à l'intérieur d'une classe pour indiquer un champ privé. Vous pouvez également rencontrer cette erreur si vous oubliez d'encadrer un identifiant DOM entre quotes (la chaîne de caractères n'étant alors pas délimitée). + +## Message + +```js +SyntaxError: Unexpected '#' used outside of class body. +``` + +## Type d'erreur + +[`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError) + +## Quel est le problème ? + +Un caractère \`#\` a été trouvé dans un contexte inattendu. Cela peut être à du code déplacé qui ne fait plus partie d'une classe, à un commentaire d'interpréteur (<i lang="en">hashbang</i>) situé sur une autre ligne que la première ou à l'oubli de quotes/guillemets autour d'un identifiant du DOM. + +## Exemples + +### Délimiteurs de chaîne manquants + +Pour chaque cas, on peut avoir une légère erreur qui produit cette exception. Par exemple : + +```js example-bad +document.querySelector(#un-élément) +``` + +Pourra être corrigé avec : + +```js example-good +document.querySelector("#un-élément") +``` + +### En dehors d'une classe + +```js example-bad +class ClasseAvecChampPrivé { + #champPrivé + + constructor() { + } +} + +this.#champPrivé = 42 +``` + +Cela pourra être corrigé en déplaçant le champ privé à l'intérieur de la classe : + +```js example-good +class ClasseAvecChampPrivé { + #champPrivé + + constructor() { + this.#champPrivé = 42 + } +} +``` + +## Voir aussi + +- [`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError) |