Bekerja dengan URL dalam JavaScript

Ditulis oleh Joe Attardi✏️

URL ialah bahagian penting bagi mana-mana apl web. Jika apl anda membuat permintaan kepada API, adalah penting untuk mencipta URL yang betul untuk permintaan ini. API URL, disokong dalam semua penyemak imbas moden, menyediakan cara untuk menghuraikan dan memanipulasi URL. Ia menyediakan akses mudah ke pelbagai bahagian URL.

Memahami bahagian URL

Pertimbangkan URL berikut:

https://example.com/api/search?query=foo&sort=asc#results

URL ini terdiri daripada komponen berikut:

• Protokol: https
• Hos: example.com
• Nama laluan: /api/search
• Rentetan pertanyaan: ?query=foo&sort=asc
• Hash: #hasil

Dengan JavaScript moden, kami boleh menghuraikan URL dan mengekstrak bahagian berbeza ini mengikut keperluan.

Menghuraikan URL

Dalam penyemak imbas lama, sebelum API URL tersedia, satu cara pembangun menghuraikan URL adalah dengan menggunakan unsur. Elemen ini menyediakan beberapa penghuraian URL asas. Sebagai contoh, berikut ialah cara anda boleh mengekstrak rentetan pertanyaan daripada URL:

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

Walau bagaimanapun, pendekatan ini mempunyai beberapa kelemahan:

• Ia memerlukan persekitaran DOM, yang bermaksud ia tidak akan berfungsi dalam persekitaran seperti Node.js
• Ia juga tidak mempunyai pengendalian ralat — jika URL yang tidak sah dihantar ke atribut href, tiada ralat akan dilemparkan

Anda juga boleh menggunakan ungkapan biasa untuk menghuraikan pelbagai bahagian URL, tetapi ini membosankan dan terdedah kepada ralat.

Menggunakan API URL untuk menghuraikan URL adalah mudah. Hanya hantar URL yang ingin anda huraikan kepada pembina URL. Jika rentetan URL sah, anda akan mendapat kembali objek URL dengan sifat untuk pelbagai bahagian URL:

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

Menghuraikan rentetan pertanyaan

Anda boleh mengakses rentetan pertanyaan URL dalam dua cara:

• Sifat carian, iaitu rentetan yang mengandungi rentetan pertanyaan penuh (termasuk aksara ?)
• Sifat searchParams, yang merupakan objek URLSearchParams

Jika anda berminat dengan nilai parameter tertentu dalam rentetan pertanyaan, anda boleh menggunakan kaedah getnya untuk mendapatkan parameter dengan namanya:

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

Jika terdapat berbilang parameter dengan nama yang sama, anda boleh menggunakan getAll untuk mendapatkan tatasusunan yang mengandungi semua nilai untuk nama itu:

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

Membina rentetan pertanyaan

Membina rentetan pertanyaan menggunakan tangan boleh menjadi rumit, terutamanya jika mana-mana parameter pertanyaan mengandungi aksara khas yang perlu dilepaskan. Contohnya, jika parameter pertanyaan perlu mengandungi aksara &, anda perlu mengekodnya sebagai &. Untuk menampung situasi ini, anda perlu menggunakan fungsi encodeURIComponent:

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

Anda boleh membina rentetan pertanyaan dengan lebih selamat dengan menggunakan objek URLSearchParams:

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

Kelebihan menggunakan URLSearchParams termasuk:

• Anda tidak perlu risau tentang & aksara yang memisahkan parameter
• Anda tidak perlu mengekod URI nilai parameter
• Anda tidak perlu menggunakan penggabungan rentetan

Mengulangi parameter pertanyaan

Tanpa objek URLSearchParams, agak sukar untuk mengulangi parameter dalam rentetan pertanyaan. Anda perlu membahagi rentetan beberapa kali — mula-mula kepada kumpulan pasangan kunci/nilai, kemudian sekali lagi untuk memisahkan kunci dan nilai:

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

Jika parameter boleh mengandungi aksara yang dikodkan, anda juga perlu menyahkodnya:

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

