URL() とは
URL() コンストラクターはパラメーターによって定義されたURLオブジェクトを返します。
要するに以下のようにURL()内にURLを入れて返却されるオブジェクトを利用する。
const url = new URL('https://example.com/foo/?bar=123')
console.log(url)
上図のようにオブジェクトが返されており、url.hostで "example.com"、url.pathで "/foo/" を取得したりできます。
searchParamsでパラメーターを取得
上図のsearchParamsを使うとパラメーターの値を取得できます。
const url = new URL('https://example.com/?bar=123')
console.log(url.searchParams.get('bar'))
// => 123
URLSearchParamsでパラメーターを追加
パラメーターを追加したい場合はurl.searchにnew URLSearchParams({ foo })のように指定して追加できます。
const base = 'https://example.com'
const foo = 'abc'
const url = new URL(base)
url.search = new URLSearchParams({ foo })
console.log(url.href)
// => 'https://example.com/?foo=abc'
文字列連結と違い、正しく補正してくれる
人によってはパラメーターを付けるだけなら文字列を連結すれば良いのでは？
…と思う人もいるかもしれませんが、new URL()を使用した方がオブジェクトを返す際にhttps:///example.comのように多少間違えていても、オブジェクトを返す際にhttps://example.comのように正しく補正してくれるメリットもあります。
const base = 'https:///example.com'
const foo = 'abc'
const url = new URL(base)
url.search = new URLSearchParams({ foo })
console.log(url.href)
// => 'https://example.com/?foo=abc'
JavaScriptで文字列で連結してURLの「/」や「&」の付け方を間違えるミスはよくあるので、なるべくnew URL()を使用したほうが良いです。
new URL()の第二引数の利用について
わかりやすいように冒頭では new URL('https://example.com/foo/'〜 と書いていますが、第一引数と第二引数で以下のように指定して書くことも可能です。
const url = new URL('/foo/', 'https://example.com')
console.log(url.href)
// => https://example.com/foo/
しかし、'//foo/' のように間違えると「https://foo/」をhrefで返してしまうので、使用しないほうが良いです。😅
const url = new URL('//foo/', 'https://example.com')
console.log(url.href)
// => https://foo/
