Widely available すべての主要ブラウザで対応済み。安心して使用可能。

URL

URL インターフェイスは、URL の解釈、構築、正規化、およびエンコードに使用します。 URL のコンポーネントを簡単に読み取って変更できるプロパティを提供することで機能します。

通常、新しい URL オブジェクトを作成するにはコンストラクターを呼び出すときに URL を文字列として指定するか、相対 URL とベース URL を指定します。その後、解釈された URL のコンポーネントを簡単に読み取ったり、URL を変更したりすることができます。

ユーティリティ

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
URL
32
12
19
7
32
7
hash

hash は URL インターフェイスのプロパティで、'#' の後に URL のフラグメント識別子が続く文字列を返します。
32
13
22
7
32
7
host

host は URL インターフェイスのプロパティで、ホスト、すなわち URL.hostname の入った文字列です。URL の port が空でない場合は、':'、および URL の URL.port が続きます。
32
13
22
7
32
7
hostname

hostname は URL インターフェイスのプロパティで、URL のdomain nameの入った文字列です。
32
13
22
10
32
10
href

href は URL インターフェイスのプロパティで、URL 全体の入った文字列です。
32
13
22
10
32
10
origin

origin は URL インターフェイスの読み取り専用プロパティで、表現された URL のオリジンを Unicode シリアル化したものが入った文字列を返します。
32
12
26
10
32
10
parse_static

URL.parse() は URL インターフェイスの静的メソッドで、引数で定義された URL を表す、新たに作成された URL オブジェクトを返します。
126
126
126
18
126
18
password

password は URL インターフェイスのプロパティで、ドメイン名の前に指定されたパスワードの入った文字列です。
32
12
26
10
32
10
pathname

pathname は URL インターフェイスのプロパティで、階層構造内のある位置を表します。これはパスセグメントのリストで構成される文字列で、それぞれの先頭に / 文字が付きます。URL にパスセグメントがない場合、 pathname プロパティの値は空文字列になります。
32
13
22
10
32
10
port

port は URL インターフェイスのプロパティで、この URL のポート番号の入った文字列です。
32
13
22
10
32
10
protocol

protocol は URL インターフェイスのプロパティで、最後の ':' を含む URL のプロトコルスキームを表す文字列です。
32
13
22
10
32
10
searchParams

searchParams は URL インターフェイスの読み取り専用プロパティで、URL に含まれる GET デコードされたクエリー引数へのアクセスを可能にする URLSearchParams オブジェクトを返します。
51
17
29
10.1
51
10.3
toJSON

toJSON() は URL インターフェイスのメソッドで、URL のシリアル化されたバージョンの入った文字列を返しますが、実際には URL.toString() と同じ効果があるようです。
71
17
54
11
71
11
toString

URL.toString() はstringifierメソッドで、URL 全体が入った文字列を返します。 これは事実上、URL.href の読み取り専用バージョンです。
19
17
54
7
25
7
URL

URL() コンストラクターは、引数によって定義された URL を表す、新しく生成された URL オブジェクトを返します。
19
12
26
14.1
25
14.5
username

username は URL インターフェイスのプロパティで、ドメイン名の前に指定されたユーザー名をの入った文字列です。
32
12
26
10
32
10
URLSearchParams

URLSearchParams インターフェイスは、URL のクエリー文字列の操作に役立つメソッドを定義します。
49
17
29
10.1
49
10.3
@@iterator

