Alat pengembang · URL encoder & decoder
encodeURI vs encodeURIComponent: karakter mana yang dibiarkan sendiri
· Cara kerjanya
pengkodean url javascript alur kerja pengembang
Kedua fungsi JavaScript berbeda tepat sebelas karakter, dan memilih salah satu yang salah akan merusak URL atau gagal keluar dari nilai. Posting ini menjelaskan himpunan dan memberikan aturan yang dapat Anda ingat.
Pencarian yang mengembalikan semuanya karena & di 'R&D' membagi kueri — bug nyata dari fungsi yang salah
Pencarian untuk R&D dapat secara tidak sengaja mengembalikan hasil untuk R jika kode dibuat ?q=R&D dengan tangan. Tanda ampersand adalah pemisah antara parameter kueri; itu tidak dipertahankan sebagai bagian dari q kecuali Anda menyandikan nilainya. Memilih encodeURI untuk bagian kecil itu adalah kesalahannya, bukan bug server. Opsi teraman dalam kode aplikasi sering kali adalah URLSearchParams, tetapi memahami dua primitif JavaScript membuat kode yang ada lebih mudah untuk di-debug.
Apa yang dimiliki kedua fungsi tersebut — set tanpa cadangan yang tidak pernah mereka sentuh dan UTF-8 persen pengkodean yang keduanya terapkan
Kedua metode meninggalkan ASCII huruf, angka, dan tanda baca tanpa syarat - _ . ! ~ * ' ( ) tidak tersentuh berdasarkan aturan pengkodean JavaScript. Mereka mengonversi karakter non-ASCII menjadi UTF-8 byte sebelum menulis persen kembar tiga: é menjadi %C3%A9, bukan satu Latin-1 byte. Mereka juga mengkodekan spasi sebagai %20. Pengkodean persen adalah tentang melestarikan struktur URI; itu bukan HTML pelolosan, validasi input, atau perlindungan terhadap skrip berbahaya di halaman penerima.
Kesebelas karakter yang hanya dikodekanURI dipertahankan — ; , / ? : @ & = + $ # dan mengapa masing-masing memiliki makna struktural dalam URL
encodeURI juga mempertahankan sebelas karakter struktural yang mengkodekan ENcodeURIComponent: ; , / ? : @ & = + $#. Untuk alamat lengkap, membiarkan garis miring dan tanda tanya saja akan mempertahankan jalur dan sintaks kuerinya. Untuk nilai kueri, membiarkan & atau = melewatinya akan mengubah daftar parameter, sementara # yang tidak lolos dapat memulai sebuah fragmen. Fungsinya berbeda justru karena yang satu ditujukan untuk seluruh alamat dan yang lainnya untuk komponen di dalam alamat tersebut.
Aturan yang berlaku: nilai mendapatkan komponen encodeURI, URL lengkap mendapatkan encodeURI — dan mengapa 'lengkap URL' lebih jarang daripada kedengarannya
Nilai hampir selalu mendapatkan encodeURIComponent; alamat yang lengkap dan sudah terstruktur adalah kasus yang kurang umum untuk encodeURI. Untuk URL yang Anda buat secara terprogram, gunakan URL API untuk menangani parameter jalur dan pencarian alih-alih menggabungkan campuran potongan yang dikodekan dan mentah. Jangan menyandikan seluruh URL dengan encodeURIComponent lalu mengharapkan garis miring dan titik dua tetap berfungsi sebagai pemisah. Sebaliknya, jangan masukkan istilah kueri pengguna melalui encodeURI dan biarkan ampersandnya aktif.
Contoh praktis: string yang sama melalui kedua fungsi - tabel keluaran untuk nilai dengan spasi, &, / dan aksen
Ambil R&D / kafe sebagai satu nilai kueri. encodeURIComponent mengembalikan R%26D%20%2F%20caf%C3%A9, melindungi ampersand dan garis miring. encodeURI mengembalikan R&D%20/%20caf%C3%A9, dengan mempertahankan tanda baca struktural; awalan ?q= yang naif sekarang akan membuat pembatas yang tidak diinginkan. Keduanya mengkodekan spasi dan aksen, sehingga pengujian yang hanya menggunakan “halo dunia” akan kehilangan perbedaan penting. Bandingkan string yang dihasilkan di ToolAcre, lalu tempelkan ke parser URL dan periksa berapa banyak parameter kueri yang muncul.
Kesalahan umum — menyandikan URL lengkap dengan encodeURIComponent, dan mendekode dengan pasangan yang salah
Mengkodekan URL lengkap sebagai satu komponen menghasilkan %3A%2F%2F yang diharapkan konsumen ://. Mendekode seluruh alamat sebelum memvalidasinya dapat memperkenalkan kembali pemisah yang dipesan dengan arti baru. Hindari juga pengkodean ganda pada nilai yang sudah mengandung %26: tanda persen itu sendiri dapat menjadi %25, sehingga lapisan dekode kedua dapat berubah makna lagi. Pasangkan encodeURIComponent dengan decodeURIComponent untuk komponen dan perlakukan persentase pelolosan yang salah sebagai kesalahan input.
Apa yang tidak tercakup di sini — pengkodean formulir dengan +, dan membuat URL dengan URLSearchParams
HTML pengkodean kueri formulir menggunakan tanda tambah untuk spasi di application/x-www-form-urlencoded, yang berbeda dari keluaran %20 dari kedua fungsi ini. URLSearchParams menangani aturan formulir tersebut untuk Anda. Artikel ini tidak membahas normalisasi jalur, konversi nama host Unicode, atau memutuskan apakah URL yang didekode aman untuk diminta; Pengkodean URL adalah langkah representasi, bukan kebijakan otorisasi.
Kesimpulan: mengkodekan bagian-bagiannya, bukan keseluruhannya — bagaimana encoder & decoder URL menampilkan kedua mode sehingga Anda dapat melihat perbedaannya pada input Anda sendiri
Batasan yang mudah diingat adalah bagian versus keseluruhan: nilai parameter adalah bagian, jadi gunakan encodeURIComponent atau URLSearchParams. URL encoder & decoder menampilkan kedua fungsi browser untuk string yang sama dan menjadikan eksperimen tetap lokal. Uji masukan yang berisi &, =, #, garis miring, dan aksen sebelum memutuskan bahwa kedua pembuat enkode dapat dipertukarkan.