URL

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

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

注:

この機能は Web Worker 内で利用可能です。

コンストラクター

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
const 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 を実装)。

ブラウザーの互換性

BCD tables only load in the browser

関連情報