Какой из этих двух методов следует использовать для кодирования URL?

Это зависит от того, что вы действительно хотите сделать.

encodeURI предполагает, что ввод является полным URI, который может содержать некоторые символы, для которых требуется кодировка.

encodeURIComponent закодирует все со специальным значением, поэтому вы используете его для компонентов URI, таких как

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

Если вы кодируете строку для добавления в компонент URL (параметр строки запроса), вам следует вызвать encodeURIComponent.

Если вы кодируете существующий URL, позвоните encodeURI.

У xkr.us отличная дискуссия с примерами. Чтобы процитировать их резюме:

Метод escape () не кодирует символ +, который интерпретируется как пробел на стороне сервера, а также генерируется формами с пробелами в их полях. Из-за этого недостатка и того факта, что эта функция не может правильно обрабатывать символы, не входящие в ASCII, вы должны по возможности избегать использования escape (). Лучшей альтернативой обычно является encodeURIComponent ().

escape () не будет кодировать: @ * / +

Использование метода encodeURI () немного более специализировано, чем escape (), поскольку он кодирует URI, а не строку запроса, являющуюся частью URL. Используйте этот метод, когда вам нужно закодировать строку, которая будет использоваться для любого ресурса, который использует URI и которому необходимо, чтобы определенные символы оставались незашифрованными. Обратите внимание, что этот метод не кодирует символ ', поскольку он является допустимым символом в URI.

encodeURI () не будет кодировать: ~! @ # $ & * () =: /,;? + '

Наконец, метод encodeURIComponent () должен использоваться в большинстве случаев при кодировании одного компонента URI. Этот метод будет кодировать определенные символы, которые обычно распознаются как специальные символы для URI, так что многие компоненты могут быть включены. Обратите внимание, что этот метод не кодирует символ ', поскольку он является допустимым символом в URI.

encodeURIComponent () не будет кодировать: ~! * () '

Вот краткое изложение.

1. escape () не будет кодировать @ * _ + -. /

   Не используйте это.

2. encodeURI () не будет кодировать AZ az 0-9; /? : @ & = + $ - _. ! ~ * '() #

   Используйте его, когда вы вводите полный URL-адрес, например « https://searchexample.com/search?q=wiki »

3. encodeURIComponent () не будет кодировать AZ az 0-9 - _. ! ~ * '() Используйте его, когда ваш ввод является частью полного URL, например const queryStr = encodeURIComponent(someString)

encodeURIComponent (): предполагает, что его аргумент является частью (такой как протокол, имя хоста, путь или строка запроса) URI. Поэтому он избегает знаков препинания, которые используются для разделения частей URI.

encodeURI (): используется для кодирования существующего URL

Разница между encodeURIи encodeURIComponent:

encodeURIComponent(value)в основном используется для кодирования значений параметров queryString и кодирует каждый применимый символ в value. encodeURIигнорирует префикс протокола ( http://) и имя домена.

В очень, очень редких случаях, когда вы хотите реализовать ручное кодирование для кодирования дополнительных символов (хотя их не требуется кодировать в типичных случаях), таких как:, ! *тогда вы можете использовать:

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

( источник )

Другие ответы описывают цели. Вот символы, которые каждая функция на самом деле преобразует :

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

Все вышеперечисленные символы преобразуются в шестнадцатеричные коды процента. Пробел до %20, процент до %25и т. Д. Символы ниже проходят без изменений.

Вот символы, которые функции НЕ будут преобразовывать :

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

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

Как правило, используйте encodeURIComponent. Не бойтесь длинного имени, думая, что оно более конкретно в его использовании, для меня это наиболее часто используемый метод. Также не впадайте в использование encodeURI, потому что вы проверили его, и он, кажется, правильно кодирует, вероятно, это не то, что вы хотели использовать, и хотя ваш простой тест с использованием «Fred» в поле первого имени сработал, вы обнаружите, что позже, когда вы будете использовать более сложный текст, такой как добавление амперсанда или хэштега, произойдет сбой. Вы можете посмотреть на другие ответы по причинам, почему это так.