La classe built-in URL fornisce una comoda interfaccia per la creazione ed il parsing degli URL.
Non esistono metodi di networking che richiedono esattamente un oggetto di tipo URL, in quanto le stringhe sono già abbastanza adatte allo scopo. Quindi, tecnicamente non siamo obbligati all’utilizzo di URL. Talvolta però può essere molto utile.
Creare un URL
Ecco la sintassi per creare un nuovo oggetto URL:
new URL(url, [base])
url– l’URL completo o solo il path (se il parametrobaseè stato impostato, vedi il parametro seguente),base– un base URL opzionale: se è impostato e l’argomentourlcontiene solamente il path, l’URL viene generato in relazione abase.
Ad esempio:
let url = new URL('https://javascript.info/profile/admin');
Questi due URL sono identici:
let url1 = new URL('https://javascript.info/profile/admin');
let url2 = new URL('/profile/admin', 'https://javascript.info');
alert(url1); // https://javascript.info/profile/admin
alert(url2); // https://javascript.info/profile/admin
Possiamo facilmente creare un nuovo URL basato su uno già esistente:
let url = new URL('https://javascript.info/profile/admin');
let newUrl = new URL('tester', url);
alert(newUrl); // https://javascript.info/profile/tester
L’oggetto URL ci permette di accedere alle sue componenti, fornendo un modo elegante di effettuare il parsing dell’url, ad esempio:
let url = new URL('https://javascript.info/url');
alert(url.protocol); // https:
alert(url.host); // javascript.info
alert(url.pathname); // /url
Ecco una tabella informativa per le componenti dell’URL:
hrefè l’url completo, equivalente diurl.toString()protocoltermina con il carattere:searchè una stringa contenente parametri, comincia con il punto interrogativo?hashcomincia con il carattere cancelletto#- possono essere presenti anche le proprietà
userepassword, se è presente l’autenticazione HTTP:http://login:password@site.com(non illustrata nella figura precedente, perché è usata molto raramente).
URL ai metodi di networking (e molti altri) anziché una stringaPossiamo usare un oggetto URL dentro fetch o XMLHttpRequest, ed in generale, quasi ovunque ci si aspetti una stringa.
Generalmente, l’oggetto URL può essere passato a qualunque metodo al posto di una stringa, dal momento che la maggior parte di essi, effettueranno una conversione automatica in stringa, trasformando, quindi, un oggetto URL