URLSearchParams オブジェクト
導入
URLSearchParams オブジェクトは、URL のクエリ文字列 (?foo=bar など) を表します。これらのキーと値のペアを操作するための一連のメソッドが提供されます。 URL インスタンス オブジェクトの searchParams 属性は、URLSearchParams インスタンス オブジェクトを指します。
URLSearchParams インスタンス オブジェクトは、「for...of」 を使用して走査できます。
for (mySearchParams の const [キー, 値]) {
}
##施工方法
URLSearchParams は、インスタンス オブジェクトを生成するコンストラクターとして使用できます。
const params = 新しい URLSearchParams();
クエリ文字列をパラメータとして受け入れ、対応するインスタンス オブジェクトに変換できます。
const params = 新しい URLSearchParams('?a=1&b=2');
削除できるのはクエリ文字列の先頭にある疑問符「?」だけであり、完全な URL 文字列を解析することはできないことに注意してください。
const paramsString = "http://example.com/search?query=%40";
const params = 新しい URLSearchParams(paramsString);
上記の例では、URLSearchParams はキー名が query ではなく http://example.com/search?query であるとみなします。
キーと値のペアを表すオブジェクトまたは配列をパラメーターとして受け入れることもできます。
// パラメータは配列です
const params3 = 新しい URLSearchParams([
["foo", "1"],
["バー", "2"],
]);
// パラメータはオブジェクトです
const params1 = new URLSearchParams({ foo: "1", bar: "2" });
ブラウザーがフォーム データをサーバーに送信するとき、URLSearchParams インスタンスをフォーム データとして直接使用できます。
const params = 新しい URLSearchParams({foo: 1, bar: 2});
fetch('https://example.com/api', {
メソッド: 'POST'、
本体: パラメータ
}）。それから（...）
上記の例では、fetch がコマンドをサーバーに送信するときに、URLSearchParams インスタンス オブジェクトをデータ本体として直接使用できます。
また、別の URLSearchParams インスタンス オブジェクトをパラメータとして受け入れることもできます。これは、オブジェクトをコピーすることと同じです。
const params1 = 新しい URLSearchParams('?a=1&b=2');
const params2 = 新しい URLSearchParams(params1);
上の例では、「params1」と「params2」は 2 つの同一のインスタンス オブジェクトですが、一方を変更しても他方には影響しません。
URLSearchParams はクエリ文字列を自動的にエンコードします。
const params = new URLSearchParams({'foo': 'Hello'});
params.toString() // "foo=%E4%BD%A0%E5%A5%BD"
上記の例では、「foo」の値は漢字であり、URLSearchParams によって自動的に URL エンコードされます。
キー名にキー値を含めることはできません。この場合、URLSearchParams はキー値が空の文字列と等しいとみなします。
const params1 = 新しい URLSearchParams("foo&bar=baz");
const params2 = 新しい URLSearchParams("foo=&bar=baz");
上記の例では、「foo」は空のキー名であり、その後に等号があるかどうかに関係なく、URLSearchParams はその値を空の文字列とみなします。
##インスタンスメソッド
追加()
append() はクエリのキーと値のペアを追加するために使用されます。同じ名前のキーと値のペアがすでに存在する場合でも、新しいキーと値のペアがクエリ文字列の末尾に追加されます。
最初のパラメータはキー名、2 番目のパラメータはキー値です。使用例を次に示します。
const params = 新しい URLSearchParams('?a=1&b=2');
params.append('a', 3);
params.toString() // 'a=1&b=2&a=3'
上の例では、キー名 a はすでに存在しますが、append() はクエリ文字列の末尾に a=3 を追加します。
消去（）
delete() は、指定された名前のキーと値のペアを削除します。
得る（）
get() は、指定されたキー名に対応するキー値を返します。同じ名前のキーと値のペアが複数ある場合は、最初のキーと値のみを返します。
const params = 新しい URLSearchParams('?a=1&b=2');
params.get('a') // 1
存在しないキーの場合は、「null」を返します。
get() はキー値のプラス記号をスペースに変換することに注意してください。
const params = 新しい URLSearchParams(`c=a+b`);
params.get('c') // 'a b'
上の例では、get() は a+b を a b に変換します。この動作を回避したい場合は、encodeURIComponent() を使用して最初にキー値をエスケープします。
getAll()
getAll() は、指定されたキー名に対応するすべてのキー値を含む配列を返します。
const params = new URLSearchParams('?a=1&b=2&a=3');
params.getAll('a') // [ '1', '3' ]
もっている（）
has() は、指定されたキーが存在するかどうかを示すブール値を返します。
const params = 新しい URLSearchParams('?a=1&b=2');
params.has('a') // true
params.has('c') // false
セット（）
set() はキーと値のペアを設定するために使用されます。同じキー名がすでに存在する場合は、現在の値が置き換えられます。これが append() との違いです。このメソッドは、クエリ文字列を変更するのに適しています。
const params = 新しい URLSearchParams('?a=1&b=2');
params.set('a', 3);
params.toString() // 'a=3&b=2'
上の例では、set() はキー a を変更します。
同じ名前のキーが複数ある場合、set() は既存のキーをすべて削除し、新しいキーと値のペアを追加します。
const params = new URLSearchParams('?foo=1&foo=2');
params.set('foo', 3);
params.toString() // "foo=3"
上の例では 2 つの foo キーがあり、set() はそれらを両方とも削除し、新しい foo キーを追加します。
選別（）
sort() は、キーと値のペアをキー名で (Unicode コード ポイント順に) ソートします。同じ名前のキーと値のペアが存在する場合、それらの順序は変更されません。
const params = new URLSearchParams('?a=1&b=2&a=3');
params.sort();
params.toString() // 'a=1&a=3&b=2'
エントリ()
entries() メソッドは、キー名とキー値を走査するための反復子オブジェクトを返します。
const params = new URLSearchParams("key1=value1&key2=value2");
for (const [key, value] of params.entries()) {
console.log(`${key}, ${value}`);
}
// キー1、値1
// キー2、値2
URLSearchParams インスタンスで「for...of」トラバーサルを直接実行すると、実際には「entries」インターフェースが内部で呼び出されます。
for (パラメータの変数 p) {}
// と同等
for (params.entries() の var p) {}
forEach()
forEach() は、キーと値のペアごとにコールバック関数を順番に実行するために使用されます。
最初のパラメータ callback はコールバック関数で、2 番目のパラメータ thisArg はオプションで、callback に this オブジェクトを設定するために使用されます。
forEach(コールバック)
forEach(コールバック、thisArg)
callback 関数は以下の 3 つのパラメータを受け取ることができます。
- 値: 現在のキーの値。
- key: 現在のキーの名前。
- searchParams: 現在の URLSearchParams インスタンス オブジェクト。
以下に使用例を示します。
const params = new URLSearchParams("key1=value1&key2=value2");
params.forEach((値, キー) => {
console.log(値, キー);
});
// 値1 キー1
// 値2 キー2
キー()
keys() は、すべてのキー名を反復処理するために使用されるイテレータ オブジェクトを返します。
const params = new URLSearchParams("key1=value1&key2=value2");
for (params.keys() の const キー) {
コンソール.ログ(キー);
}
//キー1
//キー2
値()
values() は、すべてのキー値を反復処理するために使用されるイテレータ オブジェクトを返します。
const params = new URLSearchParams("key1=value1&key2=value2");
for (params.values() の定数値) {
console.log(値);
}
// 値1
// 値2
このメソッドは、すべてのキー値を配列に変換するために使用することもできます。
Array.from(params.values()) // ['value1', 'value2']
toString()
toString() は、URLSearchParams インスタンス オブジェクトを文字列に変換するために使用されます。 「window.location.search」とは異なり、疑問符のない文字列を返します。
##インスタンスのプロパティ
サイズ
size は、キーと値のペアの合計数を返す読み取り専用プロパティです。
const params = new URLSearchParams("c=4&a=2&b=3&a=1");
params.size; // 4
上の例では、クエリ文字列に 2 つのキー名 a があり、size はそれらをマージしません。
一意のキー名をカウントしたい場合は、Set 構造を使用できます。
[...new Set(params.keys())].length // 3
size 属性は、特定の URL にクエリ文字列があるかどうかを判断するために使用できます。
const url = 新しい URL("https://example.com?foo=1&bar=2");
if (url.searchParams.size) {
console.log("この URL にはクエリ文字列があります");
}
作者: wangdoc
アドレス: https://wangdoc.com/
ライセンス: クリエイティブ・コモンズ 3.0