JavaScript での URL のエンコードとデコードは、Web 開発、特にクエリ パラメーターを使用して GET リクエストを行う場合に不可欠です。このプロセスにより、URL 内の特殊文字がサーバーによって正しく解釈されるようになります。たとえば、URL 内のスペースは %20 または + に変換されます。このガイドでは、encodeURI()、encodeURIComponent()、escape()、decodeURI()、decodeURIComponent()、unescape() などの JavaScript 関数を使用して効果的な URL エンコードおよびデコードを行う方法について説明します。

例：

• www.google.com を開いて、オタク向けの検索クエリを作成します。
• 検索結果が表示されたら、ブラウザの URL バーを観察します。ブラウザの URL は、スペースの代わりに %20 または + 記号で構成されます。
• URL は次のように表示されます: https://www.google.com/search?q=geeks%20for%20geeks または https://www.google.com/search?q=geeks+for+geeks

注記 : ブラウザはスペースを + または %20 記号に自動的に変換しました。

URL のエンコード: JavaScript でのエンコードは、以下を使用して実現できます。

目次

• 1.JavaScriptのencodeURI関数
• 2. JavaScript encodeURIComponent() 関数
• 3. JavaScriptのescape()関数
• 1. JavaScript decodeURI() 関数
• 2. JavaScript decodeURIComponent() 関数
• 3. JavaScript unescape() 関数
• 4. JavaScript クエリ文字列モジュール

1.JavaScriptのencodeURI関数

の encodeURI() 関数 完全な URI をエンコードするために使用されます。この関数は、(, / ?: @ & = + $ #) 文字を除く特殊文字をエンコードします。

構文：

encodeURI( complete_uri_string );>

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url); console.log(encodedURL)>

https://www.google.com/search?q=geeks%20for%20geeks>

2. JavaScript encodeURIComponent() 関数

の encodeURIComponent() 関数 URI の一部またはコンポーネントをエンコードするために使用されます。この関数は特殊文字をエンコードします。さらに、次の文字もエンコードされます: 、/ ? : @ & = + $ #

構文：

encodeURIComponent( uri_string_component );>

const component = 'geeks for geeks'; const encodedComponent = encodeURIComponent(component); console.log(encodedComponent);>

geeks%20for%20geeks>

3. JavaScriptのescape()関数

JavaScript のエスケープ() 関数 文字列を単一パラメータとして受け取り、ASCII 文字をサポートするコンピュータ ネットワーク経由で送信できる文字列をエンコードします。エンコードは、プレーンテキストを暗号文に変換するプロセスです。

構文：

escape( string )>

注記： escape() 関数は特殊文字のみをエンコードします。この関数は非推奨です。

例外: @ – + . /*_

タプルJava

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url);// encoding using encodeURI console.log(encodedURL) console.log(' ' + escape(url)); //encoding using escape>

https://www.google.com/search?q=geeks%20for%20geeks https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks>

URLのデコード

Javascript でのデコードは次のように実行できます。

1. JavaScript decodeURI() 関数

の decodeURI() 関数 によって生成された URI をデコードするために使用されます。 encodeURI() 。

構文：

decodeURI( complete_encoded_uri_string )>

例 : この例では、 decodeURI() 関数 の JavaScript 。

const url = 'https://www.google.com/search?q=geeks%20for%20geeks'; const decodedURL = decodeURI(url); console.log(decodedURL)>

https://www.google.com/search?q=geeks for geeks>

2. JavaScript decodeURIComponent() 関数

の decodeURIComponent() 関数 encodeURIComponent() によって生成された URI の一部またはコンポーネントをデコードするために使用されます。

構文：

decodeURIComponent( encoded_uri_string_component )>

例 : この例では、 decodeURIComponent() JavaScriptの。

const component = 'geeks%20for%20geeks' const decodedComponent = decodeURIComponent(component); console.log(decodedComponent)>

geeks for geeks>

3. JavaScript unescape() 関数

この関数は文字列を単一パラメータとして受け取り、それを使用して、escape() 関数によってエンコードされた文字列をデコードします。文字列内の 16 進数のシーケンスは、次の方法でデコードされるときに、それらが表す文字に置き換えられます。 unscape() 関数。

構文：

unescape(string)>

注記： この関数は特殊文字のみをデコードします。この関数は非推奨です。

例外: @ – + . /*_

const url = 'https://www.google.com/search?q=geeks for geeks'; const encodedURL = encodeURI(url); console.log(encodedURL) console.log(escape(url)); console.log(decodeURI(encodedURL)); console.log(unescape(encodedURL));>

https://www.google.com/search?q=geeks%20for%20geeks https%3A//www.google.com/search%3Fq%3Dgeeks%20for%20geeks https://www.google.com/search?q=geeks for geeks https://www.google.com/search?q=geeks for ...>

4. JavaScript クエリ文字列モジュール

querystring モジュールは、URL クエリ文字列を解析およびフォーマットするためのユーティリティを提供します。 URL コンポーネントのエンコードおよびデコードに使用できます。

URL のエンコード:

URL をエンコードするには、querystring.stringify() 関数を使用してオブジェクトからクエリ文字列を作成し、encodeURIComponent() を使用して結果の文字列をエンコードします。

const querystring = require('querystring'); const urlParams = {  q: 'geeks for geeks',  page: 1,  sort: 'desc' }; const encodedURL = 'https://www.google.com/search?' + querystring.stringify(urlParams); console.log(encodedURL);>

出力：

https://www.google.com/search?q=geeks%20for%20geeks&page=1&sort=desc>

URL をデコードする:

URL をデコードするには、querystring.parse() 関数を使用してクエリ文字列をオブジェクトに解析し、デコードされた値にアクセスします。

const decodedParams = querystring.parse('q=geeks%20for%20geeks&page=1&sort=desc'); console.log(decodedParams.q); // Output: geeks for geeks console.log(decodedParams.page); // Output: 1 console.log(decodedParams.sort); // Output: desc>

decodeURIComponent と decodeURI の違い:

JavaScript での URL エンコードとデコードは、シームレスな Web 開発にとって重要です。 encodeURI()、encodeURIComponent()、escape()、decodeURI()、decodeURIComponent()、unescape() などの関数を使用すると、開発者は URL が適切にフォーマットされ、サーバーで読み取り可能であることを確認できます。このスキルは、GET リクエストのクエリ パラメータを処理するために不可欠であり、Web サイトでのスムーズなユーザー エクスペリエンスを保証します。