Sebaliknya, anda boleh menggunakan kaedah entri URLSearchParams untuk mengulangi pasangan kunci/nilai:

let queryString = 'foo=bar';
queryString += '&baz=qux';
queryString += '&tag=' + encodeURIComponent('one&two');
console.log(queryString); // foo=bar&baz=qux&tag=one%26two

Membina URL penuh

Berikut ialah contoh penuh membina URL dengan URL asas dan beberapa parameter pertanyaan:

const params = new URLSearchParams();
params.append('foo', 'bar');
params.append('baz', 'qux');
params.append('tag', 'one&two');
console.log(params.toString()); // foo=bar&baz=qux&tag=one%26two

Menyemak URL yang sah

Anda mungkin cuba menggunakan ungkapan biasa untuk mengesahkan URL, tetapi amat sukar untuk mencipta ungkapan biasa yang menangkap rentetan URL yang sah sepenuhnya.

Sebaliknya, anda boleh mencapai API URL. Pembina URL akan membuang ralat jika anda memberikan URL yang tidak sah. Anda boleh menggunakan ini untuk menyemak sama ada URL adalah sah:

function listQueryParams(queryString) {
  queryString.split('&').forEach(param => {
    const [key, value] = param.split('=');
    console.log(`${key}: ${value}`);
  });
}

Dengan penyemak imbas yang lebih baharu, ini lebih mudah. Terdapat kaedah statik URL.canParse yang lebih baharu yang melakukan pengesahan serupa dengan satu baris kod. Seperti fungsi isValidURL di atas, ia memerlukan rentetan URL yang berpotensi dan mengembalikan benar atau salah bergantung pada kesahihan rentetan URL.

Mencipta URL relatif

API URL mempunyai mekanisme yang berkuasa untuk menyelesaikan URL relatif. Biasanya, hujah kepada pembina URL akan menimbulkan ralat jika ia bukan URL penuh dan sah. Walau bagaimanapun, anda boleh menentukan hujah kedua yang berfungsi sebagai asas untuk membina URL relatif. Jika anda menggunakan pendekatan dua hujah, hujah pertama tidak semestinya URL yang sah tetapi hujah kedua.

Mari kita lihat kes mudah dahulu:

function listQueryParams(queryString) {
  queryString.split('&').forEach(param => {
    const [key, value] = param.split('=');
    console.log(`${key}: ${decodeURIComponent(value)}`);
  });
}

Pembina URL mengambil URL asas https://example.com dan menambah laluan relatif /about, menghasilkan https://example.com/about.

Bagaimana pula dengan yang ini:

function listQueryParams(queryString) {
  const params = new URLSearchParams(queryString);
  params.entries().forEach(([key, value]) => console.log(`${key}: ${value}`));
}

Anda mungkin menjangkakan ini adalah https://example.com/users/profile, tetapi ia sebenarnya keluar ke https://example.com/profile. Ini berkelakuan seperti pautan relatif; ia mengambil segmen laluan induk, yang merupakan punca example.com, dan kemudian menambah profil.

Mari kita lihat satu lagi contoh menggunakan URL relatif. Anda juga boleh menggunakan .. untuk kembali ke atas hierarki laluan:

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

Yang ini keluar ke https://example.com/profile. Ingat bahawa URL relatif bermula pada segmen laluan induk. Kemudian, yang ini mempunyai .. di dalamnya, yang naik satu lagi segmen laluan.

Jika anda memanggil pembina URL dengan URL relatif dan menentukan URL yang tidak sah atau tidak lengkap untuk URL asas, anda akan mendapat ralat. Anda juga akan mendapat ralat jika anda menggunakan URL relatif tanpa URL asas penuh:

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

Bekerja dengan objek window.location

Anda mungkin biasa dengan objek window.location, yang mewakili URL halaman semasa. Objek ini juga mempunyai sifat seperti href dan nama laluan, jadi anda mungkin fikir ia adalah objek URL. Ini ialah objek yang berbeza, Lokasi, yang mempunyai beberapa sifat yang sama dengan URL, tetapi juga kehilangan beberapa (seperti sifat searchParams).

Walaupun ia bukan objek URL, anda masih boleh menggunakan window.location untuk membina objek URL baharu. Anda boleh menghantar window.location kepada pembina URL untuk membuat URL lengkap baharu dengan searchParams dan semua, berdasarkan URL semasa, atau anda juga boleh menggunakannya sebagai URL asas semasa membina URL relatif:

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

Padanan corak dalam URL menggunakan URLPattern

Menggunakan URL memudahkan untuk mendapatkan laluan daripada URL. Contohnya, dalam URL https://example.com/api/users/123/profile, nama laluan ialah /api/users/123/profile. Bagaimana jika kita mahu mendapatkan hanya ID pengguna, 123, daripada URL ini?

Seperti yang kita bincangkan sebelum ini, mungkin sukar untuk mencipta ungkapan biasa yang betul untuk mengesahkan dan mengekstrak bahagian URL.

Ia belum lagi tersedia dalam semua penyemak imbas, tetapi anda boleh menggunakan URLPattern API untuk memadankan dan mengekstrak bahagian URL, padanan corak yang anda tentukan. Ini amat berguna untuk perkara seperti penghalaan sisi klien dalam aplikasi satu halaman (SPA).

Menggunakan URL profil pengguna sebagai contoh, mari buat URLPattern untuk mendapatkan ID pengguna. Kita boleh menggunakan watak utama : untuk menandakan pemegang tempat bernama, yang boleh digunakan kemudian untuk memadankan bahagian URL tersebut:

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

Apabila anda memanggil exec pada URLPattern, ia memerlukan URL yang sah. Ia mengembalikan objek pemadan yang mengandungi sifat untuk setiap bahagian URL (protokol, hos, nama laluan, dll.). Setiap sifat ini juga mempunyai harta kumpulan, yang memetakan nama pemegang tempat seperti :userId kepada nilainya dalam URL.

Jika anda hanya bimbang tentang memadankan satu bahagian URL, seperti nama laluan seperti yang telah kami lakukan di sini, anda boleh menentukan kad bebas dalam corak URL juga. Atau, bukannya rentetan URL, anda boleh menghantar objek yang mengandungi bahagian URL yang anda berminat untuk dipadankan:

let queryString = 'foo=bar';
queryString += '&baz=qux';
queryString += '&tag=' + encodeURIComponent('one&two');
console.log(queryString); // foo=bar&baz=qux&tag=one%26two

API URLPattern masih tidak tersedia dalam semua penyemak imbas. Pada masa penulisan, ia belum lagi disokong dalam Firefox atau Safari. Anda boleh melihat maklumat sokongan penyemak imbas terkini di CanIUse.com.

Ringkasan

API URL ialah antara muka serba boleh untuk membina, mengesahkan dan memanipulasi URL dalam JavaScript. Ia lebih selamat dan kurang terdedah kepada ralat untuk digunakan daripada penghuraian manual atau ungkapan biasa. Dengan menggunakan objek URLSearchParams, anda boleh membina rentetan pertanyaan tanpa perlu risau tentang penggabungan rentetan atau pengekodan aksara khas.

API URLPattern mengambil langkah ini lebih jauh, menyokong kad bebas dan ruang letak yang dinamakan, supaya anda boleh memotong dan memotong URL untuk memenuhi keperluan apl anda! Bacaan lanjut:

• Antara muka URL (MDN)
• URLPattern API (MDN)

---

Sediakan dengan penjejakan ralat moden LogRocket dalam beberapa minit:

1. Lawati https://logrocket.com/signup/ untuk mendapatkan ID apl.
2. Pasang LogRocket melalui NPM atau tag skrip. LogRocket.init() mesti dipanggil bahagian klien, bukan bahagian pelayan.

NPM:

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

Tag Skrip:

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

3.(Pilihan) Pasang pemalam untuk penyepaduan yang lebih mendalam dengan timbunan anda:

• Perisian tengah Redux
• ngrx middleware
• Pemalam Vuex

Mulakan sekarang

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