URL
Obiekt do tworzenia, odczytywania i zmieniania adresów URL. Rozkłada adres na części: protokół, host, ścieżkę i parametry.
- Zwraca
- Nowy obiekt
URL. Przy niepoprawnym adresie konstruktor rzucaTypeError.
Przykład
#const address = 'https://codeworlds.com/kursy/javascript?lekcja=5&tryb=nauka#zadania'
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)Definicja i zastosowanie
#Konstruktor new URL() zamienia napis z adresem na obiekt, w którym każda część adresu ma własną właściwość: protocol, hostname, port, pathname, search (parametry po znaku ?) i hash (fragment po znaku #), a do tego origin i pełny adres w href. Zamiast ciąć napis ręcznie, odczytujesz gotowe wartości.
Właściwości można też zmieniać. Po przypisaniu nowej ścieżki czy fragmentu obiekt sam składa poprawny adres i koduje znaki specjalne, np. spacje i polskie litery. Parametry zapytania obsługuje właściwość searchParams, czyli obiekt URLSearchParams z metodami get(), set() i append().
Drugi argument to adres bazowy. Dzięki niemu zamienisz ścieżkę względną, np. "../kursy", na pełny adres, dokładnie tak, jak przeglądarka robi to z linkami na stronie. Jeśli napis nie jest poprawnym adresem, konstruktor rzuca błąd TypeError. Żeby sprawdzić adres bez obsługi wyjątków, użyj URL.canParse().
Składnia
#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)Parametry
#url
napis
Adres do przetworzenia. Może być względny, jeśli podaszbase.base
opcjonalny, napis lub URL
Adres bazowy, względem którego zostanie rozwiązany adres względny.
Więcej przykładów
#const address = 'https://codeworlds.com/kursy'
const url = new URL(address)
url.pathname = '/kursy/javascript'
url.searchParams.set('szukaj', 'pętla for')
url.hash = 'wyniki'
console.log(url.href)
console.log(url.searchParams.get('szukaj'))W adresie spacja zamieniła się na +, a litera „ę” na %C4%99. searchParams.get() zwraca wartość z powrotem w zwykłej postaci.
const base = 'https://codeworlds.com/kursy/javascript/lekcja-5'
console.log(new URL('lekcja-6', base).href)
console.log(new URL('../python', base).href)
console.log(new URL('/ranking', base).href)
console.log(new URL('?strona=2', base).href)Adres względny działa tak jak w atrybucie href linku: lekcja-6 zastępuje ostatni fragment ścieżki, .. cofa o jeden katalog, a ukośnik na początku zaczyna od głównej strony.
function isValidLink(text) {
try {
new URL(text)
return true
} catch {
return false
}
}
console.log(isValidLink('https://github.com/ania/kalkulator'))
console.log(isValidLink('github.com/ania/kalkulator'))
console.log(URL.canParse('mailto:kontakt@codeworlds.com'))Adres bez protokołu nie jest poprawnym adresem bezwzględnym, więc konstruktor rzuca błąd. URL.canParse() daje ten sam wynik bez bloku try...catch.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie składaj adresów przez sklejanie napisów.
url.searchParams.set()i przypisania do właściwości same zadbają o kodowanie znaków specjalnych. - Przy adresach od użytkownika zawsze obsłuż błąd:
new URL()rzucaTypeErrordla niepoprawnego adresu. Możesz też sprawdzić go wcześniej przezURL.canParse(). - Adres bieżącej strony zamienisz na obiekt przez
new URL(location.href), a obiekt z powrotem na napis przezurl.hrefalboString(url).
Powiązane hasła
#- URLSearchParamsObiekt do odczytu i budowania parametrów zapytania w adresie, czyli części po znaku ?, np. ?kurs=js&strona=2.
- locationObiekt z informacjami o adresie bieżącej strony. Pozwala odczytać jego części i przejść pod inny adres.
- history.pushState()Dodaje nowy wpis do historii przeglądarki i zmienia adres w pasku bez przeładowania strony.
- fetch()Wysyła zapytanie HTTP i zwraca obietnicę z odpowiedzią serwera (obiektem Response).
- try...catchPrzechwytuje błędy rzucone w bloku try i obsługuje je w catch. Opcjonalny finally wykona się zawsze.
Widzisz błąd albo brakuje przykładu? Napisz do nas.