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

【初心者向け】JavaScriptのescape()関数とは？使い方と非推奨の理由を解説

JavaScriptのescape()関数とは

JavaScriptのescape()関数は、文字列をエンコードするために使用される関数です。文字列内の特殊文字をASCII形式のエスケープシーケンス（%xx の形式）に変換します。

ただし、この関数はECMAScript v3以降で非推奨（deprecated）とされており、現在の開発では使用が推奨されていません。URIのエンコード目的であれば、代わりにencodeURI()やencodeURIComponent()を使用することが標準的な方法です。


escape()の使用例

それでは、実際にJavaScriptのescape()関数を使用したサンプルコードを見てみましょう。ボタンをクリックすると、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 {
      font-size: 18px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScript escape()</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックしてURLをエンコードしてください
</h3>
<script>
   let sampleEle = document.querySelector(".sample");
   let url = "https://www.google.com/images?size=420px&name=8s1f.jpg";
   document.querySelector(".Btn").addEventListener("click", () => {
      sampleEle.innerHTML = escape(url);
   });
</script>
</body>
</html>

実行結果

ページを開くと、次のように表示されます。

【初心者向け】JavaScriptのescape()関数とは？使い方と非推奨の理由を解説

そして、「CLICK HERE」ボタンをクリックすると、URLがescape()関数によってエンコードされ、以下のように表示されます。

【初心者向け】JavaScriptのescape()関数とは？使い方と非推奨の理由を解説


代替手段：encodeURI()・encodeURIComponent()

前述のとおり、escape()は非推奨のため、実際の開発では以下の関数を使い分けることが推奨されています。

  • encodeURI()： URI全体をエンコードしたい場合に使用します。「:」「/」「?」「&」など、URIの構造に関わる文字はそのまま残ります。
  • encodeURIComponent()： クエリパラメータなど、URIの構成要素を個別にエンコードしたい場合に使用します。ほぼすべての特殊文字がエンコードされます。

たとえば先ほどの例をencodeURIComponent(url)に置き換えると、より安全かつ正確なエンコード結果が得られます。レガシーコードのメンテナンス時以外は、escape()ではなくこれらの関数を使用しましょう。

  1. JavaScriptのWeakSetとは？特徴と主要メソッド、サンプルコードをわかりやすく解説

    JavaScriptのWeakSet（ウィークセット）は、オブジェクトを格納するためのコレクションです。Setと同様に、同じオブジェクトを重複して保存することはできません。WeakSetの主な特徴弱い参照で保持する：WeakSet内のオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。そのため、メモリリークを防ぎたい場面で役立ちます。オブジェクトのみ格納可能：数値や文字列などのプリミティブ値は追加できません。列挙できない：Setのようなsizeプロパティや反復処理の仕組みを持たず、格納されている要素の一覧を取得することはできません。WeakS

  2. JavaScriptのエスケープ文字とは？特殊文字のエスケープ方法と一覧を解説

    エスケープ文字とは？エスケープ文字とは、プログラム上で本来意図した意味とは別の特別な意味に解釈されてしまう文字のことです。たとえば、ダブルクォートやシングルクォート、改行コードなどが該当します。こうした文字を「そのままの文字」として扱い、画面に出力したい場合には、直前にバックスラッシュ「\」を付けて記述します。この操作を「エスケープ処理」と呼びます。JavaScriptの主なエスケープ文字一覧コード意味・出力結果\bバックスペース\fフォームフィード\n改行（ニューライン）\rキャリッジリターン\t水平タブ\v垂直タブ\シングルクォート（）\ダブルクォート（）\\バックスラッシュ（\）バックス