URL
Un objet pour créer, lire et modifier des adresses URL. Il décompose une adresse en parties : protocole, hôte, chemin et paramètres.
- Renvoie
- Un nouvel objet
URL. Pour une adresse invalide, le constructeur lève uneTypeError.
Exemple
#const address = 'https://codeworlds.com/cours/javascript?chapitre=5&mode=initiation#exercices'
const url = new URL(address)
console.log(url.protocol)
console.log(url.hostname)
console.log(url.pathname)
console.log(url.search)
console.log(url.hash)
console.log(url.origin)Définition et utilisation
#Le constructeur new URL() transforme une chaîne contenant une adresse en un objet où chaque partie de l’adresse a sa propre propriété : protocol, hostname, port, pathname, search (les paramètres après le caractère ?) et hash (le fragment après le caractère #), plus origin et l’adresse complète dans href. Plutôt que de découper la chaîne à la main, vous lisez des valeurs déjà prêtes.
Vous pouvez aussi modifier les propriétés. Après l’affectation d’un nouveau chemin ou d’un nouveau fragment, l’objet recompose lui-même une adresse correcte et encode les caractères spéciaux, par exemple les espaces et les lettres accentuées. Les paramètres de requête sont gérés par la propriété searchParams, un objet URLSearchParams avec les méthodes get(), set() et append().
Le second argument est une adresse de base. Elle permet de transformer un chemin relatif, par exemple "../cours", en une adresse complète, exactement comme le navigateur le fait pour les liens d’une page. Si la chaîne n’est pas une adresse valide, le constructeur lève une erreur TypeError. Pour vérifier une adresse sans gérer d’exception, utilisez URL.canParse().
Syntaxe
#new URL(url)
new URL(url, base)
url.href
url.origin
url.protocol
url.hostname
url.pathname
url.search
url.searchParams
url.hash
URL.canParse(url, base)Paramètres
#url
chaîne
L’adresse à traiter. Elle peut être relative si vous fournissezbase.base
chaîne ou URL, optionnel
L’adresse de base par rapport à laquelle l’adresse relative sera résolue.
Plus d’exemples
#const address = 'https://codeworlds.com/cours'
const url = new URL(address)
url.pathname = '/cours/javascript'
url.searchParams.set('recherche', 'boucle for')
url.hash = 'resultats'
console.log(url.href)
console.log(url.searchParams.get('recherche'))Dans l’adresse, l’espace s’est transformé en +. searchParams.get() renvoie la valeur sous sa forme normale.
const base = 'https://codeworlds.com/cours/javascript/chapitre-5'
console.log(new URL('chapitre-6', base).href)
console.log(new URL('../python', base).href)
console.log(new URL('/ranking', base).href)
console.log(new URL('?page=2', base).href)Une adresse relative fonctionne comme dans l’attribut href d’un lien : chapitre-6 remplace le dernier segment du chemin, .. remonte d’un répertoire, et une barre oblique au début repart de la page racine.
function isValidLink(text) {
try {
new URL(text)
return true
} catch {
return false
}
}
console.log(isValidLink('https://github.com/lea/calculatrice'))
console.log(isValidLink('github.com/lea/calculatrice'))
console.log(URL.canParse('mailto:contact@codeworlds.com'))Une adresse sans protocole n’est pas une adresse absolue valide, donc le constructeur lève une erreur. URL.canParse() donne le même résultat sans bloc try...catch.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Ne construisez pas les adresses en concaténant des chaînes.
url.searchParams.set()et les affectations aux propriétés se chargent eux-mêmes d’encoder les caractères spéciaux. - Pour une adresse saisie par l’utilisateur, gérez toujours l’erreur :
new URL()lève uneTypeErrorpour une adresse invalide. Vous pouvez aussi la vérifier au préalable avecURL.canParse(). - Transformez l’adresse de la page actuelle en objet avec
new URL(location.href), et l’objet de nouveau en chaîne avecurl.hrefouString(url).
Entrées associées
#- URLSearchParamsUn objet pour lire et construire les paramètres de requête d’une adresse, la partie après le caractère ?, par exemple ?cours=js&page=2.
- locationUn objet contenant des informations sur l’adresse de la page actuelle. Il permet de lire ses parties et de naviguer vers une autre adresse.
- history.pushState()Ajoute une nouvelle entrée à l’historique du navigateur et change l’adresse dans la barre sans recharger la page.
- fetch()Envoie une requête HTTP et renvoie une promesse avec la réponse du serveur (un objet Response).
- try...catchCapture les erreurs levées dans un bloc try et les traite dans catch. Un finally optionnel s’exécute toujours.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.