JavaScript URL オブジェクトのプロパティ

hash 断片識別子

URL オブジェクトの hash プロパティは、URL オブジェクトが表す URL の # 断片識別子 (fragment identifier) を含み、それに続く文字列を保持します。

const base = 'http://user1:pwd@www.apple.com:8080/'
const url = new URL('mac/buy.html?lang=en&city=la#abc', base)
console.log(url)
/*
URL {
  href: 'http://user1:pwd@www.apple.com:8080/mac/buy.html?lang=en&city=la#abc',
  origin: 'http://www.apple.com:8080',
  protocol: 'http:',
  username: 'user1',
  password: 'pwd',
  host: 'www.apple.com:8080',
  hostname: 'www.apple.com',
  port: '8080',
  pathname: '/mac/buy.html',
  search: '?lang=en&city=la',
  searchParams: URLSearchParams { 'lang' => 'en', 'city' => 'la' },
  hash: '#abc'
}
*/

host　ホスト名とポート番号

URL オブジェクトの host プロパティは、URL オブジェクトが保持する URL のホスト名及びポート番号を明示的に含む場合は、コロン : に続けてポート番号も含む文字列を保持します。

hostname ホスト名

URL オブジェクトの host プロパティは、URL オブジェクトが保持する URL のホスト名を保持します。

host プロパティと異なり、ポート番号は含みません。

href URL 文字列全体

URL オブジェクトの href プロパティは、URL オブジェクトが保持する URL 文字列全体を保持します。

URL オブジェクトがベース URL と相対パスを基に作成された場合は、解析後に生成された URL 文字列を保持します。

origin URL のオリジン (生成元)

URL オブジェクトの origin プロパティは、URL オブジェクトが保持する URL のスキーム、ホスト名、ポート番号を保持する読み取り専用のプロパティです。

password パスワード

URL オブジェクトの password プロパティは、URL オブジェクトが保持する URL 中に含まれるパスワードを保持します。

pathname パス名

URL オブジェクトの pathname プロパティは、URL オブジェクトが保持する URL のスキーム部分を除きはじめに現れた / 以降の部分でクエリ文字列とフラグメント識別子を除く部分です。

port ポート番号

URL オブジェクトの port プロパティは、URL オブジェクトが保持する URL 中に含まれるポート番号を保持します。

protocol プロトコルスキーム

URL オブジェクトの protocol プロパティは、URL オブジェクトが保持する URL 中に含まれるプロトコルスキームを保持します。 http: のようにコロン : を含みます。

search クエリ文字列

URL オブジェクトの search プロパティは、URL オブジェクトが保持する URL 中に含まれるクエリ文字列 (検索パラメータ文字列) を保持します。クエリ文字列の先頭の ? を含みます。

searchParams URLSearchParams オブジェクト

URL オブジェクトの searchParams プロパティには、検索パラメータを表す URLSearchParams オブジェクトがセットされます。読取専用のプロパティです。

URLSearchParams オブジェクトにセットされたパラメータは、 URLSearchParams オブジェクトの get(key) メソッドにキーを渡すことで取得できます。

const base = 'http://www.example.com/'
const url = new URL('foo?state=CA&city=Los Angenes', base)
console.log(url.href)
// http://www.example.com/foo?state=CA&city=Los%20Angenes
const { searchParams } = url
console.log(searchParams)
// URLSearchParams { 'state' => 'CA', 'city' => 'Los Angenes' }
console.log(searchParams.get('city'))
// Los Angenes
for (const p of searchParams) {
  console.log(`${p[0]} - ${p[1]}`)
}
// state - CA
// city - Los Angenes

username ユーザー名

URL オブジェクトの username プロパティは、URL オブジェクトが保持する URL 中に含まれるユーザー名を保持します。