ホームページ > ウェブフロントエンド > フロントエンドQ&A > JavaScriptのURLエスケープ文字とは何ですか?

JavaScriptのURLエスケープ文字とは何ですか?

PHPz
リリース: 2023-04-25 13:39:41
オリジナル
1267 人が閲覧しました

JavaScript URL エスケープ文字は、URL の正しい送信と解析を容易にするために、URL 内の一部の特殊文字をエスケープするために使用されます。これらの特殊文字には、スペース、ポンド記号、パーセント記号などが含まれます。これらの文字が URL に直接表示されると、ブラウザーが URL を正しく解析できず、エラーが発生する可能性があります。

JavaScript では、encodeURI()、encodeURIcomponent()、decodeURI()、decodeURIComponent() などの関数を使用して、URL のエスケープおよびデコード操作を実行できます。これらの関数の使い方と注意点を詳しく紹介します。

  1. encodeURI()

パラメータ: エスケープする必要がある文字列。

戻り値: エスケープされた文字列を返します。

注: この関数は、スペース、文字、数字、および一部の特殊文字を除くすべての文字をエスケープします。したがって、URL 全体をエンコードする場合には便利ですが、URL の一部をエンコードする場合にはあまり適切ではない可能性があります。

サンプル コード:

var uri = "https://www.example.com/#section-1";
var encodedUri = encodeURI(uri);
console.log(encodedUri);
ログイン後にコピー

出力結果:

https://www.example.com/%23section-1
ログイン後にコピー
  1. encodeURIComponent()

パラメータ: エスケープする必要がある文字列。

戻り値: エスケープされた文字列を返します。

注: この関数は、文字、数字、およびスペースを含む一部の特殊文字を除くすべての文字をエスケープします。したがって、URL の一部をエンコードする場合に便利です。

サンプルコード:

var uri = "https://www.example.com/?key=hello world";
var encodedUri = encodeURIComponent(uri);
console.log(encodedUri);
ログイン後にコピー

出力結果:

https%3A%2F%2Fwww.example.com%2F%3Fkey%3Dhello%20world
ログイン後にコピー
  1. decodeURI()

パラメータ: デコードする必要がある文字列。

戻り値: デコードされた文字列を返します。

注: この関数は、encodeURI() 関数によってエンコードされた URI をデコードするために使用されます。

サンプルコード:

var encodedUri = "https://www.example.com/%23section-1";
var uri = decodeURI(encodedUri);
console.log(uri);
ログイン後にコピー

出力結果:

https://www.example.com/#section-1
ログイン後にコピー
  1. decodeURIComponent()

パラメータ: デコードする必要がある文字列。

戻り値: デコードされた文字列を返します。

注: この関数は、encodeURIComponent() 関数によってエンコードされた URI をデコードするために使用されます。

サンプル コード:

var encodedUri = "https%3A%2F%2Fwww.example.com%2F%3Fkey%3Dhello%20world";
var uri = decodeURIComponent(encodedUri);
console.log(uri);
ログイン後にコピー

出力結果:

https://www.example.com/?key=hello world
ログイン後にコピー

概要: JavaScript URL エスケープ文字は、日常のプログラミング開発において非常に実用的であり、考えられる URL を正しく処理するのに役立ちます。不要なエラーを回避するように見えます。関連関数を使用する場合は、特定の状況に応じてエスケープおよびデコード操作を実行する適切な関数を選択する必要があることに注意してください。

以上がJavaScriptのURLエスケープ文字とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート