URL

URL インターフェイスは、URL の解析、構築、正規化、およびエンコードに使用します。 URL のコンポーネントを簡単に読み取って変更できるプロパティを提供することで機能します。 通常、コンストラクターを呼び出すときに URL を文字列として指定するか、相対 URL とベース URL を指定して、新しい URL オブジェクトを作成します。 その後、解析された URL のコンポーネントを簡単に読み取ったり、URL を変更したりできます。

ブラウザーがまだ URL() コンストラクターをサポートしていない場合は、Window インターフェイスの Window.URL プロパティを使用して URL オブジェクトにアクセスできます。 対象とするブラウザーのいずれかに、この接頭辞を付ける必要があるかどうかを確認してください。

註: この機能は Web Workers 内で利用可能です。

コンストラクター

new URL()
絶対 URL 文字列、または相対 URL 文字列とベース URL 文字列を使用して指定された URL を参照する URL オブジェクトを作成して返します。

プロパティ

hash
'#' に続いて URL のフラグメント識別子を含む USVString
host
ドメイン(ホスト名)に続いて(ポートが指定されている場合)、':' と URL のポートを含む USVString
hostname
URL のドメインを含む USVString
href
URL 全体を含む USVString
origin 読取専用
URL のオリジン、つまりそのスキーム、ドメイン、およびポートを含む USVString を返します。
password
ドメイン名の前に指定されたパスワードを含む USVString
pathname
最初の '/' に続いて URL のパスを含む USVString
port
URL のポート番号を含む USVString
protocol
最後の ':' までを含めた URL のプロトコルスキームを含む USVString
search
URL のパラメーター文字列を示す USVString。 パラメーターが指定されている場合、この文字列には先頭の '?' 文字で始まるすべてのパラメーターが含まれます。
searchParams 読取専用
search で見つかった個々のクエリーパラメーターにアクセスするために使用できる URLSearchParams オブジェクト。
username
ドメイン名の前に指定されたユーザー名を含む USVString

メソッド

toString()
URL 全体を含む USVString を返します。 URL.href と同義ですが、値の変更に使用することはできません。
toJSON()
URL 全体を含む USVString を返します。 href プロパティと同じ文字列を返します。

静的メソッド

createObjectURL()
一意の blob URL を含む DOMString を返します。 これは、スキームとして blob: を含む URL で、その後にブラウザー内のオブジェクトを一意に識別する不透明な文字列が続きます。
revokeObjectURL()
URL.createObjectURL() を使用して以前に生成したオブジェクト URL を取り消します。

使用上の注意

コンストラクターは、url パラメーターと、url パラメーターが相対 URL の場合にベースとして使用するオプションの base パラメーターを受け取ります。

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

URL を構築するために URL のプロパティを設定できます。

url.hash = 'tabby';
console.log(url.href); // "http://www.example.com/cats#tabby"

URL は、RFC 3986 にあるルールに従ってエンコードされます。 例えば、次のとおりです。

url.pathname = 'démonstration.html';
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"

URL のクエリー文字列を構築および操作するために、URLSearchParams インターフェイスを使用できます。

現在のウィンドウの URL から検索パラメーターを取得するには、次のようにします。

// https://some.site/?id=123
var parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"

URL の toString() メソッドは href プロパティの値を返すだけなので、コンストラクターを使用して URL を直接に正規化およびエンコードできます。

const response = await fetch(new URL('http://www.example.com/démonstration.html'));

仕様

仕様 状態 コメント
File API
URL の定義
草案 静的メソッドの URL.createObjectURL()URL.revokeObjectURL() の追加。
 
URL
API の定義
現行の標準 初期定義 (URLUtils を実装)。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
URLChrome 完全対応 32
完全対応 32
完全対応 2
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 19
補足
完全対応 19
補足
補足 Before version 57, Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683).
補足 To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']);.
IE 完全対応 ありOpera 完全対応 19
完全対応 19
完全対応 15
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Safari 完全対応 7
完全対応 7
完全対応 6
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
WebView Android 完全対応 4.4
完全対応 4.4
完全対応 4
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Chrome Android 完全対応 32
完全対応 32
完全対応 18
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Firefox Android 完全対応 19
補足
完全対応 19
補足
補足 Before version 57, Firefox had a bug whereby single quotes contained in URLs are escaped when accessed via URL APIs (see bug 1386683).
補足 To use it from chrome code, JSM and Bootstrap scope, you have to import it with Cu.importGlobalProperties(['URL']);.
Opera Android 完全対応 19
完全対応 19
完全対応 14
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Safari iOS 完全対応 7
完全対応 7
完全対応 6
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
URL() constructorChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 26IE 未対応 ? — 11Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 26Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
createObjectURL
実験的
Chrome 完全対応 8Edge 完全対応 12Firefox 完全対応 19
補足
完全対応 19
補足
補足 createObjectURL() is no longer available within the context of a ServiceWorker.
IE 完全対応 10Opera 完全対応 15Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 19
補足
完全対応 19
補足
補足 createObjectURL() is no longer available within the context of a ServiceWorker.
Opera Android 完全対応 14Safari iOS 完全対応 6Samsung Internet Android 完全対応 あり
hashChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 22IE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 22Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
hostChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 22IE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 22Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
hostnameChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 22IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 22Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
hrefChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 22IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 22Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
originChrome 完全対応 32Edge 完全対応 12Firefox 完全対応 26
完全対応 26
未対応 26 — 49
補足
補足 Results for URL using the blob scheme incorrectly returned null.
IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ≤37Chrome Android 完全対応 32Firefox Android 完全対応 26
完全対応 26
未対応 26 — 49
補足
補足 Results for URL using the blob scheme incorrectly returned null.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
passwordChrome 完全対応 32Edge 完全対応 12Firefox 完全対応 26IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ≤37Chrome Android 完全対応 32Firefox Android 完全対応 26Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
pathnameChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 53
完全対応 53
未対応 22 — 53
補足
補足 pathname and search returned the wrong values so that for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively.
IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 53
完全対応 53
未対応 22 — 53
補足
補足 pathname and search returned the wrong values so that for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
portChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 22IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 22Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
protocolChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 22IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 22Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
revokeObjectURL
実験的
Chrome 完全対応 8Edge 完全対応 12Firefox 完全対応 19
補足
完全対応 19
補足
補足 revokeObjectURL() is no longer available within the context of a ServiceWorker.
IE 完全対応 10Opera 完全対応 15Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 19
補足
完全対応 19
補足
補足 revokeObjectURL() is no longer available within the context of a ServiceWorker.
Opera Android 完全対応 14Safari iOS 完全対応 6Samsung Internet Android 完全対応 あり
searchChrome 完全対応 ありEdge 完全対応 13Firefox 完全対応 53
完全対応 53
未対応 22 — 53
補足
補足 pathname and search returned the wrong values so that for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively.
IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 53
完全対応 53
未対応 22 — 53
補足
補足 pathname and search returned the wrong values so that for a URL of http://z.com/x?a=true&b=false, pathname would return "/x?a=true&b=false" and search would return "", rather than "/x" and "?a=true&b=false" respectively.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
searchParamsChrome 完全対応 51Edge 完全対応 17Firefox 完全対応 29IE 未対応 なしOpera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 51Chrome Android 完全対応 51Firefox Android 完全対応 29Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
toJSONChrome 完全対応 71Edge 完全対応 17Firefox 完全対応 54IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 71Chrome Android 完全対応 71Firefox Android 完全対応 54Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
toStringChrome 完全対応 19Edge 完全対応 17Firefox 完全対応 54IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ≤37Chrome Android 完全対応 25Firefox Android 完全対応 54Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
usernameChrome 完全対応 32Edge 完全対応 12Firefox 完全対応 26IE ? Opera 完全対応 ありSafari 完全対応 10WebView Android 完全対応 ≤37Chrome Android 完全対応 32Firefox Android 完全対応 26Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報