Memahami Cara Ruang Dikodkan: %dengan encodeURI lwn. dengan URL

Anda boleh mengekod rentetan pertanyaan sama ada menggunakan sama ada encodeURI atau URL. Baru-baru ini, saya perasan bahawa URL mengodkan ruang secara berbeza. Saya akan membincangkan mengapa mereka mengendalikan pengekodan dengan cara yang berbeza. Sebelum menyelami topik, saya akan menunjukkan kepada anda cara mengekod menggunakan setiap kaedah.

Penggunaan

1. encodeURI

// 'https://www.google.com/search?q=programming%20language'
encodeURI('https://www.google.com/search?q=programming language')

Anda boleh mengekod URI menggunakan fungsi encodeURI. Walau bagaimanapun,. ia tidak mengekod sebahagian daripada aksara yang merupakan bahagian URI yang sah, jadi anda mungkin perlu menggunakan fungsi encodeURIComponent untuk mengekod rentetan pertanyaan atau komponen lain dalam URI dengan betul.

Sebagai contoh, katakan anda mempunyai rentetan pertanyaan q dengan nilai
https://www.google.com/search?q=apa maksud &?.

// 'https://www.google.com/search?q=what%20is%20the%20meaning%20of%20&?'
encodeURI('https://www.google.com/search?q=what is the meaning of &?')

&(ampersand) tidak ditukar kepada & sebagaimana yang sepatutnya. Kerana &(ampersand) boleh menjadi bahagian URI yang sah. Atas sebab ini, adalah lebih selamat untuk menggunakan encodeURIComponent untuk rentetan pertanyaan.

const url = encodeURI('https://google.com/search');
const queryString = `?q=${encodeURIComponent('what is the meaning of &?')}`;
// 'https://google.com/search?q=what%20is%20the%20meaning%20of%20%26%3F';
url+queryString;

Memandangkan encodeURIX dan fungsi yang berkaitan menganggap URI sebagai rentetan, anda mesti mengendalikan aksara khas seperti ? dan & diri sendiri. Sebagai alternatif, anda boleh memudahkan proses menggunakan URL.

2. URL

Apabila menggunakan URL untuk mengekod, anda perlu mengendalikan URL asas dan rentetan pertanyaan secara berasingan.

const url = 'https://www.google.com/search?q=programming language';
// 'https://www.google.com/search?q=programming language'
url.toString();

Jika anda mengekod semua sekali gus menggunakan pembina URL, seperti yang ditunjukkan dalam contoh di atas, sring pertanyaan mungkin tidak dikodkan dengan betul.

const url = new URL('https://www.google.com/search');
url.searchParams.set('q', 'programming language');
// 'https://www.google.com/search?q=programming+language'
url.toString();

Dengan menetapkan rentetan pertanyaan melalui sifat searchParams objek URL, anda boleh menetapkan rentetan pertanyaan.

Dalam kes ini, ruang ditukar kepada . Sebelum menerangkan sebab ini berlaku, mari kita uji dengan rentetan pertanyaan lain untuk melihat cara ia mengendalikan aksara khas lain.

const url = new URL('https://www.google.com/search');
url.searchParams.set('q', 'what is the meaning of &?');
// 'https://www.google.com/search?q=what+is+the+meaning+of+%26%3F'
url.toString();

Watak istimewa lain dikodkan seperti yang dijangkakan.

Sekarang, mari kita selidiki sebab perbezaan ini berlaku.

Pengekodan

1. encodeURI

Fungsi encodeURIX mengekod mengikut RFC2396. URI bukan hanya lokasi di internet; ia boleh merujuk kepada sebarang jenis sumber. Inilah sebabnya mengapa ia dipanggil URI (Pengecam Sumber Seragam) dan bukannya URL (Pencari Sumber Seragam).

2. URL

API URL mengekod mengikut RFC3986, iaitu spesifikasi URI yang lebih terkini.

Jika anda perlu mencapai tingkah laku ini dengan encodeURI, rujuk ini. - encodeURI Pengekodan komponen untuk RF3986).

URLSearchParams mengekod mengikut peraturan pengekodan peratus. Menurut dokumentasi, ia menggantikan ruang dengan ' '.

Walaupun saya tidak dapat mencari spesifikasi dalam RFC untuk tingkah laku ini, dokumentasi encodeURIComponent MDN menyatakan:

Untuk application/x-www-form-urlencoded, ruang hendaklah digantikan dengan , jadi seseorang mungkin ingin mengikuti penggantian encodeURIComponent() dengan penggantian tambahan dengan .

Ini menerangkan sebab ruang digantikan dengan ' ' dalam URLSearchParams, kerana ia mengikut piawaian aplikasi/x-www-form-urlencoded.

Anda mungkin perasan bahawa URL dan URLSearchParams mengikuti RFC yang berbeza.

Mari kita lihat beberapa contoh.

// 'https://www.google.com/search?q=programming%20language'
encodeURI('https://www.google.com/search?q=programming language')

Seperti yang ditunjukkan, URL tidak mengekod kurungan dan bertindih, kerana ia adalah sebahagian daripada alamat IPv6. Walau bagaimanapun, kolon tidak dikodkan sebagai : walaupun ia adalah sebahagian daripada rentetan pertanyaan. Ia berbeza daripada jadual pengekodan peratus.

Ini bermakna anda perlu mengekod URL dan rentetan pertanyaan secara berasingan.

// 'https://www.google.com/search?q=what%20is%20the%20meaning%20of%20&?'
encodeURI('https://www.google.com/search?q=what is the meaning of &?')

Kini, URL dan rentetan pertanyaan dikodkan dengan betul.

Kesimpulan

fungsi encodeURI, encodeURIComponent, URL dan URLSearchParams masing-masing mempunyai tujuan yang berbeza dan anda harus menggunakannya berdasarkan keperluan khusus anda.

encodeURI: Mengekodkan URI mengikut RFC2396. Ia tidak mengekod aksara yang merupakan bahagian URI yang sah. Jika anda perlu mengekod URI mengikut RFC3986, rujuk dokumentasi MDN ini.

encodeURIComponent: Mengekod komponen URI mengikut RFC2396, seperti laluan, serpihan atau rentetan pertanyaan. Ia termasuk aksara yang tidak dikodkan oleh encodeURI.

URL: Mengekodkan URL Web mengikut RFC3986.

URLSearchParams: Kod parameter mengikut piawaian aplikasi/x-www-form-urlencoded.

Jika anda perlu menggantikan tanda (tambah) dengan , anda boleh melakukannya secara manual, seperti yang ditunjukkan di bawah:

const url = encodeURI('https://google.com/search');
const queryString = `?q=${encodeURIComponent('what is the meaning of &?')}`;
// 'https://google.com/search?q=what%20is%20the%20meaning%20of%20%26%3F';
url+queryString;

Apabila bekerja dengan pembangunan web, API Tenang atau URL web, URL ialah pilihan yang boleh dipercayai. Selain itu, ia mengikuti RFC3986, yang lebih baharu daripadaRFC2396.

Saya harap anda mendapati ini membantu.

Selamat Pengekodan!

Atas ialah kandungan terperinci Memahami Cara Ruang Dikodkan: %dengan encodeURI lwn. dengan URL. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!