JavaScript URL オブジェクトの作成

JavaScript の URL API とは

JavaScript の URL API は WHATWG で標準化されている API です。

URL を構成する文字列の内容から URL オブジェクトを作成することで、プロトコル、ホスト名の情報、パス名などの取得を容易に行えるようになります。

new URL() URL コンストラクタ

JavaScript URL クラスのコンストラクタ URL(url) に引数として URL 文字列を渡すと、URL の内容を解析し URL オブジェクトを作成します。

const url = new URL('https://user1:pwd@www.example.com:8080/dir1/?=xyz&def=zzz#3')
console.log(url)
/*
URL {
  href: 'https://user1:pwd@www.example.com:8080/dir1/?=xyz&def=zzz#3',
  origin: 'https://www.example.com:8080',
  protocol: 'https:',
  username: 'user1',
  password: 'pwd',
  host: 'www.example.com:8080',
  hostname: 'www.example.com',
  port: '8080',
  pathname: '/dir1/',
  search: '?=xyz&def=zzz',
  searchParams: URLSearchParams { '' => 'xyz', 'def' => 'zzz' },
  hash: '#3'
}
*/

JavaScript URL クラスのコンストラクタ URL(url, [base] ) は第二引数にベースとなる URL を受け取り、相対パスを評価することにより URL オブジェクトを作成することもできます。

const base = 'http://www.example.com/foo/'
const url = new URL('bar/baz.html', base)
console.log(url)
/*
URL {
  href: 'http://www.example.com/foo/bar/baz.html',
  origin: 'http://www.example.com',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'www.example.com',
  hostname: 'www.example.com',
  port: '',
  pathname: '/foo/bar/baz.html',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}
*/

また URL オブジェクトの各種プロパティは origin プロパティ以外設定可能です。 次のように URL を構築することも可能です。

const url = new URL('http://www.google.com/')
url.username = 'john'
url.password = 'password'
url.port = 8080
url.search = '?a=x&b=y'
console.log(url)
/*
URL {
  href: 'http://john:password@www.google.com:8080/?a=x&b=y',
  origin: 'http://www.google.com:8080',
  protocol: 'http:',
  username: 'john',
  password: 'password',
  host: 'www.google.com:8080',
  hostname: 'www.google.com',
  port: '8080',
  pathname: '/',
  search: '?a=x&b=y',
  searchParams: URLSearchParams { 'a' => 'x', 'b' => 'y' },
  hash: ''
}
*/