◆ URLSearchParams が便利
◆ URL オブジェクトの searchParams プロパティからも使える
いつのまにか URLSearchParams という機能が使えるようになってました
調べてみると Chrome 49 からのようです
結構前ですね

URL オブジェクト

URL のオブジェクトに searchParams というプロパティが追加されていて クエリパラメータを簡単に扱えます

const url = new URL("http://var.blog.jp/page1.html?query=1&qqq=aaa&foo=bar")
const params = url.searchParams
// URLSearchParams {}

params.toString()
// "query=1&qqq=aaa&foo=bar"

params.append("xxxx", "yyy")
params.delete("qqq")
params.toString()
// "query=1&foo=bar&xxxx=yyy"

url.href
// "http://var.blog.jp/page1.html?query=1&foo=bar&xxxx=yyy"


URL のオブジェクトにはありますが location のオブジェクトにはこのプロパティはありません
ですが簡単に searchParams を作ることはできます

new URL(location).searchParams

コンストラクタ

クエリパラメータのみ使いたいならいきなり URLSearchParams コンストラクタに入れることもできます

new URLSearchParams(location.search)

最初に 「?」 がついてても大丈夫です


他にも色々な形式が使えます

new URLSearchParams({a:1, b:2})
new URLSearchParams([["a", 1], ["b", 2]])
new URLSearchParams("a=1&b=2")

オブジェクトでかけるのは便利ですね

const base_url = "http://var.blog.jp/"

const new_url = base_url + new URLSearchParams({
x: 100,
y: 200,
}).toString()

new_url
// "http://var.blog.jp/x=100&y=200"

ただ クエリパラメータは 1 つのキーに複数の値を結び付けられますが オブジェクト形式だと 1 つのみになります

メソッド

単純な append/delete 以外にもいくつかのメソッドがあります

set

set を使うとキーに対する値は 1 つだけです
新しい値に置き換えられます

append にすれば「追加」することができます

const params = new URLSearchParams()
params.set("a", 1)
params.toString()
// "a=1"
params.set("a", 2)
params.toString()
// "a=2"
params.append("a", 3)
params.toString()
// "a=2&a=3"

has

キーを引数に ひとつでもあれば true を返します

get/getAll

キーを指定して値を取得します

get だと複数あっても 1 つ目だけを返します
getAll だと 1 つだけでも配列で返します

getAll でもキー指定が必要で本当に全部のパラメータを取得することはできません
その用途だと entries か toString を使います

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

params.getAll("a")
// ["3", "1", "2"]

params.getAll("b")
// ["0"]

toString

最終的にビルドした結果を取得するときに使います

sort

キーの順を昇順に並び替えます
配列メソッドと違ってコールバックで制御はできません

URL を正規化してキャッシュしやすくしたりする目的で使えます

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

keys/values/entries

各種イテレータを返します

const params = new URLSearchParams("a=3&b=0&a=1&c=2")
;[...params.keys()]
// ["a", "b", "a", "c"]

;[...params.values()]
// ["3", "0", "1", "2"]

;[...params.entries()]
// [ ["a", "3"], ["b", "0"], ["a", "1"], ["c", "2"] ]