JavaScriptのencodeURI()関数：URL全体をエンコードする場合

概念と使用方法

encodeURI()関数は
URL構造を定義する一部の特殊文字を除いてURLをエンコードします。

この関数は主にURL全体の文字列をエンコードする際に使用されます。

特徴

URLにおいてプロトコル、ドメイン、パス区切り文字（/、:、?、&、#）など特別な意味を持つ文字はエンコードされません。
したがって、実際にURL構造を保持する必要がある場合に適しています。
URL全体をエンコードする場合には適していますが、
プロトコル、ドメイン、パス、クエリ値など、各URL構成要素を個別にエンコードする場合には適していません。そのような場合は、encodeURIComponent()関数を使用する必要があります。

注意してください！
encodeURI()はURL全体の構造を保持しながらエンコードするよう設計されており、/、:、?、&、#などの文字はそのまま残されます。しかし、これらの文字を含む各個別の構成要素をエンコードする場合には問題が生じることがあります。例えば、パスの値に&が含まれるとクエリ区切り文字と誤解される可能性があるため、そのような場合には完全にエンコードする必要があるencodeURIComponent()関数を使用する必要があります。

基本の例

JavaScript

const uri = "https://www.example.com/?x=サンプル値";
const encoded = encodeURI(uri);

console.log(encoded);
// 出力: "https://www.example.com/?x=%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E5%80%A4"

encodeURI()関数の形式は次の通りです。

構文

パラメータ

`encodeURI()`関数のパラメータ
`uri`	エンコードするURL全体です。この関数はURLの構成要素のうち、一部の特殊文字を除いてエンコードします。

返り値

指定された文字列をURIとしてエンコードした新しい文字列を返します。

`encodeURI()`関数でエンコードされない文字

アルファベット文字（A-Z、a-z）
数字（0-9）
;
,
/
?
:
@
&
=
+
$
-
_
.
!
~
*
'
(
)
#

この一覧に挙げられていないその他の文字（スペースを含む）はすべて、%の後に該当文字のUnicode値を16進数で表した形式でエンコードされます。

例

JavaScript

const uri = "https://example.com/search?query=Hello, world!&page=1";
const encodedUri = encodeURI(uri);

console.log(encodedUri);
// 出力: "https://example.com/search?query=Hello%2C%20world!&page=1"

この例では、encodeURI()関数はuri変数に格納されたURIをエンコードします。エンコードされない特殊文字は、:、/、?、&、=、!などです。

注意点

encodeURI()だけでは、XMLHttpRequestのような正しいHTTPのGETおよびPOSTリクエストを形成できません。なぜなら、&、+、=の文字がエンコードされず、GETおよびPOSTリクエストで特殊文字として扱われてしまうためです。一方、encodeURIComponent()関数はこれらの特殊文字もエンコードします。