これら2つの方法のどちらを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（）メソッドの使用は、URLの一部であるクエリ文字列とは対照的に、URIをエンコードするという点でescape（）よりも少し特殊化されています。このメソッドは、URIを使用するリソースに使用する文字列をエンコードする必要があり、エンコードされないままにする特定の文字が必要な場合に使用します。このメソッドは、 '文字をエンコードしません。これは、URI内では有効な文字であるためです。

encodeURI（）はエンコードしません：〜！@＃$＆*（）=：/、;？+ '

最後に、URIの単一のコンポーネントをエンコードする場合、ほとんどの場合、encodeURIComponent（）メソッドを使用する必要があります。このメソッドは、通常URIの特殊文字として認識される特定の文字をエンコードするため、多くのコンポーネントを含めることができます。このメソッドは、 '文字をエンコードしません。これは、URI内では有効な文字であるためです。

encodeURIComponent（）はエンコードしません：〜！*（） '

ここに要約があります。

1. escape（）は@ * _ +-をエンコードしません。/

   使用しないでください。

2. encodeURI（）はAZ az 0-9をエンコードしません。、/？：@＆= + $-_。！〜* '（）＃

   入力が「https://searchexample.com/search?q=wiki」のような完全なURLである場合に使用します

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

上記のすべての文字は、16進数の16進コードに変換されます。スペースto %20、パーセントto %25など。以下の文字は変更されずに通過します。

関数が変換しない文字は次のとおりです。

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

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

原則としてを使用しますencodeURIComponent。長い名前がその用途でより具体的であると考えて怖がらないでください。私にとっては、より一般的に使用されている方法です。また、encodeURIを試してみて、正しくエンコードされているように見えるので、encodeURIの使用に夢中にならないでください。使用するつもりではない可能性があり、ファーストネームフィールドで「Fred」を使用した簡単なテストが機能したとしても、その後、アンパサンドやハッシュタグを追加するなど、より高度なテキストを使用すると失敗します。これが理由である理由については、他の回答を見ることができます。