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
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'));
仕様書
Specification |
---|
URL Standard # api |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- URL API
- URL とは何か
URL
オブジェクトを取得するプロパティ:Window.URL
URLSearchParams