Manakah dari dua metode ini yang harus digunakan untuk menyandikan URL?

Itu tergantung pada apa yang sebenarnya ingin Anda lakukan.

encodeURI mengasumsikan bahwa input adalah URI lengkap yang mungkin memiliki beberapa karakter yang perlu dikodekan di dalamnya.

encodeURIComponent akan menyandikan semuanya dengan makna khusus, jadi Anda menggunakannya untuk komponen URI seperti

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

Jika Anda menyandikan string untuk dimasukkan ke dalam komponen URL (parameter querystring), Anda harus menelepon encodeURIComponent.

Jika Anda menyandikan URL yang ada, hubungi encodeURI.

xkr.us memiliki diskusi yang hebat, dengan contoh-contoh. Mengutip ringkasan mereka:

Metode escape () tidak menyandikan karakter + yang diartikan sebagai ruang di sisi server serta dihasilkan oleh formulir dengan spasi di bidangnya. Karena kekurangan ini dan fakta bahwa fungsi ini gagal menangani karakter non-ASCII dengan benar, Anda harus menghindari penggunaan escape () bila memungkinkan. Alternatif terbaik biasanya encodeURIComponent ().

escape () tidak akan menyandikan: @ * / +

Penggunaan metode encodeURI () sedikit lebih khusus daripada escape () karena ia mengkodekan untuk URI yang bertentangan dengan querystring, yang merupakan bagian dari URL. Gunakan metode ini ketika Anda harus menyandikan string yang akan digunakan untuk sumber daya apa pun yang menggunakan URI dan membutuhkan karakter tertentu untuk tetap tidak dikodekan. Perhatikan bahwa metode ini tidak menyandikan karakter, karena merupakan karakter yang valid di dalam URI.

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

Terakhir, metode encodeURIComponent () harus digunakan dalam banyak kasus ketika pengkodean komponen tunggal URI. Metode ini akan menyandikan karakter tertentu yang biasanya dikenali sebagai karakter khusus untuk URI sehingga banyak komponen dapat dimasukkan. Perhatikan bahwa metode ini tidak menyandikan karakter, karena merupakan karakter yang valid di dalam URI.

encodeURIComponent () tidak akan menyandikan: ~! * () '

Berikut ini ringkasannya.

1. escape () tidak akan menyandikan @ * _ + -. /

   Jangan gunakan itu.

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

   Gunakan ketika input Anda adalah URL lengkap seperti ' https://searchexample.com/search?q=wiki '

3. encodeURIComponent () tidak akan menyandikan AZ az 0-9 - _. ! ~ * '() Gunakan ketika input Anda adalah bagian dari URL lengkap mis const queryStr = encodeURIComponent(someString)

encodeURIComponent (): mengasumsikan bahwa argumennya adalah sebagian (seperti protokol, nama host, jalur, atau string kueri) dari URI. Karenanya ia lolos dari karakter tanda baca yang digunakan untuk memisahkan bagian-bagian dari URI.

encodeURI (): digunakan untuk menyandikan url yang ada

Perbedaan antara encodeURIdan encodeURIComponent:

encodeURIComponent(value)terutama digunakan untuk menyandikan nilai parameter queryString, dan itu mengkodekan setiap karakter yang berlaku di value. encodeURImengabaikan awalan protokol ( http://) dan nama domain.

Dalam kasus yang sangat, sangat jarang, ketika Anda ingin menerapkan pengkodean manual untuk menyandikan karakter tambahan (meskipun mereka tidak perlu dikodekan dalam kasus-kasus tertentu) seperti:, ! *maka Anda dapat menggunakan:

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

( sumber )

Jawaban lain menjelaskan tujuan. Berikut adalah karakter yang akan dikonversi oleh setiap fungsi :

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 + ' "%<>[\\]^`{|}' + '#$&,:;=?' +       "!'()~")

Semua karakter di atas dikonversi ke kode persen-heksadesimal. Spasi ke %20, persen ke %25, dll. Karakter di bawah melewati tidak berubah.

Berikut adalah karakter-karakter yang fungsi-fungsi TIDAK akan dikonversi :

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

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

Sebagai aturan umum digunakan encodeURIComponent. Jangan takut nama panjang berpikir itu lebih spesifik dalam penggunaannya, bagi saya itu metode yang lebih umum digunakan. Juga jangan terseret ke dalam menggunakan encodeURI karena Anda mengujinya dan tampaknya menjadi pengkodean dengan benar, itu mungkin bukan apa yang Anda maksudkan untuk digunakan dan meskipun tes sederhana Anda menggunakan "Fred" dalam bidang nama pertama berhasil, Anda akan menemukan nanti ketika Anda menggunakan teks yang lebih canggih seperti menambahkan ampersand atau tagar itu akan gagal. Anda dapat melihat jawaban lain untuk alasan mengapa ini.