Jak používat objekt URL v JavaScriptu

V JavaScriptu URL rozhraní se používá k analýze, konstrukci, normalizaci a kódování adres URL. Poskytuje statické metody a vlastnosti pro čtení a úpravu různých součástí URL.

Vytvořte objekt adresy URL

Můžete vytvořit nový URL objekt buď předáním adresy URL řetězce, nebo poskytnutím relativní cesty a adresy URL základního řetězce jeho konstruktoru:

// 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')

Ve výše uvedeném příkladu jsou obě adresy URL stejné. Můžeme dokonce vytvořit novou adresu URL na základě cesty relativní k existující adrese URL:

const url3 = new URL('/blog', url1)
console.log(url3.toString()) 
// https://atttacomsian.com/blog

Vlastnosti adresy URL

URL objekt je užitečný, pokud chcete z adresy URL řetězce extrahovat různé části, jako je název hostitele, port, relativní cesta a hodnoty parametrů. K těmto vlastnostem máte přístup ihned po URL objekt je vytvořen:

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

Kromě výše uvedených vlastností, URL objekt má také:

  • search — Řetězec parametrů dotazu včetně úvodního ? postava.
  • href — Úplná adresa URL, stejná jako url.toString() metoda.
  • port — Vrátí port adresy URL.
  • searchParams — A URLSearchParams objekt pro přístup k jednotlivým parametrům dotazu nalezeným v search .
  • username &password — Dostupné pouze při použití ověřování HTTP.

Kromě výše uvedených vlastností, URL objekt také poskytuje dvě metody:

  • toString() — Je podobný url.href ale nelze jej použít k úpravě hodnoty.
  • toJSON() — Vrací stejný řetězec jako href vlastnictví.

Aktualizujte objekt adresy URL

URL vlastnosti objektu (kromě origin a searchParams ) lze použít k vytvoření nové adresy URL nebo aktualizaci částí existující adresy 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

Statické metody

URL rozhraní poskytuje createObjectURL() statická metoda pro vygenerování adresy URL objektu blob (začíná blob: jako jeho schéma), které jednoznačně identifikuje objekt v prohlížeči:

const blobUrl = URL.createObjectURL(blob)

Jakmile budete mít adresu URL objektu blob, předejte ji revokeObjectURL() statická metoda k odstranění z paměti:

URL.revokeObjectURL(blobUrl)

Použití objektu URL

V tuto chvíli URL využití objektu je omezené. Jednoduché řetězce jsou dost dobré pro vytváření síťových požadavků. Můžete však použít URL objekt v moderních JavaScript API, jako je Fetch API, nebo dokonce v XMLHttpRequest (XHR) pro komunikaci se serverem.

Zde je příklad rozhraní Fetch API, které používá URL objekt pro získání objektu JSON:

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}`)
    })
  })