スペースのエンコード方法を理解する: %with encodeURI と with URL

encodeURI または URL を使用してクエリ文字列をエンコードできます。最近、URL のスペースのエンコード方法が異なることに気づきました。なぜ彼らがエンコードを異なる方法で処理するのかについて説明します。本題に入る前に、それぞれの方法を使用してエンコードする方法を説明します。

---

使用法

1.エンコードURI

// 'https://www.google.com/search?q=programming%20language'
encodeURI('https://www.google.com/search?q=programming language')

encodeURI 関数を使用して URI をエンコードできます。しかし、。 URI の有効な部分である文字の一部はエンコードされないため、クエリ文字列や URI 内の他のコンポーネントを適切にエンコードするには、encodeURIComponent 関数を使用する必要がある場合があります。

たとえば、値が
のクエリ文字列 q があるとします。 https://www.google.com/search?q=& の意味は何ですか?

// 'https://www.google.com/search?q=what%20is%20the%20meaning%20of%20&?'
encodeURI('https://www.google.com/search?q=what is the meaning of &?')

&(アンパサンド) は、当然のとおり & に変換されません。 &(アンパサンド) は URI の有効な部分になる可能性があるためです。このため、クエリ文字列には encodeURIComponent を使用する方が常に安全です。

const url = encodeURI('https://google.com/search');
const queryString = `?q=${encodeURIComponent('what is the meaning of &?')}`;
// 'https://google.com/search?q=what%20is%20the%20meaning%20of%20%26%3F';
url+queryString;

encodeURIX と関連関数は URI を文字列として扱うため、? のような特殊文字を処理する必要があります。そして、そしてあなた自身。あるいは、URL を使用してプロセスを簡素化することもできます。

---

2. URL

URL を使用してエンコードする場合は、ベース URL とクエリ文字列を個別に処理する必要があります。

const url = 'https://www.google.com/search?q=programming language';
// 'https://www.google.com/search?q=programming language'
url.toString();

上記の例に示すように、URL コンストラクターを使用してすべてを一度にエンコードすると、クエリ文字列が正しくエンコードされない可能性があります。

const url = new URL('https://www.google.com/search');
url.searchParams.set('q', 'programming language');
// 'https://www.google.com/search?q=programming+language'
url.toString();

URL オブジェクトの searchParams プロパティでクエリ文字列を設定することで、クエリ文字列を設定できます。

この場合、スペースは に変換されます。この問題が発生する理由を説明する前に、別のクエリ文字列を使用してテストして、他の特殊文字がどのように処理されるかを確認してみましょう。

const url = new URL('https://www.google.com/search');
url.searchParams.set('q', 'what is the meaning of &?');
// 'https://www.google.com/search?q=what+is+the+meaning+of+%26%3F'
url.toString();

他の特殊文字は期待どおりにエンコードされます。

それでは、なぜこのような違いが生じるのかを詳しく見ていきましょう。

---

エンコーディング

1.エンコードURI

encodeURIX 関数は、RFC2396 に従ってエンコードします。 URI は単なるインターネット上の場所ではありません。あらゆるタイプのリソースを参照できます。これが、URL(Uniform Resource Locator) ではなく URI(Uniform Resource Identifier) と呼ばれる理由です。

---

2. URL

URL API は、より新しい URI 仕様である RFC3986 に従ってエンコードされます。

encodeURI を使用してこの動作を実現する必要がある場合は、これを参照してください。 - encodeURIComponent の RF3986 エンコード)。

URLSearchParams はパーセント エンコードの規則に従ってエンコードされます。ドキュメントによると、スペースは「 」に置き換えられます。

この動作に関する RFC の仕様は見つかりませんでしたが、MDN の encodeURIComponent ドキュメントには次のように記載されています。

application/x-www-form-urlencoded の場合、スペースは に置き換えられるため、encodeURIComponent() の置き換えに続いて、 を に追加置き換えることもできます。

これは、application/x-www-form-urlencoded 標準に従っているため、URLSearchParams でスペースが「 」に置き換えられる理由を説明しています。

URL と URLSearchParams は異なる RFC に従っていることに気づいたかもしれません。

いくつかの例を見てみましょう。

// 'https://www.google.com/search?q=programming%20language'
encodeURI('https://www.google.com/search?q=programming language')

示されているように、括弧とコロンは IPv6 アドレスの一部であるため、URL はそれらをエンコードしません。ただし、コロンはクエリ文字列の一部であっても : としてエンコードされません。パーセントエンコーディングテーブルとは異なります。

これは、URL とクエリ文字列を別々にエンコードする必要があることを意味します。

// 'https://www.google.com/search?q=what%20is%20the%20meaning%20of%20&?'
encodeURI('https://www.google.com/search?q=what is the meaning of &?')

これで、URL とクエリ文字列が適切にエンコードされました。

---

結論

encodeURI、encodeURIComponent、URL、および URLSearchParams 関数はそれぞれ異なる目的を果たすため、特定のニーズに基づいて使用する必要があります。

encodeURI: RFC2396 に従って URI をエンコードします。 URI の有効な部分である文字はエンコードされません。 RFC3986 に従って URI をエンコードする必要がある場合は、この MDN ドキュメントを参照してください。

encodeURIComponent: RFC2396 に従って、パス、フラグメント、クエリ文字列などの URI のコンポーネントをエンコードします。 encodeURI でエンコードされていない文字が含まれています。

URL: RFC3986 に従って Web URL をエンコードします。

URLSearchParams: application/x-www-form-urlencoded 標準に従ってパラメータをエンコードします。

(プラス) 記号を に置き換える必要がある場合は、以下に示すように手動で行うことができます。

const url = encodeURI('https://google.com/search');
const queryString = `?q=${encodeURIComponent('what is the meaning of &?')}`;
// 'https://google.com/search?q=what%20is%20the%20meaning%20of%20%26%3F';
url+queryString;

Web 開発、Restful API、または Web URL を使用する場合、URL は信頼できる選択肢です。さらに、RFC2396 よりも新しい RFC3986 に従います。

---

お役に立てば幸いです。

コーディングを楽しんでください!

以上がスペースのエンコード方法を理解する: %with encodeURI と with URLの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。