本当にただのメモ

なるべく Qiita に投稿しよう

URL 操作

URL オブジェクト

雑に言うと、任意の文字列から location オブジェクトに非常に親しいオブジェクトを作るためのもの。

const url = new URL(`http://example.com/action?foo=Foo&bar=Bar`)

// propertoes
console.log(url.protocol) //=> http:
console.log(url.search)   //=> ?foo=Foo&bar=Bar
console.log(url.href)     //=> http://example.com/action?foo=Foo&bar=Bar

// URLSearchParams (後述) を返す
const params = url.searchParams

// methods
console.log(url.toString) //=> http://example.com/action?foo=Foo&bar=Bar

URLSearchParams

クエリパラメータを操作するためのもの。

今まで query-string でやっていたことは、ほぼこれで代用できるはず。

テクニック

任意の query 文字列からも URLSearchParams を作れる。

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

location オブジェクトからも URL オブジェクトを作れるので、URLSearchParams の恩恵にあずかりたい場合に使う。

const q = (new URL(location)).searchParams.get('q')

a 要素も searchParams プロパティを持っている。

let a = document.createElement('a');
a.href = 'https://example.com?filter=api';
a.searchParams.get('filter') //=> api

パラメータの正規化をする場合は sort() を使う。( URL を cache key などにする場合は忘れずに)

const params = new URLSearchParams("a=3&b=0&a=1&a=2")
params.sort()
params.toString() //=> a=3&a=1&a=2&b=0

参考

URLSearchParamsによる簡単URL操作 - Qiita