Której z tych dwóch metod należy używać do kodowania adresów URL?

To zależy od tego, co naprawdę chcesz zrobić.

encodeURI zakłada, że ​​wejście jest kompletnym identyfikatorem URI, który może zawierać pewne znaki wymagające kodowania.

encodeURIComponent koduje wszystko o specjalnym znaczeniu, więc używasz go dla składników URI takich jak

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

Jeśli kodujesz ciąg znaków w celu wstawienia do komponentu URL (parametr querystring), powinieneś wywołać encodeURIComponent.

Jeśli kodujesz istniejący adres URL, zadzwoń encodeURI.

xkr.us ma świetną dyskusję z przykładami. Cytując ich podsumowanie:

Metoda escape () nie koduje znaku +, który jest interpretowany jako spacja po stronie serwera, jak również generowany przez formularze ze spacjami w swoich polach. Z powodu tego niedociągnięcia i faktu, że ta funkcja nie obsługuje poprawnie znaków spoza ASCII, należy unikać użycia escape (), gdy tylko jest to możliwe. Najlepszą alternatywą jest zwykle encodeURIComponent ().

Escape () nie koduje: @ * / +

Zastosowanie metody encodeURI () jest nieco bardziej wyspecjalizowane niż escape () w tym sensie, że koduje dla identyfikatorów URI w przeciwieństwie do kwerendy, która jest częścią adresu URL. Tej metody należy użyć, gdy trzeba zakodować ciąg znaków dla dowolnego zasobu korzystającego z identyfikatorów URI i potrzebujących pewnych znaków, aby pozostały niezakodowane. Zauważ, że ta metoda nie koduje znaku „, ponieważ jest to prawidłowy znak w identyfikatorach URI.

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

Na koniec należy zastosować metodę encodeURIComponent () w większości przypadków podczas kodowania pojedynczego składnika identyfikatora URI. Ta metoda koduje niektóre znaki, które normalnie byłyby rozpoznawane jako znaki specjalne dla identyfikatorów URI, aby można było uwzględnić wiele składników. Zauważ, że ta metoda nie koduje znaku „, ponieważ jest to prawidłowy znak w identyfikatorach URI.

encodeURIComponent () nie koduje: ~! * () '

Oto podsumowanie.

1. Escape () nie koduje @ * _ + -. /

   Nie używaj tego.

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

   Użyj go, gdy podany przez Ciebie adres jest kompletnym adresem URL, takim jak „ https://searchexample.com/search?q=wiki ”

3. encodeURIComponent () nie koduje AZ az 0-9 - _. ! ~ * '() Użyj go, gdy dane wejściowe są częścią pełnego adresu URL, np const queryStr = encodeURIComponent(someString)

encodeURIComponent (): zakłada, że ​​jego argumentem jest część (na przykład protokół, nazwa hosta, ścieżka lub ciąg zapytania) identyfikatora URI. Dlatego ucieka od znaków interpunkcyjnych używanych do oddzielania części identyfikatora URI.

encodeURI (): służy do kodowania istniejącego adresu URL

Różnica między encodeURIi encodeURIComponent:

encodeURIComponent(value)służy głównie do kodowania wartości parametrów queryString i koduje każdy odpowiedni znak w value. encodeURIignoruje przedrostek protokołu ( http://) i nazwę domeny.

W bardzo, bardzo rzadkich przypadkach, gdy chcesz zaimplementować ręczne kodowanie w celu zakodowania dodatkowych znaków (chociaż nie muszą być one kodowane w typowych przypadkach), takich jak ! *:, możesz użyć:

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

( źródło )

Inne odpowiedzi opisują cele. Oto znaki, które każda funkcja faktycznie skonwertuje :

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

Wszystkie powyższe znaki są konwertowane na kody szesnastkowe procentowe. Spacja do %20, procent do %25itp. Znaki poniżej przechodzą przez niezmienione.

Oto znaki, których funkcje NIE konwertują :

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

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

Jako ogólną zasadę należy stosować encodeURIComponent. Nie bój się długiej nazwy, myśląc, że jest bardziej specyficzna w użyciu, dla mnie jest to najczęściej stosowana metoda. Nie daj się też wciągnąć w używanie encodeURI, ponieważ przetestowałeś go i wydaje się, że koduje poprawnie, prawdopodobnie nie jest to to, co chciałeś użyć, i mimo że Twój prosty test z użyciem „Fred” w polu imienia zadziałał, znajdziesz później, gdy użyjesz bardziej zaawansowanego tekstu, takiego jak dodanie znaku handlowego lub hashtagu, nie powiedzie się. Możesz spojrzeć na inne odpowiedzi z powodów, dla których tak jest.