You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The built-in [URL](https://url.spec.whatwg.org/#api)class provides a convenient interface for creating and parsing URLs.
4
+
La classe d'[URL](https://url.spec.whatwg.org/#api)intégrée fournit une interface pratique pour créer et analyser des URL.
5
5
6
-
There are no networking methods that require exactly an `URL` object, strings are good enough. So technically we don't have to use`URL`. But sometimes it can be really helpful.
6
+
Il n'y a pas de méthodes de mise en réseau qui nécessitent exactement un objet `URL`, les chaînes de caractères sont généralement suffisantes. Donc, techniquement, nous n'avons pas à utiliser`URL`. Mais parfois, cela peut être très utile.
7
7
8
-
## Creating an URL
8
+
## Création d'une URL
9
9
10
-
The syntax to create a new `URL`object:
10
+
La syntaxe pour créer un nouvel objet `URL` :
11
11
12
12
```js
13
13
newURL(url, [base])
14
14
```
15
15
16
-
-**`url`** -- the full URL or only path (if base is set, see below),
17
-
-**`base`** -- an optional base URL: if set and `url`argument has only path, then the URL is generated relative to`base`.
16
+
-**`url`** -- l'URL complète ou le seul chemin (si la base est définie, voir ci-dessous),
17
+
-**`base`** -- une URL de base facultative : si définie et que l'argument `url`n'a que le chemin, l'URL est générée par rapport à la`base`.
18
18
19
-
For example:
19
+
Par exemple :
20
20
21
21
```js
22
22
let url =newURL('https://javascript.info/profile/admin');
23
23
```
24
24
25
-
These two URLs are same:
25
+
Ces deux URL sont identiques :
26
26
27
27
```js run
28
28
let url1 =newURL('https://javascript.info/profile/admin');
-`protocol`se termine par le caractère deux-points`:`
60
+
-`search` - une chaîne de caractères de paramètres, commence par le point d'interrogation`?`
61
+
-`hash`commence par le caractère de hachage`#`
62
+
-il peut y avoir aussi les propriétés `user`et`password`si l'authentification HTTP est présente : `http://login:[email protected]` (pas expliqué ci-dessus, très peu utilisé)
63
63
64
64
65
-
```smart header="We can pass `URL`objects to networking (and most other) methods instead of a string"
66
-
We can use an `URL`object in `fetch`or`XMLHttpRequest`, almost everywhere where an URL-string is expected.
65
+
```smart header="Nous pouvons passer des objets `URL`aux méthodes de mise en réseau (et à la plupart des autres) au lieu d'une chaîne de caractères"
66
+
Nous pouvons utiliser un objet `URL`dans`fetch`ou`XMLHttpRequest`, presque partout où une chaîne de caractères URL est attendue.
67
67
68
-
Generally, `URL`object can be passed to any method instead of a string, as most method will perform the string conversion, that turns an `URL`object into a string with full URL.
68
+
Généralement, l'objet `URL`peut être passé à n'importe quelle méthode au lieu d'une chaîne de caractères, car la plupart des méthodes effectueront la conversion vers cette dernière, qui transforme un objet`URL`en une chaîne de caractères avec une URL complète.
69
69
```
70
70
71
71
## SearchParams "?..."
72
72
73
-
Let's say we want to create an url with given search params, for instance, `https://google.com/search?query=JavaScript`.
73
+
Disons que nous voulons créer une URL avec des paramètres de recherche donnés, par exemple `https://google.com/search?query=JavaScript`.
74
74
75
-
We can provide them in the URL string:
75
+
Nous pouvons les fournir dans la chaîne de caractères URL :
76
76
77
77
```js
78
78
new URL('https://google.com/search?query=JavaScript')
79
79
```
80
80
81
-
...But parameters need to be encoded if they contain spaces, non-latin letters, etc (more about that below).
81
+
… Mais les paramètres doivent être encodés s'ils contiennent des espaces, des lettres non latines, etc. (plus à ce sujet ci-dessous).
82
82
83
-
So there's URL property for that: `url.searchParams`, an object of type [URLSearchParams](https://url.spec.whatwg.org/#urlsearchparams).
83
+
Il y a donc une propriété URL pour cela : `url.searchParams`, un objet de type [URLSearchParams](https://url.spec.whatwg.org/#urlsearchparams).
84
84
85
-
It provides convenient methods for search parameters:
85
+
Elle fournit des méthodes pratiques pour les paramètres de recherche :
86
86
87
-
-**`append(name, value)`** -- add the parameter by`name`,
88
-
-**`delete(name)`** -- remove the parameter by`name`,
89
-
-**`get(name)`** -- get the parameter by`name`,
90
-
-**`getAll(name)`** -- get all parameters with the same `name` (that's possible, e.g.`?user=John&user=Pete`),
91
-
-**`has(name)`** -- check for the existance of the parameter by`name`,
92
-
-**`set(name, value)`** -- set/replace the parameter,
93
-
-**`sort()`** -- sort parameters by name, rarely needed,
94
-
-...and it's also iterable, similar to`Map`.
87
+
-**`append(name, value)`** -- ajouter le paramètre`name`,
88
+
-**`delete(name)`** -- supprime le paramètre`name`,
89
+
-**`get(name)`** -- obtenir le paramètre`name`,
90
+
-**`getAll(name)`** -- obtient tous les paramètres avec le même `name` (par exemple`?user=John&user=Pete`),
91
+
-**`has(name)`** -- vérifie l'existence du paramètre`name`,
92
+
-**`set(name, value)`** -- défini/remplace le paramètre,
93
+
-**`sort()`** -- trie les paramètres par nom, rarement nécessaire,
94
+
-… et elle est également itérable, semblable à`Map`.
95
95
96
-
An example with parameters that contain spaces and punctuation marks:
96
+
Un exemple avec des paramètres contenant des espaces et des signes de ponctuation :
97
97
98
98
```js run
99
99
let url =newURL('https://google.com/search');
100
100
101
-
url.searchParams.set('q', 'test me!'); //added parameter with a space and !
101
+
url.searchParams.set('q', 'test me!'); //paramètre ajouté avec un espace et !
//itérer sur les paramètres de recherche (décodés)
111
111
for(let [name, value] ofurl.searchParams) {
112
-
alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
112
+
alert(`${name}=${value}`); // q=test me!, ensuite tbs=qdr:y
113
113
}
114
114
```
115
115
116
116
117
-
## Encoding
117
+
## Encodage
118
118
119
-
There's a standard [RFC3986](https://tools.ietf.org/html/rfc3986)that defines which characters are allowed in URLs and which are not.
119
+
Il y a une norme [RFC3986](https://tools.ietf.org/html/rfc3986)qui définit quels caractères sont autorisés dans les URL et lesquels ne le sont pas.
120
120
121
-
Those that are not allowed, must be encoded, for instance non-latin letters and spaces - replaced with their UTF-8 codes, prefixed by`%`, such as`%20` (a space can be encoded by`+`, for historical reasons, but that's an exception).
121
+
Ceux qui ne sont pas autorisés doivent être encodés, par exemple les lettres et les espaces non latins - remplacés par leurs codes UTF-8, préfixés par`%`, tels que`%20` (un espace peut être encodé par`+`, pour des raisons historiques, mais c'est une exception).
122
122
123
-
The good news is that `URL`objects handle all that automatically. We just supply all parameters unencoded, and then convert the `URL` to string:
123
+
La bonne nouvelle est que les objets `URL`gèrent tout cela automatiquement. Nous fournissons simplement tous les paramètres non codés, puis convertissons l'URL en chaîne de caractères :
124
124
125
125
```js run
126
-
//using some cyrillic characters for this example
126
+
//en utilisant des caractères cyrilliques pour cet exemple
127
127
128
128
let url =newURL('https://ru.wikipedia.org/wiki/Тест');
As you can see, both `Тест`in the url path and `ъ`in the parameter are encoded.
134
+
Comme vous pouvez le voir, `Тест`dans le chemin de l'url et `ъ`dans le paramètre sont encodés.
135
135
136
-
The URL became longer, because each cyrillic letter is represented with two bytes in UTF-8, so there are two `%..` entities.
136
+
L'URL est devenue plus longue, car chaque lettre cyrillique est représentée avec deux octets en UTF-8, il y a donc deux entités `%..`.
137
137
138
-
### Encoding strings
138
+
### Encodage de chaîne de caractères
139
139
140
-
In old times, before `URL`objects appeared, people used strings for URLs.
140
+
Autrefois, avant que les objets `URL`n'apparaissent, les gens utilisaient des chaînes de caractères pour les URL.
141
141
142
-
As of now, `URL`objects are often more convenient, but strings can still be used as well. In many cases using a string makes the code shorter.
142
+
Pour l'instant, les objets `URL`sont souvent plus pratiques, mais les chaînes de caractères peuvent toujours être utilisées également. Dans de nombreux cas, l'utilisation d'une chaîne de caractères raccourcit le code.
143
143
144
-
If we use a string though, we need to encode/decode special characters manually.
144
+
Si nous utilisons une chaîne de caractères, nous devons encoder/décoder les caractères spéciaux manuellement.
145
145
146
-
There are built-in functions for that:
146
+
Il existe des fonctions intégrées pour cela :
147
147
148
-
-[encodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) - encodes URL as a whole.
149
-
-[decodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI) - decodes it back.
150
-
-[encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) - encodes a URL component, such as a search parameter, or a hash, or a pathname.
151
-
-[decodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) - decodes it back.
148
+
-[encodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI) - encode l'URL dans son ensemble.
149
+
-[decodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI) - la décode de nouveau.
150
+
-[encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) - encode un composant URL, tel qu'un paramètre de recherche, un hachage ou un chemin d'accès.
151
+
-[decodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) - la décode de nouveau.
152
152
153
-
A natural question is: "What's the difference between `encodeURIComponent`and`encodeURI`? When we should use either?"
153
+
Une question naturelle est: "Quelle est la différence entre `encodeURIComponent`et`encodeURI` ? Quand devrions-nous utiliser l'une ou l'autre ?"
154
154
155
-
That's easy to understand if we look at the URL, that's split into components in the picture above:
155
+
C'est facile à comprendre si nous regardons l'URL, qui est divisée en composants dans l'image ci-dessus :
156
156
157
157
```
158
158
https://site.com:8080/path/page?p1=v1&p2=v2#hash
159
159
```
160
160
161
-
As we can see, characters such as `:`, `?`, `=`, `&`, `#`are allowed in URL.
161
+
Comme nous pouvons le voir, les caractères tels que `:`, `?`, `=`, `&`, `#`sont autorisés dans l'URL.
162
162
163
-
...On the other hand, if we look at a single URL component, such as a search parameter, these characters must be encoded, not to break the formatting.
163
+
… D'un autre côté, si nous regardons un seul composant URL, tel qu'un paramètre de recherche, ces caractères doivent être encodés, pour ne pas casser la mise en forme.
164
164
165
-
-`encodeURI`encodes only characters that are totally forbidden in URL.
166
-
-`encodeURIComponent`encodes same characters, and, in addition to them, characters `#`, `$`, `&`, `+`, `,`, `/`, `:`, `;`, `=`, `?`and`@`.
165
+
-`encodeURI`encode uniquement les caractères totalement interdits dans l'URL.
166
+
-`encodeURIComponent`encode les mêmes caractères et, en plus d'eux, les caractères `#`, `$`, `&`, `+`, `,`, `/`, `:`, `;`, `=`, `?`et`@`.
167
167
168
-
So, for a whole URL we can use `encodeURI`:
168
+
Donc, pour une URL entière, nous pouvons utiliser `encodeURI`:
169
169
170
170
```js run
171
-
//using cyrillic characters in url path
171
+
//en utilisant des caractères cyrilliques dans le chemin de l'url
As we can see, `encodeURI`does not encode `&`, as this is a legit character in URL as a whole.
195
+
Comme nous pouvons le voir, `encodeURI`n'encode pas `&`, car il s'agit d'un caractère légitime dans l'URL.
196
196
197
-
But we should encode`&`inside a search parameter, otherwise, we get`q=Rock&Roll` - that is actually `q=Rock` plus some obscure parameter`Roll`. Not as intended.
197
+
Mais nous devons encoder`&`à l'intérieur d'un paramètre de recherche, sinon, nous obtenons`q=Rock&Roll` - qui est en fait `q=Rock` plus un paramètre obscur`Roll`. Pas comme prévu.
198
198
199
-
So we should use only`encodeURIComponent`for each search parameter, to correctly insert it in the URL string. The safest is to encode both name and value, unless we're absolutely sure that it has only allowed characters.
199
+
Nous devons donc utiliser uniquement`encodeURIComponent`pour chaque paramètre de recherche, pour l'insérer correctement dans la chaîne de caractères URL. Le plus sûr est d'encoder à la fois le nom et la valeur, à moins que nous ne soyons absolument sûrs qu'il n'a que des caractères autorisés.
Classes [URL](https://url.spec.whatwg.org/#url-class)and[URLSearchParams](https://url.spec.whatwg.org/#interface-urlsearchparams)are based on the latest URI specification: [RFC3986](https://tools.ietf.org/html/rfc3986), while `encode*`functions are based on the obsolete version [RFC2396](https://www.ietf.org/rfc/rfc2396.txt).
201
+
````smart header="Différence d'encodage par rapport à`URL`"
202
+
Les classes [URL](https://url.spec.whatwg.org/#url-class)et[URLSearchParams](https://url.spec.whatwg.org/#interface-urlsearchparams)sont basés sur la dernière spécification d'URI : [RFC3986](https://tools.ietf.org/html/rfc3986), tandis que les fonctions `encode*`sont basées sur la version obsolète[RFC2396](https://www.ietf.org/rfc/rfc2396.txt).
203
203
204
-
There are few differences, e.g. IPv6 addresses are encoded differently:
204
+
Il y a peu de différences, par exemple, Les adresses IPv6 sont encodées différemment :
As we can see, `encodeURI`replaced square brackets `[...]`, that's not correct, the reason is: IPv6 urls did not exist at the time of RFC2396 (August 1998).
214
+
Comme nous pouvons le voir, `encodeURI`a remplacé les crochets `[...]`, ce qui n'est pas correct, la raison est que les URL IPv6 n'existaient pas au moment de la RFC2396 (août 1998).
215
215
216
-
Such cases are rare, `encode*`functions work well most of the time.
216
+
De tels cas sont rares, les fonctions `encode*`fonctionnent bien la plupart du temps.
0 commit comments