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 clase[URL](https://url.spec.whatwg.org/#api)incorporada brinda una interfaz conveniente para crear y analizar URLs.
5
5
6
-
There are no networking methods that require exactly a`URL` object, strings are good enough. So technically we don't have to use`URL`. But sometimes it can be really helpful.
6
+
No hay métodos de networking que requieran exactamente un objeto`URL`, los strings son suficientemente buenos para eso. Así que técnicamente no tenemos que usar`URL`. Pero a veces puede ser realmente útil.
7
7
8
-
## Creating a URL
8
+
## Creando una URL
9
9
10
-
The syntax to create a new `URL`object:
10
+
La sintaxis para crear un nuevo objeto `URL`es:
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`** -- La URL completa o ruta única (si se establece base, mira a continuación),
17
+
-**`base`** - una URL base opcional: si se establece y el argumento `url`solo tiene una ruta, entonces la URL se genera relativa a`base`.
18
18
19
-
For example:
19
+
Por ejemplo:
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
+
Estas dos URLs son las mismas:
26
26
27
27
```js run
28
28
let url1 =newURL('https://javascript.info/profile/admin');
Aquí está la hoja de trucos para los componentes URL:
55
55
56
56
57
57
58
-
-`href`is the full url, same as`url.toString()`
59
-
-`protocol`ends with the colon character `:`
60
-
-`search` - a string of parameters, starts with the question mark `?`
61
-
-`hash`starts with the hash character `#`
62
-
-there may be also`user`and`password`properties if HTTP authentication is present: `http://login:password@site.com` (not painted above, rarely used).
58
+
-`href`es la url completa, igual que`url.toString()`
59
+
-`protocol`acaba con el carácter dos puntos `:`
60
+
-`search` - un string de parámetros, comienza con el signo de interrogación `?`
61
+
-`hash`comienza con el carácter de hash `#`
62
+
-También puede haber propiedades`user`y`password`si la autenticación HTTP esta presente: `http://login:password@site.com` (no mostrados arriba, raramente usados)
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 a`URL`object in `fetch`or`XMLHttpRequest`, almost everywhere where a URL-string is expected.
65
+
```smart header="Podemos pasar objetos`URL`a métodos de red (y la mayoría de los demás) en lugar de un string"
66
+
Podemos usar un objeto`URL`en `fetch`o`XMLHttpRequest`, casi en todas partes donde se espera un URL-string.
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 a `URL`object into a string with full URL.
68
+
Generalmente, un objeto `URL`puede pasarse a cualquier método en lugar de un string, ya que la mayoría de métodos llevarán a cabo la conversión del string, eso convierte un objeto `URL`en un string con URL completa.
69
69
```
70
70
71
-
## SearchParams "?..."
71
+
## Parámetros de búsqueda "?..."
72
72
73
-
Let's say we want to create a url with given search params, for instance, `https://google.com/search?query=JavaScript`.
73
+
Digamos que queremos crear una url con determinados parámetros de búsqueda, por ejemplo, `https://google.com/search?query=JavaScript`.
74
74
75
-
We can provide them in the URL string:
75
+
Podemos proporcionarlos en el string 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
+
...Pero los parámetros necesitan estar codificados si contienen espacios, letras no latinas, entre otros (Más sobre eso debajo).
82
82
83
-
So there's URL property for that: `url.searchParams`, an object of type[URLSearchParams](https://url.spec.whatwg.org/#urlsearchparams).
83
+
Por lo que existe una propiedad URL para eso: `url.searchParams`, un objeto de tipo[URLSearchParams](https://url.spec.whatwg.org/#urlsearchparams).
84
84
85
-
It provides convenient methods for search parameters:
85
+
Esta proporciona métodos convenientes para los parámetros de búsqueda:
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 existence 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)`** -- añade el parámetro por`name`,
88
+
-**`delete(name)`** -- elimina el parámetro por`name`,
89
+
-**`get(name)`** -- obtiene el parámetro por`name`,
90
+
-**`getAll(name)`** -- obtiene todos los parámetros con el mismo `name` (Eso es posible, por ej.`?user=John&user=Pete`),
91
+
-**`has(name)`** -- comprueba la existencia del parámetro por `name`,
92
+
-**`set(name, value)`** -- establece/reemplaza el parámetro,
93
+
-**`sort()`** -- ordena parámetros por `name`, raramente necesitado,
94
+
- ...y además es iterable, similar a`Map`.
95
95
96
-
An example with parameters that contain spaces and punctuation marks:
96
+
Un ejemplo con parámetros que contienen espacios y signos de puntuación:
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!'); //Parámetro añadido con un espacio y !
//Iterar sobre los parametros de búsqueda (Decodificados)
111
111
for(let [name, value] ofurl.searchParams) {
112
112
alert(`${name}=${value}`); // q=test me!, then tbs=qdr:y
113
113
}
114
114
```
115
115
116
116
117
-
## Encoding
117
+
## Codificación
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
+
Existe un estándar[RFC3986](https://tools.ietf.org/html/rfc3986)que define cuales caracteres son permitidos en URLs y cuales no.
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
+
Esos que no son permitidos, deben ser codificados, por ejemplo letras no latinas y espacios - reemplazados con sus códigos UTF-8, con el prefijo `%`, tal como`%20` (un espacio puede ser codificado con`+`, por razones históricas, pero esa es una excepción).
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 buena noticia es que los objetos `URL`manejan todo eso automáticamente. Nosotros sólo proporcionamos todos los parámetros sin codificar, y luego convertimos la`URL`a string:
124
124
125
125
```js run
126
-
//using some cyrillic characters for this example
126
+
//Usando algunos caracteres cirílicos para este ejemplo
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
+
Como puedes ver, ambos`Тест`en la ruta url y `ъ`en el parámetro están codificados.
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
+
La URL se alarga, ya que cada letra cirílica es representada con dos bytes en UTF-8, por lo que hay dos entidades `%..`.
137
137
138
-
### Encoding strings
138
+
### Codificando strings
139
139
140
-
In old times, before `URL`objects appeared, people used strings for URLs.
140
+
En los viejos tiempos, antes de que los objetos `URL`aparecieran, la gente usaba strings para las 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
+
A partir de ahora, los objetos `URL`son frecuentemente más convenientes, pero también aún pueden usarse los strings. En muchos casos usando un string se acorta el código.
143
143
144
-
If we use a string though, we need to encode/decode special characters manually.
144
+
Aunque si usamos un string, necesitamos codificar/decodificar caracteres especiales manualmente.
145
145
146
-
There are built-in functions for that:
146
+
Existen funciones incorporadas para eso:
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) - Codifica la URL como un todo.
149
+
-[decodeURI](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI) - La decodifica de vuelta.
150
+
-[encodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) - Codifica un componente URL, como un parametro de busqueda, un hash, o un pathname.
151
+
-[decodeURIComponent](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) - La decodifica de vuelta.
152
152
153
-
A natural question is: "What's the difference between `encodeURIComponent`and`encodeURI`? When we should use either?"
153
+
Una pregunta natural es: "¿Cuál es la diferencia entre `encodeURIComponent`y`encodeURI`?¿Cuándo deberíamos usar una u otra?
154
154
155
-
That's easy to understand if we look at the URL, that's split into components in the picture above:
155
+
Eso es fácil de entender si miramos a la URL, que está separada en componentes en la imagen de arriba:
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
+
Como podemos ver, caracteres tales como`:`, `?`, `=`, `&`, `#`son admitidos en 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
+
...Por otra parte, si miramos a un único componente URL, como un parámetro de búsqueda, estos caracteres deben estar codificados, para no romper el formateo.
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`Codifica solo caracteres que están totalmente prohibidos en URL
166
+
-`encodeURIComponent`Codifica los mismos caracteres, y, en adición a ellos, los caracteres `#`, `$`, `&`, `+`, `,`, `/`, `:`, `;`, `=`, `?`y`@`.
167
167
168
-
So, for a whole URL we can use`encodeURI`:
168
+
Entonces, para una URL completa podemos usar`encodeURI`:
As we can see, `encodeURI`does not encode `&`, as this is a legit character in URL as a whole.
195
+
Como podemos ver, `encodeURI`no codifica `&`, ya que este es un carácter legítimo en la URL como un todo.
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
+
Pero debemos codificar `&`dentro de un parámetro de búsqueda, de otra manera, obtendremos `q=Rock&Roll`- que es realmente`q=Rock`más algún parámetro `Roll` oscuro. No según lo previsto.
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
+
Así que debemos usar solo`encodeURIComponent`para cada parámetro de búsqueda, para insertarlo correctamente en el string URL. Lo más seguro es codificar tanto nombre como valor, a menos que estemos absolutamente seguros de que solo haya admitido caracteres
200
200
201
-
````smart header="Encoding difference compared to `URL`"
202
-
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="Diferencia de codificación comparado con `URL`"
202
+
Las clases [URL](https://url.spec.whatwg.org/#url-class)y[URLSearchParams](https://url.spec.whatwg.org/#interface-urlsearchparams)están basadas en la especificación URI mas reciente: [RFC3986](https://tools.ietf.org/html/rfc3986), mientras que las funciones `encode*`están basadas en la versión obsoleta[RFC2396](https://www.ietf.org/rfc/rfc2396.txt).
203
203
204
-
There are few differences, e.g. IPv6 addresses are encoded differently:
204
+
Existen algunas diferencias, por ej. las direcciones IPv6 se codifican de otra forma:
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
+
Como podemos ver, `encodeURI`reemplazó los corchetes`[...]`, eso es incorrecto, la razón es: las urls IPv6 no existían en el tiempo de RFC2396 (August 1998).
215
215
216
-
Such cases are rare, `encode*`functions work well most of the time.
216
+
Tales casos son raros, las funciones `encode*`mayormente funcionan bien.
0 commit comments