diff --git a/files/ja/web/api/urlsearchparams/delete/index.md b/files/ja/web/api/urlsearchparams/delete/index.md index 9b204c685e3b8f..b48b97456ad6af 100644 --- a/files/ja/web/api/urlsearchparams/delete/index.md +++ b/files/ja/web/api/urlsearchparams/delete/index.md @@ -1,43 +1,106 @@ --- -title: URLSearchParams.delete() +title: "URLSearchParams: delete() メソッド" +short-title: delete() slug: Web/API/URLSearchParams/delete +l10n: + sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb --- {{ApiRef("URL API")}} -{{domxref("URLSearchParams")}} インターフェイスの **`delete()`** メソッドは、すべての検索パラメーターのリストから、指定された検索パラメーターとそれに関連するすべての値を削除します。 +**`delete()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、すべての検索パラメーターのリストから、指定された検索パラメーターとそれに関連するすべての値を削除します。 -{{availableinworkers}} +パラメーター名とオプションの値は、パラメーターの照合に使用されます。 +パラメーター名のみが指定された場合、その名前に一致するすべての検索パラメーターが、関連する値とともに削除されます。 +パラメーター名と値の両方が指定された場合、パラメーター名と値の両方に一致するすべての検索パラメーターが削除されます。 + +{{AvailableInWorkers}} ## 構文 -``` -URLSearchParams.delete(name) +```js-nolint +delete(name) +delete(name, value) ``` -### パラメーター +### 引数 -- name +- `name` - : 削除するパラメーターの名前。 +- `value` {{optional_inline}} + - : パラメーターを削除するために、指定された名前とともにパラメーターが一致しなければならない値。 -### 戻り値 +### 返値 -無効 +なし ({{jsxref("undefined")}})。 ## 例 +### 指定された名前のすべてのパラメーターを削除 + +この例では、特定の名前を持つクエリーパラメーター(および値)をすべて削除する方法を示します。 + +```html hidden +
+``` + +```js hidden +const logElement = document.getElementById("log"); +function log(text) { + logElement.innerText += `${text}\n`; +} +``` + ```js -let url = new URL('https://example.com?foo=1&bar=2&foo=3'); -let params = new URLSearchParams(url.search.slice(1)); +const url = new URL("https://example.com?foo=1&bar=2&foo=3"); +const params = new URLSearchParams(url.search); +log(`Query string (before):\t ${params}`); +params.delete("foo"); +log(`Query string (after):\t ${params}`); +``` + +以下のログは、`foo` という名前を持つパラメータがすべて削除されていることを示しています。 + +{{EmbedLiveSample('Delete all parameters with specified name', '100%', '50')}} + +### 指定した名前と値を持つパラメーターの削除 -// foo パラメーターを削除します。 -params.delete('foo'); // クエリー文字列は現在: 'bar=2' +この例では、特定の名前と値に一致するクエリーパラメーターを削除する方法を示します。 + +```html hidden + +``` + +```js hidden +const logElement = document.getElementById("log"); +function log(text) { + logElement.innerText += `${text}\n`; +} +``` + +```js +const url = new URL("https://example.com?foo=1&bar=2&foo=3&foo=1"); +const params = new URLSearchParams(url.search); +log(`Query string (before):\t ${params}`); +params.delete("foo", "1"); +log(`Query string (after):\t ${params}`); ``` -## 仕様 +パラメーターの `name` と `value` の両方が一致するパラメーターがすべて削除されるはずです(上記のように、同じ名前と値を持つパラメーターを 2 つ指定する理由はありません)。 + +{{EmbedLiveSample('Delete parameters with specified name and value', '100%', '50')}} + +ブラウザーが `value` オプションに対応している場合、"after" の文字列は `bar=2&foo=3` となります。 +そうでない場合、結果は前の例 (`bar=2`) と同じになります。 + +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.URLSearchParams.delete")}} +{{Compat}} + +## 関連情報 + +- [`URLSearchParams` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams) diff --git a/files/ja/web/api/urlsearchparams/has/index.md b/files/ja/web/api/urlsearchparams/has/index.md index 1fb9c83ea7526a..d41956fe6ca514 100644 --- a/files/ja/web/api/urlsearchparams/has/index.md +++ b/files/ja/web/api/urlsearchparams/has/index.md @@ -1,42 +1,109 @@ --- -title: URLSearchParams.has() +title: "URLSearchParams: has() メソッド" +short-title: has() slug: Web/API/URLSearchParams/has +l10n: + sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb --- {{ApiRef("URL API")}} -{{domxref("URLSearchParams")}} インターフェイスの **`has()`** メソッドは、指定された名前のパラメーターが存在するかどうかを示す {{jsxref("Boolean")}} を返します。 +**`has()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドは、指定された名前のパラメーターが存在するかどうかを示す論理値を返します。 -{{availableinworkers}} +パラメーター名とオプションの値は、パラメーターの照合に使用されます。 +パラメーター名のみが指定された場合、このメソッドはクエリー文字列内のいずれかのパラメーターがその名前と一致した場合に `true` を返し、それ以外の場合は `false` を返します。 +パラメーター名と値の両方が指定された場合、あるパラメーターの名前と値の両方が一致した場合に `true` を返します。 + +{{AvailableInWorkers}} ## 構文 -``` -var hasName = URLSearchParams.has(name) +```js-nolint +has(name) +has(name, value) ``` -### パラメーター +### 引数 -- name - - : 検索するパラメーターの名前。 +- `name` + - : 照合するパラメーターの名前です。 +- `value` + - : パラメーターの値で、指定された名前と一緒に照合されます。 -### 戻り値 +### 返値 -{{jsxref("Boolean")}}。 +論理値です。 ## 例 +### 指定された名前のパラメーターをチェック + +この例では、クエリー文字列に特定の名前のパラメーターがあるかどうかをチェックする方法を示します。 + +```html hidden + +``` + +```js hidden +const logElement = document.getElementById("log"); +function log(text) { + logElement.innerText += `${text}\n`; +} +``` + ```js -let url = new URL('https://example.com?foo=1&bar=2'); -let params = new URLSearchParams(url.search.slice(1)); +const url = new URL("https://example.com?foo=1&bar=2&foo=3"); +const params = new URLSearchParams(url.search); -params.has('bar') === true; // true +// has() はそのパラメーターがクエリー文字列にある場合に true を返す +log(`bar?:\t${params.has("bar")}`); +log(`bark?:\t${params.has("bark")}`); +log(`foo?:\t${params.has("foo")}`); ``` -## 仕様 +以下のログは、パラメーター `bar`、`bark`、`foo` がクエリー文字列内に存在するかどうかを示しています。 + +{{EmbedLiveSample('Check for parameter with specified name', '100%', '80')}} + +### 指定された名前と値を持つパラメーターをチェック + +この例では、クエリー文字列に特定の名前と値の両方が一致するパラメーターがあるかどうかをチェックする方法を示します。 + +```html hidden + +``` + +```js hidden +const logElement = document.getElementById("log"); +function log(text) { + logElement.innerText += `${text}\n`; +} +``` + +```js +const url = new URL("https://example.com?foo=1&bar=2&foo=3"); +const params = new URLSearchParams(url.search); + +// has() は、一致する名前と値を持つパラメーターがクエリー文字列内にある場合に true を返します。 +log(`bar=1?:\t${params.has("bar", "1")}`); +log(`bar=2?:\t${params.has("bar", "2")}`); +log(`foo=4?:\t${params.has("foo", "4")}`); +``` + +パラメーター名が `bar` で値が `2` のもののみが一致するので、上記の 2 番目の値のみが `true` になるはずです。 + +{{EmbedLiveSample('Check for parameter with specified name and value', '100%', '80')}} + +ブラウザーが `value` オプションに対応していない場合、このメソッドは名前に一致し、結果はすべて `true` になるはずです。 + +## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("api.URLSearchParams.has")}} +{{Compat}} + +## 関連情報 + +- [`URLSearchParams` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams) diff --git a/files/ja/web/api/urlsearchparams/index.md b/files/ja/web/api/urlsearchparams/index.md index c6393684ca8f67..f8f29bc445377e 100644 --- a/files/ja/web/api/urlsearchparams/index.md +++ b/files/ja/web/api/urlsearchparams/index.md @@ -1,17 +1,21 @@ --- title: URLSearchParams slug: Web/API/URLSearchParams +l10n: + sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb --- {{ApiRef("URL API")}} **`URLSearchParams`** インターフェイスは URL のクエリー文字列の操作に役立つメソッドを定義します。 -`URLSearchParams` を実装するオブジェクトは 直接 {{jsxref("Statements/for...of", "for...of")}} で使うことができます。例えば次の 2 行は等価です。 +`URLSearchParams` を実装しているオブジェクトは、{{jsxref("Statements/for...of", "for...of")}} 構造の中で直接使用して、キーと値のペアをクエリー文字列に現れるのと同じ順序で反復処理することができます。例えば次の 2 行は等価です。 ```js -for (const [key, value] of mySearchParams) {} -for (const [key, value] of mySearchParams.entries()) {} +for (const [key, value] of mySearchParams) { +} +for (const [key, value] of mySearchParams.entries()) { +} ``` {{availableinworkers}} @@ -21,77 +25,144 @@ for (const [key, value] of mySearchParams.entries()) {} - {{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}} - : `URLSearchParams` オブジェクトを返すコンストラクターです。 -## メソッド +## インスタンスプロパティ + +- {{domxref("URLSearchParams.size", 'size')}} + - : 検索パラメーター項目の総数を示します。 + +## インスタンスメソッド - {{domxref("URLSearchParams.append()")}} - : 指定されたキーと値のペアを新しい検索パラメーターとして追加します。 - {{domxref("URLSearchParams.delete()")}} - - : 指定された検索パラメーターとその値を、検索パラメーターのリストからすべて削除します。 + - : 指定された名前と値に一致する検索パラメーターを、検索パラメーターのリストからすべて削除します。 - {{domxref("URLSearchParams.entries()")}} - - : このオブジェクトに含まれるすべてのキーと値のペアを列挙するための {{jsxref("Iteration_protocols","iterator")}} を返します。 + - : このオブジェクトに含まれるすべてのキーと値のペアを、クエリー文字列に現れるのと同じ順序で反復処理することができる{{jsxref("Iteration_protocols","イテレーター")}}を返します。 - {{domxref("URLSearchParams.forEach()")}} - - : コールバック関数を介して、このオブジェクトに含まれるすべての値を列挙します。 + - : コールバック関数を介して、このオブジェクトに含まれるすべての値を反復処理します。 - {{domxref("URLSearchParams.get()")}} - : 指定された検索パラメーターに対応する最初の値を返します。 - {{domxref("URLSearchParams.getAll()")}} - : 指定された検索パラメーターに対応するすべての値を返します。 - {{domxref("URLSearchParams.has()")}} - - : 指定された検索パラメーターが存在するかを表す {{jsxref("Boolean")}} 値を返します。 + - : 指定されたパラメーター、またはパラメーターと値のペアが存在するかどうかを示す論理値を返します。 - {{domxref("URLSearchParams.keys()")}} - - : このオブジェクトに含まれるすべてのキーと値のペアの**キー**を列挙する {{jsxref("Iteration_protocols", "iterator")}} を返します。 + - : このオブジェクトに含まれるすべてのキーと値のペアのキーを反復処理する {{jsxref("Iteration_protocols", "イテレーター")}}を返します。 - {{domxref("URLSearchParams.set()")}} - - : 指定された検索パラメーターに対応する値を設定します。複数の値が存在していた場合、それらは削除されます。 + - : 指定された検索パラメーターに結び付けられた値を指定された値に設定します。複数の値が存在していた場合、他のものは削除されます。 - {{domxref("URLSearchParams.sort()")}} - : すべてのキーと値のペアを、キーを基準にソートします。 - {{domxref("URLSearchParams.toString()")}} - : URL で使用するのに適したクエリー文字列を返します。 - {{domxref("URLSearchParams.values()")}} - - : このオブジェクトに含まれるすべてのキーと値のペアの**値**を列挙する {{jsxref("Iteration_protocols", "iterator")}} を返します。 + - : このオブジェクトに含まれるすべてのキーと値のペアの値を反復処理する {{jsxref("Iteration_protocols", "イテレーター")}}を返します。 ## 例 ```js -var paramsString = "q=URLUtils.searchParams&topic=api"; -var searchParams = new URLSearchParams(paramsString); +const paramsString = "q=URLUtils.searchParams&topic=api"; +const searchParams = new URLSearchParams(paramsString); -// 検索パラメーターを列挙する -for (let p of searchParams) { +// 検索パラメーターの列挙 +for (const p of searchParams) { console.log(p); } -searchParams.has("topic") === true; // true -searchParams.get("topic") === "api"; // true -searchParams.getAll("topic"); // ["api"] -searchParams.get("foo") === null; // true -searchParams.append("topic", "webdev"); -searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev" -searchParams.set("topic", "More webdev"); -searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev" -searchParams.delete("topic"); -searchParams.toString(); // "q=URLUtils.searchParams" +console.log(searchParams.has("topic")); // true +console.log(searchParams.has("topic", "fish")); // false +console.log(searchParams.get("topic") === "api"); // true +console.log(searchParams.getAll("topic")); // ["api"] +console.log(searchParams.get("foo") === null); // true +console.log(searchParams.append("topic", "webdev")); +console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=api&topic=webdev" +console.log(searchParams.set("topic", "More webdev")); +console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=More+webdev" +console.log(searchParams.delete("topic")); +console.log(searchParams.toString()); // "q=URLUtils.searchParams" +``` + +```js +// 検索パラメーターはオブジェクトにすることもできる +const paramsObj = { foo: "bar", baz: "bar" }; +const searchParams = new URLSearchParams(paramsObj); + +console.log(searchParams.toString()); // "foo=bar&baz=bar" +console.log(searchParams.has("foo")); // true +console.log(searchParams.get("foo")); // "bar" ``` -### コラム +### 重複する検索パラメーター -`URLSearchParams` コンストラクターは完全な URL をパースしません。ただし、先頭に `?` が存在すれば、読み飛ばします。 +```js +const paramStr = "foo=bar&foo=baz"; +const searchParams = new URLSearchParams(paramStr); + +console.log(searchParams.toString()); // "foo=bar&foo=baz" +console.log(searchParams.has("foo")); // true +console.log(searchParams.get("foo")); // bar (最初の値のみを返す) +console.log(searchParams.getAll("foo")); // ["bar", "baz"] +``` + +### URL の解釈なし + +`URLSearchParams` コンストラクターは URL 全体を解釈しません。しかし、文字列から最初の `?` 以降が存在すれば、削除します。 ```js -var paramsString1 = "http://example.com/search?query=%40"; -var searchParams1 = new URLSearchParams(paramsString1); +const paramsString1 = "http://example.com/search?query=%40"; +const searchParams1 = new URLSearchParams(paramsString1); + +console.log(searchParams1.has("query")); // false +console.log(searchParams1.has("http://example.com/search?query")); // true -searchParams1.has("query"); // false -searchParams1.has("http://example.com/search?query"); // true +console.log(searchParams1.get("query")); // null +console.log(searchParams1.get("http://example.com/search?query")); // "@" (decodeURIComponent('%40') と同じ) -searchParams1.get("query"); // null -searchParams1.get("http://example.com/search?query"); // "@" (equivalent to decodeURIComponent('%40')) +const paramsString2 = "?query=value"; +const searchParams2 = new URLSearchParams(paramsString2); +console.log(searchParams2.has("query")); // true + +const url = new URL("http://example.com/search?query=%40"); +const searchParams3 = new URLSearchParams(url.search); +console.log(searchParams3.has("query")); // true +``` -var paramsString2 = "?query=value"; -var searchParams2 = new URLSearchParams(paramsString2); -searchParams2.has("query"); // true +### プラス記号の温存 -var url = new URL("http://example.com/search?query=%40"); -var searchParams3 = new URLSearchParams(url.search); -searchParams3.has("query") // true +`URLSearchParams` コンストラクターはプラス記号 (`+`) をスペースとして解釈します。以下の例では、[16 進エスケープシーケンス](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#16_進エスケープシーケンス) を使って、URL 検索パラメーターに格納する必要のあるバイナリデータ(各バイトが情報を持つ)を含む文字列を模倣しています。`btoa()` でエンコードされた文字列は `+` を含んでおり、 `URLSearchParams` では温存されないことに注意してください。 + +```js +const rawData = "\x13à\x17@\x1F\x80"; +const base64Data = btoa(rawData); // 'E+AXQB+A' + +const searchParams = new URLSearchParams(`bin=${base64Data}`); // 'bin=E+AXQB+A' +const binQuery = searchParams.get("bin"); // 'E AXQB A', '+' はスペースに置き換えられる + +console.log(atob(binQuery) === rawData); // false +``` + +You can avoid this by encoding the data with the {{jsxref("encodeURIComponent", "encodeURIComponent()")}}. + +```js +const rawData = "\x13à\x17@\x1F\x80"; +const base64Data = btoa(rawData); // 'E+AXQB+A' +const encodedBase64Data = encodeURIComponent(base64Data); // 'E%2BAXQB%2BA' + +const searchParams = new URLSearchParams(`bin=${encodedBase64Data}`); // 'bin=E%2BAXQB%2BA' +const binQuery = searchParams.get("bin"); // 'E+AXQB+A' + +console.log(atob(binQuery) === rawData); // true +``` + +### 空の値と値なし + +`URLSearchParams` は `=` の後に何もないパラメーターと、`=` もないパラメーターの区別をしません。 + +```js +const emptyVal = new URLSearchParams("foo=&bar=baz"); +console.log(emptyVal.get("foo")); // returns '' +const noEquals = new URLSearchParams("foo&bar=baz"); +console.log(noEquals.get("foo")); // also returns '' +console.log(noEquals.toString()); // 'foo=&bar=baz' ``` ## 仕様書 @@ -100,9 +171,10 @@ searchParams3.has("query") // true ## ブラウザーの互換性 -{{Compat("api.URLSearchParams")}} +{{Compat}} ## 関連情報 +- [`URLSearchParams` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams) - {{domxref("URL")}} インターフェイス。 -- [Google Developers: URLSearchParams を使用した簡単な URL 操作](https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en) (英語) +- [Google Developers: URLSearchParams を使用した簡単な URL 操作](https://developer.chrome.com/blog/urlsearchparams/) (英語)