JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】decodeURIComponentとdecodeURIの違いとは？使い分けをわかりやすく解説

decodeURIComponentとは

JavaScriptでURLの一部（コンポーネント）をデコードしたい場合は、decodeURIComponent()メソッドを使用します。このメソッドは、encodeURIComponent()によってエンコードされた文字列を元の形式に戻すためのもので、セミコロン（;）・スラッシュ（/）・クエスチョンマーク（?）・アンパサンド（&）といった予約文字も含めて、すべてのエンコード文字をデコードするのが特徴です。

サンプルコード

以下のコードを実行すると、URLコンポーネントのエンコードとデコードの動作を確認できます。

<!DOCTYPE html>
<html>
   <body>
      <button onclick="display()">Check</button>
      <p id="demo"></p>
      <script>
         function display() {
            var uri = "https://example.com/welcome msg.jsp?name=åmit&sub=programming";

            // まずエンコードする
            var encode = encodeURIComponent(uri);
            var decode = decodeURIComponent(encode);

            var result = "Encode= " + encode + "<br>" + "Decode= " + decode;
            document.getElementById("demo").innerHTML = result;
         }
      </script>
   </body>
</html>

decodeURIとは

JavaScriptでURL全体をデコードしたい場合は、decodeURI()メソッドを使用します。こちらはencodeURI()でエンコードされた文字列を元に戻すためのもので、URIの構造を保つために使われる予約文字（; / ? : @ & = + $ , # など）はデコードせず、そのまま残す点が特徴です。

サンプルコード

以下のコードを実行すると、URL全体のエンコードとデコードの動作を確認できます。

<!DOCTYPE html>
<html>
   <body>
      <button onclick="display()">Check</button>
      <p id="demo"></p>
      <script>
         function display() {
            var uri = "welcome msg.jsp?name=åmit&sub=programming";

            // まずエンコードする
            var encode = encodeURI(uri);
            var decode = decodeURI(encode);

            var result = "Encode= " + encode + "<br>" + "Decode= " + decode;
            document.getElementById("demo").innerHTML = result;
         }
      </script>
   </body>
</html>

decodeURIComponentとdecodeURIの違いまとめ

両者の違いは「どこまでデコードするか」という点にあります。

  • decodeURI()：URL全体を対象とし、URIの意味を持つ予約文字（; / ? : @ & = + $ , # など）はデコードしない。
  • decodeURIComponent()：URLの一部（クエリパラメータの値など）を対象とし、予約文字も含めたすべてのエンコード文字をデコードする。

つまり、encodeURI()でエンコードした文字列にはdecodeURI()を、encodeURIComponent()でエンコードした文字列にはdecodeURIComponent()を、それぞれ対応させて使用するのが基本です。対応関係を間違えると、意図した通りに文字列が復元されないことがあるため注意しましょう。

  1. DirectX11とDirectX12の違いを徹底解説！ゲーマーが知っておくべきポイント

    DirectXは、ソフトウェアがマルチメディアコンテンツを描画し、グラフィックハードウェアと通信するために使用されるAPI（アプリケーションプログラミングインターフェース）のコレクションです。DirectXの主要な構成要素であるDirect3Dは、ソフトウェアとグラフィックスハードウェア間の通信を担っています。ハードウェアは製品ごとに異なるため、標準化された関数や呼び出しのライブラリを通じてグラフィックカードと通信することで、ゲーム開発を大幅にスピードアップできます。これは「ハードウェア抽象化」と呼ばれ、APIの最も重要な役割となっています。車に例えてみましょう。1台の車の運転ができれば、ほぼ

  2. C#のListとIListの違いとは？インターフェースと具象クラスの使い分けを解説

    C#におけるListとIListの主な違いは、Listがインデックスでアクセスできるオブジェクトのリストを表す「クラス（具象型）」であるのに対し、IListは同じくインデックスでアクセス可能なオブジェクトのコレクションを表す「インターフェース」であるという点です。IListインターフェースは、ICollectionとIEnumerableという2つのインターフェースから派生しています。ListとIListはどちらもオブジェクトの集合を扱うために使用され、整数や文字列などさまざまな型のオブジェクトを格納できます。また、要素の挿入・削除・検索・並べ替えを行うためのメソッドも共通して提供されています