URL'leri kodlamak için bu iki yöntemden hangisi kullanılmalıdır?

Aslında ne yapmak istediğinize bağlıdır.

encodeURI, girdinin, içinde kodlanması gereken bazı karakterlere sahip olabilecek eksiksiz bir URI olduğunu varsayar.

encodeURIComponent her şeyi özel bir anlamla kodlar, böylece onu URI'lerin bileşenleri için kullanırsınız.

var world = "A string with symbols & characters that have special meaning?";
var uri = 'http://example.com/foo?hello=' + encodeURIComponent(world);

Bir URL bileşenine (querystring parametresi) koymak için bir dize kodluyorsanız, aramanız gerekir encodeURIComponent.

Mevcut bir URL'yi kodluyorsanız arayın encodeURI.

xkr.us örneklerle harika bir tartışmaya sahiptir. Özetlerini alıntılamak için:

Escape () yöntemi, sunucu tarafında boşluk olarak yorumlanan ve alanlarında boşluk bulunan formlar tarafından oluşturulan + karakterini kodlamaz. Bu eksiklik ve bu fonksiyonun ASCII olmayan karakterleri doğru şekilde işleyememesi nedeniyle, mümkün olduğunca escape () kullanmaktan kaçınmalısınız. En iyi alternatif genellikle encodeURIComponent () yöntemidir.

escape () kodlanmaz: @ * / +

EncodeURI () yönteminin kullanımı, bir URL'nin parçası olan sorgu dizesinin aksine URI'leri kodlaması açısından escape () yönteminden biraz daha uzmanlaşmıştır. URI kullanan ve kodlanmamış olarak belirli karakterlere ihtiyaç duyan herhangi bir kaynak için kullanılacak bir dizeyi kodlamanız gerektiğinde bu yöntemi kullanın. URI'ler içinde geçerli bir karakter olduğundan, bu yöntemin 'karakterini kodlamadığını unutmayın.

encodeURI () kodlamaz: ~! @ # $ & * () =: /,;? + '

Son olarak, çoğu durumda bir URI'nin tek bir bileşenini kodlarken encodeURIComponent () yöntemi kullanılmalıdır. Bu yöntem, normalde URI'ler için özel karakter olarak tanınacak belirli karakterleri kodlayacaktır, böylece birçok bileşen dahil edilebilir. URI'ler içinde geçerli bir karakter olduğundan, bu yöntemin 'karakterini kodlamadığını unutmayın.

encodeURIComponent () kodlamaz: ~! * () '

İşte bir özet.

1. escape () @ * _ + - kodlamasını yapmaz. /

   Bunu kullanma.

2. encodeURI (), AZ az 0-9'u kodlamaz; , /? : @ & = + $ - _. ! ~ * '() #

   Girişiniz ' https://searchexample.com/search?q=wiki ' gibi tam bir URL olduğunda kullanın

3. encodeURIComponent (), AZ az 0-9 - _ kodlamaz. ! ~ * '() Girişiniz tam bir URL'nin parçası olduğunda kullanın, ör. const queryStr = encodeURIComponent(someString)

encodeURIComponent (): bağımsız değişkeninin bir URI'nin bir parçası (protokol, ana bilgisayar adı, yol veya sorgu dizesi gibi) olduğunu varsayar. Bu nedenle, bir URI'nin bölümlerini ayırmak için kullanılan noktalama işaretlerinden kaçar.

encodeURI (): mevcut URL'yi kodlamak için kullanılır

Fark arasında encodeURIve encodeURIComponent:

encodeURIComponent(value)temel olarak queryString parametre değerlerini kodlamak için kullanılır ve içindeki tüm karakterleri kodlar value. encodeURIprotokol önekini ( http://) ve etki alanı adını yoksayar .

Çok, çok nadir durumlarda, ek karakterleri kodlamak için manuel kodlama uygulamak istediğinizde (tipik durumlarda kodlanması gerekmese de) ! *:

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

( kaynak )

Diğer cevaplar amaçları açıklar. Her işlevin gerçekte dönüştüreceği karakterler şunlardır :

control = '\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0A\x0B\x0C\x0D\x0E\x0F'
        + '\x10\x11\x12\x13\x14\X15\x16\x17\x18\x19\x1A\x1B\x1C\x1D\x1E\x1F'
                                                                    + '\x7F'
encodeURI         (control + ' "%<>[\\]^`{|}'                             )
encodeURIComponent(control + ' "%<>[\\]^`{|}' + '#$&,:;=?' + '+/@'        )
escape            (control + ' "%<>[\\]^`{|}' + '#$&,:;=?' +       "!'()~")

Yukarıdaki tüm karakterler yüzde onaltılık kodlara dönüştürülür. Boşluk %20, yüzde %25, vb. Aşağıdaki karakterler değişmeden geçer.

İşlevlerin dönüştürmeyeceği karakterler şunlardır :

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

encodeURI         (pass_thru + '#$&,:;=?' + '+/@' + "!'()~")
encodeURIComponent(pass_thru +                      "!'()~")
escape            (pass_thru +              '+/@'          )

Genel bir kural olarak kullanın encodeURIComponent. Uzun adın kullanımında daha spesifik olduğunu düşünmekten korkmayın, bana göre daha yaygın olarak kullanılan yöntemdir. Ayrıca encodeURI kullanmak için emilmeyin, çünkü onu test ettiniz ve düzgün bir şekilde kodladığı görülüyor, muhtemelen kullanmak istediğiniz şey değil ve ilk ad alanında "Fred" kullanarak basit testiniz işe yarasa da, daha sonra bir "ve" işareti eklemek gibi daha gelişmiş bir metin kullandığınızda başarısız olur. Bunun nedenleri için diğer cevaplara bakabilirsiniz.