I JavaScript er URL
interface bruges til at parse, konstruere, normalisere og kode URL'er. Det giver statiske metoder og egenskaber til at læse og ændre forskellige komponenter i URL'en.
Opret et URL-objekt
Du kan oprette en ny URL
objekt ved enten at videregive streng-URL'en eller ved at angive en relativ sti og en basisstreng-URL til dets konstruktør:
// URL object with absolute path
const url1 = new URL('https://attacomsian.com/blog/javascript-url-object')
// URL object with relative path and base URL
const url2 = new URL('/blog/javascript-url-object', 'https://attacomsian.com')
I eksemplet ovenfor er begge URL'er de samme. Vi kan endda oprette en ny URL baseret på stien i forhold til en eksisterende URL:
const url3 = new URL('/blog', url1)
console.log(url3.toString())
// https://atttacomsian.com/blog
URL-egenskaber
URL
objekt er nyttigt, hvis du vil udtrække forskellige dele fra en streng-URL, såsom værtsnavn, port, relativ sti og parameterværdier. Du kan få adgang til disse egenskaber umiddelbart efter URL
objekt er oprettet:
const url = new URL('https://attacomsian.com/blog/javascript-url-object#url-properties')
console.log(url.protocol) // https:
console.log(url.host) // attacomsian.com
console.log(url.pathname) // /blog/javascript-url-object
console.log(url.hash) // #url-properties
console.log(url.origin) // https://attacomsian.com
Ud over ovenstående egenskaber er URL
objektet har også:
search
— Forespørgselsparameterstrengen inklusive den førende?
tegn.href
— Den komplette URL, samme somurl.toString()
metode.port
— Returnerer porten for URL'en.searchParams
— EnURLSearchParams
objekt for at få adgang til de individuelle forespørgselsparametre fundet isearch
.username
&password
— Kun tilgængelig, hvis der bruges HTTP-godkendelse.
Bortset fra ovenstående egenskaber er URL
objekt giver også to metoder:
toString()
— Det lignerurl.href
men kan ikke bruges til at ændre værdien.toJSON()
— Det returnerer den samme streng somhref
ejendom.
Opdater et URL-objekt
URL
objektegenskaber (undtagen origin
og searchParams
) kan bruges til at konstruere en ny URL eller opdatere dele af en eksisterende URL:
// construct a URL
const url = new URL('http://attacomsian.com')
url.pathname = '/blog/javascript-url-object'
url.hash = '#url-properties'
// update `protocol` property
url.protocol = 'https:'
console.log(url.toString())
// https://attacomsian.com/blog/javascript-url-object#url-properties
Statiske metoder
URL
interface giver en createObjectURL()
statisk metode til at generere en blob-URL (starter med blob:
som dets skema), der unikt identificerer objektet i browseren:
const blobUrl = URL.createObjectURL(blob)
Når du har blob-URL'en, skal du videregive den til revokeObjectURL()
statisk metode til at fjerne det fra hukommelsen:
URL.revokeObjectURL(blobUrl)
Brug af URL-objekt
I øjeblikket er URL
brugen af objekter er begrænset. Simple strenge er gode nok til at lave netværksanmodninger. Du kan dog bruge URL
objekt i moderne JavaScript API'er som Fetch API eller endda i XMLHttpRequest (XHR) for at kommunikere med serveren.
Her er et eksempel på Fetch API, der bruger en URL
objekt for at få et JSON-objekt:
const url = new URL('https://reqres.in/api/users')
fetch(url)
.then(res => res.json())
.then(res => {
res.data.map(user => {
console.log(`${user.id}: ${user.first_name} ${user.last_name}`)
})
})