JavaScriptのnew URLSearchParams()について簡単なサンプルコードで解説
8 回閲覧されました
みなさんこんにちは、jonioです。
今回はJavaScriptのnew URLSearchParams()について簡単なサンプルコードで解説します。
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
new URLSearchParams()とは
現在のURLのクエリパラメーターを操作することができます。
クエリパラメーターとは以下になります。
現在URLが https://example.com/search?q=js&tag=web&tag=frontend
クエリパラーメーターは?以降の「q=js&tag=web&tag=frontend」例えば「q=js」の「q」がkeyになります。
クエリパラメーターを操作できるようにする為に下記の記述をします。
現在URLが https://example.com/search?q=js&tag=web&tag=frontend
const params = new URLSearchParams(location.search);「location.search」は「?q=js&tag=web&tag=frontend」の部分です。
次は操作に関する説明です。
取得する場合
クエリパラメーターのkeyの「q」・「tag」に関して取得関連の操作するには下記の記述をすればいいです。
console.log(params.get('q')); // 'js'
console.log(params.getAll('tag')); // ['web', 'frontend']
console.log(params.has('q')); // true「.get(‘クエリパラメーターのkey’)」で1つのクエリパラメーターのkeyに該当する値を取得します。
クエリパラメーターのkeyの「q」に該当する「js」を取得します。
「.getAll(‘クエリパラメーターのkey’)」で複数の同じクエリパラメーターのkeyに該当する値を配列で取得します。
クエリパラメーターのkeyの「tag」に該当するのは「web」と「frontend」なので「[‘web’, ‘frontend’]」を取得します。
「.has(‘クエリパラメーターのkey’)」でクエリパラメーターのkeyが存在するかを判定して存在するならtrueを返して存在しないならfalseを返します。
「q」は存在するので「true」を返します。
変更する場合
クエリパラメーターの「q」・「tag」に関して変更関連の操作するには下記の記述をすればいいです。
params.set('q', 'typescript'); // クエリパラメーターに該当する値の変更
params.append('tag', 'ts'); // 既存のクエリパラメーターに該当する値を追加
params.delete('q'); // 既存のクエリパラメーターを削除する「params.set(‘クエリパラメーターのkey’, ‘該当する値’);」でクエリパラメーターのkeyに該当する値を変更することができます。
「params.append(‘クエリパラメーターのkey’, ‘該当する値’);」でクエリパラメーターのkeyに該当する値を追加することができます。
「params.delete(‘クエリパラメーターのkey’);」でクエリパラメーターのkeyと該当する値を削除します。