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

JavaScriptのunescape()関数とは？使い方とサンプルコードをわかりやすく解説

JavaScriptのunescape()関数は、escape()関数によってエンコードされた文字列をデコード（元に戻す）ための関数です。

ただし、この関数はECMAScript v3以降で非推奨（deprecated）とされており、現在では代わりにdecodeURI()やdecodeURIComponent()を使用することが推奨されています。レガシーなコードの理解や保守の際に役立つ知識なので、ここで基本的な動作を確認しておきましょう。

unescape()関数の基本的な使い方

以下のコードは、unescape()関数を使ってエンコードされたURL文字列をデコードする例です。ボタンをクリックすると、エンコード済みのURLがデコードされて画面に表示されます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample,
    .result {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
    .result {
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScript unescape() の使用例</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックするとURLがデコードされます
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    let url = "Hello World?image=8sf.jpg&size=400px";
    sampleEle.innerHTML = "エンコード後のURL = " + escape(url) + "<br>";
    document.querySelector(".Btn").addEventListener("click", () => {
        resultEle.innerHTML = "デコード後のURL = " + unescape(url);
    });
</script>
</body>
</html>

実行結果

ページを読み込むと、まずescape()関数によってエンコードされたURLが赤色で表示されます。

JavaScriptのunescape()関数とは？使い方とサンプルコードをわかりやすく解説

その後、「CLICK HERE」ボタンをクリックすると、unescape()関数によってデコードされた元のURLが紫色で表示されます。

JavaScriptのunescape()関数とは？使い方とサンプルコードをわかりやすく解説

注意点：unescape()は非推奨

unescape()関数およびescape()関数は、マルチバイト文字（日本語など）を正しく扱えないという問題があるため、現在の標準仕様からは外れています。新しいプロジェクトでは、以下の関数を使うようにしましょう。

  • encodeURI() / decodeURI()：URL全体を対象にエンコード・デコードを行う
  • encodeURIComponent() / decodeURIComponent()：URLのパラメータ部分など、個別のコンポーネントに対してエンコード・デコードを行う

これらのモダンな関数はUTF-8ベースで動作するため、日本語を含む文字列でも安全に処理できます。

  1. JavaScriptにおける継承の基本を具体例で解説

    JavaScriptは、クラスベースではなくプロトタイプベースのオブジェクト指向言語です。そのため、継承はprototype（プロトタイプ）オブジェクトを通じて実現されます。コンストラクタ関数のprototypeプロパティにメソッドやプロパティを追加すると、そのコンストラクタから生成されたすべてのインスタンスが、それらを共有して利用できるようになります。 プロトタイプによる継承の仕組み JavaScriptでは、インスタンスからプロパティやメソッドが参照されるとき、まずオブジェクト自身を検索し、見つからなければプロトタイプチェーンをたどって上位のオブジェクトへと探しに行きます。これにより、各イ

  2. 【初心者向け】JavaScriptでオブジェクトのディープクローンを作成する方法を実例付きで解説

    はじめにJavaScriptでは、単純な代入（=）やObject.assign()などによるコピーはシャローコピー（浅いコピー）となり、元のオブジェクトとプロパティへの参照が共有されてしまいます。そのため、一方を変更するともう一方にも影響が及びます。これを防ぐには、参照関係まで完全に切り離したディープクローン（深いコピー）を作成する必要があります。本記事では、JSON.parse(JSON.stringify()) を使ったシンプルな方法で、オブジェクトのディープクローンを作成する例を紹介します。ディープクローンのサンプルコード以下のコードでは、ボタンをクリックすると元のオブジェクト obj