diff options
Diffstat (limited to 'files/zh-cn/web/api/urlsearchparams/index.html')
| -rw-r--r-- | files/zh-cn/web/api/urlsearchparams/index.html | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/urlsearchparams/index.html b/files/zh-cn/web/api/urlsearchparams/index.html new file mode 100644 index 0000000000..0c21454e54 --- /dev/null +++ b/files/zh-cn/web/api/urlsearchparams/index.html @@ -0,0 +1,125 @@ +--- +title: URLSearchParams +slug: Web/API/URLSearchParams +tags: + - URL API + - URLSearchParams +translation_of: Web/API/URLSearchParams +--- +<p>{{ApiRef("URL API")}}</p> + +<p><strong><code>URLSearchParams</code></strong> 接口定义了一些实用的方法来处理 URL 的查询字符串。</p> + +<p>一个实现了 <code>URLSearchParams</code> 的对象可以直接用在 {{jsxref("Statements/for...of", "for...of")}} 结构中,例如下面两行是相等的:</p> + +<pre class="brush: js">for (const [key, value] of mySearchParams) {} +for (const [key, value] of mySearchParams.entries()) {}</pre> + +<p>{{availableinworkers}}</p> + +<h2 id="构造函数">构造函数</h2> + +<dl> + <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt> + <dd>返回一个 <code>URLSearchParams </code>对象。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<p>该接口不继承任何属性。</p> + +<dl> + <dt>{{domxref("URLSearchParams.append()")}}</dt> + <dd> 插入一个指定的键/值对作为新的搜索参数。</dd> + <dt>{{domxref("URLSearchParams.delete()")}}</dt> + <dd> 从搜索参数列表里删除指定的搜索参数及其对应的值。</dd> + <dt>{{domxref("URLSearchParams.entries()")}}</dt> + <dd> 返回一个{{jsxref("Iteration_protocols","iterator")}}可以遍历所有键/值对的对象。</dd> + <dt>{{domxref("URLSearchParams.get()")}}</dt> + <dd> 获取指定搜索参数的第一个值。</dd> + <dt>{{domxref("URLSearchParams.getAll()")}}</dt> + <dd> 获取指定搜索参数的所有值,返回是一个数组。</dd> + <dt>{{domxref("URLSearchParams.has()")}}</dt> + <dd> 返回 {{jsxref("Boolean")}} 判断是否存在此搜索参数。</dd> + <dt>{{domxref("URLSearchParams.keys()")}}</dt> + <dd>返回{{jsxref("Iteration_protocols", "iterator")}} 此对象包含了键/值对的所有键名。</dd> + <dt>{{domxref("URLSearchParams.set()")}}</dt> + <dd> 设置一个搜索参数的新值,假如原来有多个值将删除其他所有的值。</dd> + <dt>{{domxref("URLSearchParams.sort()")}}</dt> + <dd> 按键名排序。</dd> + <dt>{{domxref("URLSearchParams.toString()")}}</dt> + <dd> 返回搜索参数组成的字符串,可直接使用在URL上。</dd> + <dt>{{domxref("URLSearchParams.values()")}}</dt> + <dd> 返回{{jsxref("Iteration_protocols", "iterator")}} 此对象包含了键/值对的所有值。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">var paramsString = "q=URLUtils.searchParams&topic=api" +var searchParams = new URLSearchParams(paramsString); + +for (let 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"</pre> + +<h3 id="Gotchas">Gotchas</h3> + +<p><code>URLSearchParams</code> 构造函数<em>不会</em>解析完整 URL,但是如果字符串起始位置有 <code>?</code> 的话会被去除。</p> + +<pre class="brush: js">var paramsString1 = "http://example.com/search?query=%40"; +var searchParams1 = new URLSearchParams(paramsString1); + +searchParams1.has("query"); // false +searchParams1.has("http://example.com/search?query"); // true + +searchParams1.get("query"); // null +searchParams1.get("http://example.com/search?query"); // "@" (equivalent to decodeURIComponent('%40')) + +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</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}</td> + <td>{{Spec2('URL')}}</td> + <td>初次定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.URLSearchParams")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>The {{domxref("URL")}} interface.</li> + <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li> +</ul> |
