BLOG

JavaScriptで取得するGETの値

| JavaScript

JavaScriptでURLから?の値を取得する場合は以前は取得した数値を扱うのに
下記のように文字列を分割してそれをforeachなどで回して扱うイメージでしたが

const search = window.location.search
const words = search.split('&')
words.forEach((item, i)=>{
  console.log(item)
})

最近はなんか簡単になっていたのでメモメモ!

const searchParams = new URLSearchParams(window.location.search)

これで、値を取得するのも、有無も簡単にできる。

有無を確認する場合はhas
値を取得する場合はget
扱うことができる。

// URLが https://example.com/search?aaa=100&bbb=200 の場合
console.log(searchParams.has('aaa')) //=> ture
console.log(searchParams.get('aaa')) //=> 100

ね!すごく簡単です!

.toString() もあって、 window.location.search と同じ値が取得できるらしい
.append() .set() .delete() とかもあって値をいじれるようです。

console.log(searchParams.toString()) //=> aaa=100&bbb=200
console.log(searchParams.append('ccc', 300)) // 追加
console.log(searchParams.set('bbb', 250))    // 書き換え
console.log(searchParams.delete('ccc'))      // 削除

new URLSearchParamsを使うといろいろできることがわかりました。
使いやすくなったので今後もうまく使っていきます。

RECENT POSTS

WordPressでIDから本文を取得する

[PHP] 配列内の空白を削除「array_filter」「array_diff」

[PHP] 配列内の同じ値をまとめる「array_unique」

WordPressのカスタムフィールドでソートする

連想配列から特定の値を取得して配列にいれちゃうってやつ

JavaScriptで取得するGETの値

【CSS】text-decorationのカスタマイズができるの知ってた?

CSSでフッターの下に隙間ができないように調整する

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

CATEGORY

POPULAR POSTS

PAGE TOP