Encode URI di JavaScript: Pastikan URL Kamu Aman
Pernah nggak sih kamu ngerasa ada yang aneh waktu ngeklik link, tapi URL-nya jadi berubah aneh? Nah, itu karena ada karakter khusus dalam URL yang nggak bisa langsung dipakai. Untungnya, di JavaScript kita punya Encode URI buat menangani masalah ini!
Kalau kamu pengembang web atau sering ngoprek URL di JavaScript, kamu wajib ngerti cara encode URI biar data tetap aman dan bisa diakses dengan benar. Yuk, kita bahas bareng-bareng!
Apa Itu URI dan Kenapa Harus Di-Encode?
Mengenal URI
Sebelum ngomongin encoding, kita pahami dulu apa itu URI (Uniform Resource Identifier). URI adalah alamat unik yang mengidentifikasi sumber daya di internet. Contohnya:
https://www.contoh.com/search?q=javascript tips
Nah, masalahnya di sini adalah spasi di dalam URL. Spasi adalah karakter yang nggak boleh ada di dalam URL. Browser bakal bingung dan bisa ngebuat error.
Di sinilah encode URI berperan! Dengan encode, karakter yang nggak aman bakal diubah ke format yang aman buat URL.
Fungsi encodeURI()
dan encodeURIComponent()
JavaScript punya dua fungsi buat encoding URI:
encodeURI()
→ Buat encode seluruh URI tanpa mengubah karakter yang umum digunakan dalam URL seperti:/?&=
encodeURIComponent()
→ Buat encode bagian dari URI, termasuk karakter seperti:/?&=
Cara Pakai encodeURI()
Kalau kamu punya URL dengan spasi atau karakter khusus dan pengen tetap valid, cukup pakai encodeURI()
.
Contoh:
let url = "https://www.contoh.com/search?q=javascript tips";
let encodedURL = encodeURI(url);
console.log(encodedURL);
// Output: "https://www.contoh.com/search?q=javascript%20tips"
Lihat bagian javascript tips
? Spasi diubah jadi %20
yang aman buat URL.
✅ Kapan pakai encodeURI()
?
- Saat kamu ingin encode seluruh URL.
- Kalau URL kamu punya karakter spesial seperti
/
,?
,=
,&
, mereka nggak akan diubah.
Cara Pakai encodeURIComponent()
Kalau kamu cuma mau encode bagian dari URL, misalnya parameter query, lebih baik pakai encodeURIComponent()
.
Contoh:
let query = "javascript tips & tricks";
let encodedQuery = encodeURIComponent(query);
console.log(encodedQuery);
// Output: "javascript%20tips%20%26%20tricks"
Di sini:
- Spasi jadi
%20
&
(ampersand) jadi%26
✅ Kapan pakai encodeURIComponent()
?
- Kalau kamu cuma butuh encode bagian dari URL, bukan seluruh URL.
- Berguna buat encode query parameters supaya nggak rusak pas dikirim ke server.
Perbedaan encodeURI()
vs encodeURIComponent()
Meskipun mirip, kedua fungsi ini punya perbedaan penting. Lihat contoh berikut:
let url = "https://www.contoh.com/search?q=javascript & tips";
console.log(encodeURI(url));
// Output: "https://www.contoh.com/search?q=javascript%20&%20tips"
console.log(encodeURIComponent(url));
// Output: "https%3A%2F%2Fwww.contoh.com%2Fsearch%3Fq%3Djavascript%20%26%20tips"
Fungsi | Contoh Input | Output | Kegunaan |
---|---|---|---|
encodeURI() |
"https://www.contoh.com/search?q=javascript & tips" |
"https://www.contoh.com/search?q=javascript%20&%20tips" |
Encode seluruh URL tanpa mengubah / , ? , & , = |
encodeURIComponent() |
"javascript & tips" |
"javascript%20%26%20tips" |
Encode bagian dari URL termasuk / , ? , & , = |
Singkatnya:
encodeURI()
cocok buat seluruh URL.encodeURIComponent()
cocok buat encode parameter query atau bagian dari URL.
Menggunakan decodeURI()
dan decodeURIComponent()
Kalau kamu udah encode URI, gimana cara balikin ke bentuk aslinya? Pakai decodeURI()
dan decodeURIComponent()
.
Contoh:
let encoded = "https://www.contoh.com/search?q=javascript%20tips";
let decoded = decodeURI(encoded);
console.log(decoded);
// Output: "https://www.contoh.com/search?q=javascript tips"
Buat decodeURIComponent()
:
let encodedComponent = "javascript%20tips%20%26%20tricks";
let decodedComponent = decodeURIComponent(encodedComponent);
console.log(decodedComponent);
// Output: "javascript tips & tricks"
Kesimpulan
🚀 Gunakan encodeURI()
kalau ingin encode seluruh URL, tapi tetap mempertahankan karakter penting seperti ?
, &
, dan =
.
🚀 Gunakan encodeURIComponent()
kalau ingin encode bagian dari URL, seperti query parameter, supaya semua karakter spesial diubah.
Pahami perbedaannya biar kamu bisa pakai yang paling cocok buat kebutuhanmu! Jangan sampai URL kamu jadi error cuma gara-gara lupa encode.