--- title: URL API slug: Web/API/URL_API translation_of: Web/API/URL_API --- <p>{{DefaultAPISidebar("URL API")}}</p> <p>URL API是一个URL标准的组件,它定义了有效的{{Glossary("URL", "Uniform Resource Locator")}}和访问、操作URL的API。URL标准还定义了像域名、主机和IP地址等概念,并尝试以标准的方式去描述用于以键/值对的形式提交web表单内容的遗留<code>application/x-www-form-urlencoded</code> {{Glossary("MIME type")}} 。</p> <h2 id="URL的概念和用法">URL的概念和用法</h2> <p>URL标准的主要内容是由URL的定义以及它的结构和解析方式决定的。还介绍了与网络上计算机寻址有关的各种术语的定义,并指定了解析IP地址和DOM地址的算法。大多数开发人员更感兴趣的是API本身。</p> <h3 id="使用URL组件">使用URL组件</h3> <p>给指定的URL创建一个 {{domxref("URL")}} 对象将解析URL并通过其属性对其组成部分的快速访问。</p> <pre class="brush: js notranslate">let addr = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL_API"); let host = addr.host; let path = addr.pathname; </pre> <p>上面的代码片段为您正在阅读的文章创建一个<code>URL</code>对象,然后获取 {{domxref("URL.host", "host")}} 和 {{domxref("URL.pathname", "pathname")}} 属性。在本例中,这些字符串的值分别是<code>developer.mozilla.org</code> 和<code>/en-US/docs/Web/API/URL_API</code>。</p> <h3 id="修改URL">修改URL</h3> <p><code>URL</code>对象的大部分属性都是可设置的;您可以向它们写入新值来更改对象所表示的URL。例如,要创建一个URL对象并设置它的用户名:</p> <pre class="brush: js notranslate">let myUsername = "someguy"; let addr = new URL("https://mysite.com/login"); addr.username = myUsername; </pre> <p>设置 {{domxref("URL.username", "username")}} 值不仅是设置该属性的值,而且更新整个URL。执行上面的代码片段后, {{domxref("URL.href", "addr.href")}} 的返回值是<code>https://someguy@mysite.com/login</code>。对于任何可写属性都是如此。</p> <h3 id="查询">查询</h3> <p> {{domxref("URL.search", "search")}} 属性在URL上包含URL的查询字符串部分。例如,如果URL是<code>https://mysite.com/login?user=someguy&page=news</code>,那么<code>search</code> 属性的值是<code>?user=someguy&page=news</code>。您还可以使用 {{domxref("URLSearchParams")}} 对象的 {{domxref("URLSearchParams.get", "get()")}} 查找单个参数的值:</p> <pre class="notranslate">let addr = new URL("https://mysite.com/login?user=someguy&page=news"); try { loginUser(addr.searchParams.get("user")); gotoPage(addr.searchParams.get("page")); } catch(err) { showErrorMessage(err); }</pre> <p>例如,在上面的代码片段中,从查询中提取用户名和目标页面,并将其传递给适当的函数,站点代码使用这些函数登录并将用户路由到站点的目的页面。</p> <p><code>URLSearchParams</code>中的其他函数允许修改改、添加和删除键和值,甚至对参数列表进行排序。</p> <h2 id="URL_API_接口">URL API 接口</h2> <p>URL API是一个简单的API,它的名字只有几个接口:</p> <div class="index"> <ul> <li></li> <li><a href="/zh-CN/docs/Web/API/URL"><code>URL</code></a></li> <li><a href="/zh-CN/docs/Web/API/URLSearchParams"><code>URLSearchParams</code></a></li> <li></li> </ul> </div> <p>该规范的旧版本包括一个名为{{domxref("URLUtilsReadOnly")}}的接口,该接口已经合并到{{domxref("WorkerLocation")}} 接口中。</p> <h2 id="例子">例子</h2> <p>如果希望处理URL中包含的参数,可以手动进行处理,但是创建一个URL对象更容易。下面的<code>fillTableWithParameters()</code>函数接受一个表示{{HTMLElement("table")}}的 {{domxref("HTMLTableElement")}} 对象作为输入。将行添加到表中,每个行对应参数中找到的键,第一列包含键,第二列包含值。</p> <p>注意,在生成表之前调用 {{domxref("URLSearchParams.sort()")}} 对参数列表进行排序。</p> <pre class="brush: js notranslate">function fillTableWithParameters(tbl) { let url = new URL(document.location.href); url.searchParams.sort(); let keys = url.searchParams.keys(); for (let key of keys) { let val = url.searchParams.get(key); let row = document.createElement("tr"); let cell = document.createElement("td"); cell.innerText = key; row.appendChild(cell); cell = document.createElement("td"); cell.innerText = val; row.appendChild(cell); tbl.appendChild(row); }; }</pre> <p>在 <a href="https://url-api.glitch.me/">found on Glitch</a>上可以找到这个例子的工作版本。只要在加载页面时向URL添加参数,就可以在表中看到它们。例如,试试<code><a href="https://url-api.glitch.me/?from=mdn&excitement=high&likelihood=inconceivable">https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable</a></code>。</p> <h2 id="规范">规范</h2> <table class="standard-table"> <tbody> <tr> <th scope="col">规范</th> <th scope="col">状态</th> <th scope="col">描述</th> </tr> <tr> <td>{{SpecName('URL')}}</td> <td>{{Spec2('URL')}}</td> <td>WHATWG 规范</td> </tr> </tbody> </table> <h2 id="浏览器兼容性">浏览器兼容性</h2> <div> <p>{{Compat("api.URL")}}</p> </div> <h2 id="另见">另见</h2> <ul> <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> <li>CSS {{cssxref("<url>")}} type</li> </ul>