Sådan bruger du URL-objektet i JavaScript

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 som url.toString() metode.
  • port — Returnerer porten for URL'en.
  • searchParams — En URLSearchParams objekt for at få adgang til de individuelle forespørgselsparametre fundet i search .
  • username &password — Kun tilgængelig, hvis der bruges HTTP-godkendelse.

Bortset fra ovenstående egenskaber er URL objekt giver også to metoder:

  • toString() — Det ligner url.href men kan ikke bruges til at ændre værdien.
  • toJSON() — Det returnerer den samme streng som href 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}`)
    })
  })