[シンボル.イテレータ］
49
17
44
10.1
49
10.3
append

append() は URLSearchParams インターフェイスのメソッドで、指定されたキー/値のペアを新しい検索パラメーターとして追加します。
49
17
29
10.1
49
10.3
delete

delete() は URLSearchParams インターフェイスのメソッドで、すべての検索パラメーターのリストから、指定された検索パラメーターとそれに関連するすべての値を削除します。
49
17
29
14
49
14
delete (value parameter)

`value` パラメータ
117
117
115
17
117
17
entries

entries() は URLSearchParams インターフェイスのメソッドは、このオブジェクトに含まれるすべてのキー/値のペアを反復処理できるIteration_protocolsを返します。それぞれのペアのキーと値は文字列です。
49
17
44
10.1
49
10.3
forEach

forEach() は URLSearchParams インターフェイスのメソッドを使用すると、コールバック関数を介してこのオブジェクトに含まれるすべての値を反復処理できます。
49
17
44
10.1
49
10.3
get

get() は URLSearchParams インターフェイスのメソッドで、指定された検索パラメーターに関連付けられた最初の値を返します。
49
17
29
10.1
49
10.3
getAll

getAll() は URLSearchParams インターフェイスのメソッドで、指定された検索パラメーターに関連付けられたすべての値を配列として返します。
49
17
29
10.1
49
10.3
has

has() は URLSearchParams インターフェイスのメソッドは、指定された名前のパラメーターが存在するかどうかを示す論理値を返します。
49
17
29
10.1
49
10.3
has (value parameter)

`value` パラメータ
117
117
115
17
117
17
keys

keys() は URLSearchParams インターフェイスのメソッドで、このオブジェクトに含まれるすべてのキーを反復処理できるIteration_protocolsを返します。 キーは文字列です。
49
17
44
10.1
49
10.3
set

set() は URLSearchParams インターフェイスのメソッドで、指定された検索パラメーターに関連付けられた値を指定された値に設定します。一致する値が複数ある場合、このメソッドは他の値を削除します。 検索パラメーターが存在しない場合、このメソッドはそれを作成します。
49
17
29
10.1
49
10.3
size

URLSearchParams.size は URLSearchParams インターフェイスの読み取り専用のプロパティで、検索引数項目の総数を示します。
113
113
112
17
113
17
sort

URLSearchParams.sort() メソッドは、このオブジェクトに含まれるすべてのキー/値のペアをその場でソートし、undefined を返します。 ソート順は、キーの Unicode コードポイントに従います。 このメソッドは、安定したソートアルゴリズムを使用します（つまり、等しいキーを持つキー/値のペア間の相対的な順序が保持されます）。
61
17
54
11
61
11
toString

toString() は URLSearchParams インターフェイスのメソッドで、URL での使用に適したクエリー文字列を返します。
49
17
29
10.1
49
10.3
URLSearchParams

URLSearchParams() コンストラクターは、新しい URLSearchParams オブジェクトを作成して返します。
49
17
29
10.1
49
10.3
URLSearchParams (record)

`init` オブジェクトのレコード
61
17
54
11
61
11
URLSearchParams (sequence)

`init` オブジェクトのシーケンス
58
17
53
11
58
11
URLSearchParams (USVString)

`init` オブジェクト用の `USVString`
49
17
29
10.1
49
10.3
values

values() は URLsearchParams インターフェイスのメソッドで、このオブジェクトに含まれるすべての値を反復処理できるIteration_protocolsを返します。 値は文字列です。
49
17
44
10.1
49
10.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (19)
注釈 1件
実装メモ
  • バージョン57以前のFirefoxには、URL APIを介してアクセスした際に、URLに含まれる一重引用符がエスケープされてしまうバグがありました（バグ1386683を参照）。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (6)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (25)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: webkit (6)
注釈 1件
実装メモ
  • Firefox 49 以前では、`blob` スキームを使用した `URL` の結果が誤って `null` を返していました。
注釈 1件
実装メモ
  • Firefox 53 以前では、`pathname` および `search` はカスタムプロトコルに対して誤った値を返していました。 `protocol:host/x?a=true&b=false` の場合、`pathname` は "/x?a=true&b=false" を返し、`search` は "" を返していました。本来はそれぞれ "/x" と "?a=true&b=false" を返すはずでした。 バグ 1310483 を参照してください。
注釈 1件
実装メモ
  • Firefox 53 以前では、`pathname` および `search` はカスタムプロトコルに対して誤った値を返していました。 `protocol:host/x?a=true&b=false` の場合、`pathname` は "/x?a=true&b=false" を返し、`search` は "" を返していました。本来はそれぞれ "/x" と "?a=true&b=false" を返すはずでした。 バグ 1310483 を参照してください。
注釈 1件
削除済み
  • Edge 79 以前では、`URL` コンストラクタを呼び出す際、ベース URL 引数に含まれるクエリ引数は削除されていました。
注釈 1件
実装メモ
  • バージョン122以前は、`host`、`hostname`、および`port`は、未知のプロトコルやスキームに対しては解析されませんでした。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14.1)
実装メモ
  • Safari 14.1 以前のバージョンでは、値が `undefined` のベース URL を引数として `URL` コンストラクタを呼び出すと、Safari は `TypeError` をスローしていました（バグ 216841 を参照）。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14.5)
実装メモ
  • iOS 14.1以前のSafariでは、値が`undefined`であるベースURLを指定して`URL`コンストラクタを呼び出すと、iOS版のSafariで`TypeError`が発生していました。詳細はバグ216841を参照してください。
注釈 1件
実装メモ
  • バージョン57以前は、URL内の単一引用符がエスケープされていました（バグ1386683を参照）。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14)
  • 存在しないクエリパラメータを削除しても、URLから `?` は削除されません。バグ 193022 を参照してください。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (14)
  • 存在しないクエリパラメータを削除しても、URLから `?` は削除されません。バグ 193022 を参照してください。

基本構文

JAVASCRIPT 
const url = new URL("cats", "http://www.example.com/animals/dogs");
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/animals/cats"

実務での使いどころ

  • URL の活用

    URL インターフェイスは、URL の解釈、構築、正規化、およびエンコードに使用します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク