Что такое URI и чем он отличается от URL?

URI означает унифицированный идентификатор ресурса.
URL означает унифицированный указатель ресурса.

Все, что однозначно идентифицирует ресурс, является его URI, например идентификатор, имя или номер ISBN. URL указывает ресурс и способ доступа к нему (протокол). Все URL-адреса являются URI, но не все URI являются URL-адресами.

Зачем нам нужна кодировка URL:

Некоторые символы имеют особое значение в строке URL. Например, ? символ обозначает начало строки запроса. Чтобы успешно найти ресурс в Интернете, необходимо различать, когда символ подразумевается как часть строки или как часть структуры URL.

Это означает, что нам нужно кодировать эти символы при передаче их в URL; в противном случае они могут привести к непредсказуемым ситуациям.

Символы закодированы

Разница между encodeURI() и encodeURIComponent() составляет ровно 11 символов.

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

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

Когда кодировать:

JS предлагает некоторые функции, которые мы можем использовать для простого кодирования URL-адресов. Это два удобных варианта:

  • encodeURI(): следует использовать для кодирования URI или полного URL.
encodeURI("http://www.example.org/a file with spaces.html")
//http://www.example.org/a%20file%20with%20spaces.html
  • encodeURIComponent(): следует использовать для кодирования компонента URI, например отдельных значений в строке запроса.
`http://domain.com/?search=\${encodeURIComponent('encode & decode param')}`
// 'http://domain.com/?search=encode%20%26%20decode%20param'

или когда вы хотите закодировать значение параметра URL.

var p1 = encodeURIComponent("http://example.org/?a=12&b=55")

Затем вы можете создать нужный URL:

var url = "http://example.net/?param1=" + p1 + "&param2=99";

И вы получите этот полный URL:

http://example.net/?param1=http%3A%2F%2Fexample.org%2F%Ffa%3D12%26b%3D55¶m2=99

Заключение

Если у вас есть полный URL-адрес, используйте encodeURI. Но если у вас есть часть URL-адреса, используйте encodeURIComponent.