Objek URL

Gambaran keseluruhan

Objek URL dalam JavaScript menyediakan cara untuk bekerja dengan dan memanipulasi URL dengan mudah. Ia amat berguna apabila anda perlu membina, menghuraikan atau mengubah suai URL dalam kod anda.

Banyak kali rentetan templat digunakan untuk membuat URL dalam JavaScript. Selalunya ini cukup mudah dan jelas, tetapi objek URL ialah kaedah OOP yang lebih mantap untuk menangani URL.

Malah OpenWeatherMap.org menggunakan rentetan templat dalam dokumentasinya: https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={Kunci API }

Untuk URL yang agak statik ini tidak mengapa, namun jika anda ingin membuat perubahan pada URL ini anda mungkin ingin mempertimbangkan untuk menggunakan objek URL.

// Using template strings
const lat = 32.087;
const lon = 34.801;
const apiKey = 'your_api_key';
const url = `https://api.openweathermap.org/data/3.0/onecall?lat=${lat}&lon=${lon}&appid=${apiKey}`;

// Using the URL object
const openWeatherUrl = new URL('https://api.openweathermap.org/data/3.0/onecall');
openWeatherUrl.searchParams.set('lat', lat);
openWeatherUrl.searchParams.set('lon', lon);
openWeatherUrl.searchParams.set('appid', apiKey);

Penggunaan Asas

Anda boleh mencipta objek URL baharu dengan menghantar rentetan URL kepada pembinanya.

Dalam kes ini (berbanding dengan di atas) keseluruhan URL dihantar dengan pelbagai bahagian:

const url = new URL('https://example.com:8080/path?query=123#section');

Hartanah

Objek URL mempunyai beberapa sifat yang boleh anda gunakan untuk mengakses bahagian URL:

• href: URL penuh sebagai rentetan.
• protokol: Protokol (cth., https:).
• nama hos: Nama domain (cth., example.com).
• port: Nombor port (mis., 8080).
• nama laluan: Laluan yang mengikuti domain (cth., /path).
• carian: Rentetan pertanyaan, termasuk ? (cth., ?query=123).
• cincang: Pengecam serpihan, termasuk # (cth., #bahagian).
• hos: Nama hos dan port digabungkan (cth., example.com:8080).
• asal: Asal URL, iaitu protokol, nama hos dan port.

> const url = new URL('https://example.com:8080/path?query=123#section');
> url.port
'8080'
> url.protocol
'https:'
> url.hostname
'example.com'
> url.pathname
'/path'
> url.search
'?query=123'
> url.hash
'#section'
> url.host
'example.com:8080'

Ini juga boleh digunakan untuk menukar bahagian URL yang berlainan?:

> url.port = 1234
1234
> url.pathname = "differentpath"
'differentpath'
> url.hostname = "example.org"
'example.org'
> url
URL {
  href: 'https://example.org:1234/differentpath?query=123#section',
  origin: 'https://example.org:1234',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'example.org:1234',
  hostname: 'example.org',
  port: '1234',
  pathname: '/differentpath',
  search: '?query=123',
  searchParams: URLSearchParams { 'query' => '123' },
  hash: '#section'
}

Kaedah

Objek URL juga mempunyai beberapa kaedah untuk membantu mengubah suai dan berinteraksi dengan URL.

Sebagai contoh parameter carian URL ialah pasangan kunci dan nilai yang memaklumkan butiran pelayan API untuk memberi perkhidmatan kepada pengguna.

url.searchParams: Mengembalikan objek URLSearchParams, yang menyediakan kaedah untuk berfungsi dengan parameter rentetan pertanyaan. Anda boleh:

Dapatkan parameter pertanyaan: url.searchParams.get('query')
Tetapkan parameter pertanyaan: url.searchParams.set('query', '456')
Padamkan parameter pertanyaan: url.searchParams.delete('query')

Lelaran pada parameter pertanyaan:

url.searchParams.forEach((value, key) => {
  console.log(key, value);
});

toString(): Mengembalikan URL penuh sebagai rentetan, mencerminkan sebarang perubahan yang dibuat pada sifat atau parameter pertanyaan.

Contoh dengan API Peta Cuaca Terbuka

Berikut ialah dokumen untuk OpenWeatherMap: https://openweathermap.org/api/one-call-3

Berikut ialah contoh mudah yang menunjukkan cara membuat objek URL dan memanipulasi bahagiannya:

// get values to interpolate to URL
const apiKey = process.env.openWeatherApiKey || 0
const [lat, lon] = [32.08721095615897, 34.801588162316506]

const openWeatherUrl = new URL("https://api.openweathermap.org")

openWeatherUrl.pathname = "data/3.0/onecall"
openWeatherUrl.searchParams.set('lat',lat)
openWeatherUrl.searchParams.set('lon',lon)

// from the docs
openWeatherUrl.searchParams.set('exclude', 'hourly')

openWeatherUrl.searchParams.set('appid', apiKey)

console.log(openWeatherUrl)

output:

URL {
  href: 'https://api.openweathermap.org/data/3.0/onecall?lat=32.08721095615897&lon=34.801588162316506&exclude=hourly&appid=0',
  origin: 'https://api.openweathermap.org',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'api.openweathermap.org',
  hostname: 'api.openweathermap.org',
  port: '',
  pathname: '/data/3.0/onecall',
  search: '?lat=32.08721095615897&lon=34.801588162316506&exclude=hourly&appid=0',
  searchParams: URLSearchParams {
    'lat' => '32.08721095615897',
    'lon' => '34.801588162316506',
    'exclude' => 'hourly',
    'appid' => '0' },
  hash: ''
}

Ringkasan

Objek URL dalam JavaScript menyediakan cara berstruktur untuk bekerja dengan URL, membolehkan manipulasi mudah dan pembinaan URL kompleks. Walaupun rentetan templat mudah dan berkesan untuk URL statik, objek URL sesuai untuk kes URL dinamik atau memerlukan pengubahsuaian yang kerap.

---

Foto oleh Anne Nygård di Unsplash

Atas ialah kandungan terperinci Objek URL. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!