decodeURIComponent() ile encodeURIComponent() kullanımı

Bu yazımda sizlere decodeURIComponent() ile encodeURIComponent() kullanımından bahsedeceğim. Diyelim ki server’a bir veri göndereceksiniz ve mecburen string bir değer göndermek zorundasınız. Ya da server size mecburen içinde tırnaklar boşluklar özel karakterler içeren bir veri gönderecek. Gönderecek ama nasıl ? Yahu tırnak gibi özel karakterleri replace et, yok noktayı virgüle çevir, çift tırnaksa başına ters slash koy diye diye ömür geçer gönül geçmez… İşte burada imdada URI Component Fonksiyonu imdada yetişiyor.

<ul>
  <li>Lorem ipsum dolor sit ame"t"asdasd asdf asdf'li asidşflkasidşflk</li>
</ul>

İşte böyle bir html etiketini komple olduğu gibi server’a göndermek için encodeURIComponent fonksiyonunu kullanabiliriz. Böylelikle tüm özel karakterler boşluklar encode edilir ve server’a temiz pammıh gibin bir veri gönderilmiş olunulur. Örneğin:

// Encode edilecek olan veri değişkeni
var content = 
'<ul>'+
  '<li>Lorem ipsum dolor sit ame"t"asdasd asdf asdf'li asidşflkasidşflk</li>'+
'</ul>';
// Encode Edilmiş Veri
var encodedContent = encodeURIComponent(content);
console.log(encodedContent);
// output
%3Cul%3E%0A%3Cli%3ELorem%20ipsum%20dolor%20sit%20ame%22t%22asdasd%20asdf%20asdf'li%20asid%C5%9Fflkasid%C5%9Fflk%3C%2Fli%3E%0A%3C%2Ful%3E

Gördüğünüz gibi JavaScript ile laps diye veriyi tamamen string ifade olacak şekilde çevirdik. Peki ya çevrilmiş string’i nasıl normale döndürürürüz? İşte orada da karşımıza decodeURIComponent çözümü geliyor.

// Gelen Data
var data = '%3Cul%3E%0A%3Cli%3ELorem%20ipsum%20dolor%20sit%20ame%22t%22asdasd%20asdf%20asdf'li%20asid%C5%9Fflkasid%C5%9Fflk%3C%2Fli%3E%0A%3C%2Ful%3E';

// Datayı Decode ederek çözümlüyoruz
var decodedData = decodeURIComponent(data);
console.log(decodedData);

// output
<ul>
  <li>Lorem ipsum dolor sit ame"t"asdasd asdf asdf'li asidşflkasidşflk</li>
</ul>