---
title: URL
slug: Web/API/URL
translation_of: Web/API/URL
---
<div>{{APIRef("URL API")}}</div>

<p><strong><code>URL</code></strong>接口用于解析，构造，规范化和编码 {{glossary("URL", "URLs")}}。 它通过提供允许您轻松阅读和修改URL组件的属性来工作。 通常，通过在调用URL的构造函数时将URL指定为字符串或提供相对URL和基本URL来创建新的URL对象。 然后，您可以轻松读取URL的已解析组成部分或对URL进行更改。</p>

<p>如果浏览器尚不支持{{domxref("URL.URL", "URL()")}}构造函数，则可以使用{{domxref("Window")}}中的{{domxref("Window.URL")}}属性。 确保检查您的任何目标浏览器是否要求对此添加前缀。</p>

<p>{{AvailableInWorkers}}</p>

<h2 id="构造器">构造器</h2>

<dl>
 <dt>{{domxref("URL.URL", "new URL()")}}</dt>
 <dd>创建并返回一个<code>URL</code>对象，该URL对象引用使用绝对URL字符串，相对URL字符串和基本URL字符串指定的URL。</dd>
</dl>

<h2 id="属性">属性</h2>

<dl>
 <dt>{{domxref("URL.hash", "hash")}}</dt>
 <dd>包含<code>'#'</code>的{{domxref("USVString")}}，后跟URL的片段标识符。</dd>
 <dt>{{domxref("URL.host", "host")}}</dt>
 <dd>一个{{domxref("USVString")}}，其中包含域（即主机名），后跟（如果指定了端口）“：”和URL的端口。</dd>
 <dt>{{domxref("URL.hostname", "hostname")}}</dt>
 <dd>包含 URL 域名的 {{domxref("USVString")}}。</dd>
 <dt>{{domxref("URL.href", "href")}}</dt>
 <dd>包含完整 URL 的 {{domxref("USVString")}}。</dd>
 <dt>{{domxref("URL.origin", "origin")}} {{readonlyInline}}</dt>
 <dd>返回一个包含协议名、域名和端口号的 {{domxref("USVString")}}。</dd>
 <dt>{{domxref("URL.password", "password")}}</dt>
 <dd>包含在域名前面指定的密码的  {{domxref("USVString")}} 。</dd>
 <dt>{{domxref("URL.pathname", "pathname")}}</dt>
 <dd>以 '/' 起头紧跟着 URL 文件路径的 {{domxref("DOMString")}}。</dd>
 <dt>{{domxref("URL.port", "port")}}</dt>
 <dd>包含 URL 端口号的 {{domxref("USVString")}}。</dd>
 <dt>{{domxref("URL.protocol", "protocol")}}</dt>
 <dd>包含 URL 协议名的 {{domxref("USVString")}}，末尾带 <code>':'。</code></dd>
 <dt>{{domxref("URL.search", "search")}}</dt>
 <dd>一个{{domxref("USVString")}} ，指示URL的参数字符串； 如果提供了任何参数，则此字符串包括所有参数，并以开头的“？”开头 字符。</dd>
 <dt>{{domxref("URL.searchParams", "searchParams")}} {{readonlyInline}}</dt>
 <dd>{{domxref("URLSearchParams")}}对象，可用于访问<code>search</code>中找到的各个查询参数。</dd>
 <dt>{{domxref("URL.username","username")}}</dt>
 <dd>包含在域名前面指定的用户名的 {{domxref("USVString")}}。</dd>
</dl>

<dl>
</dl>

<h2 id="方法">方法</h2>

<dl>
 <dt>{{domxref("URL.toString", "toString()")}}</dt>
 <dd>返回包含整个URL的{{domxref("USVString")}}。 它是{{domxref("URL.href")}}的同义词，尽管它不能用于修改值。</dd>
 <dt>{{domxref("URL.toJSON", "toJSON()")}}</dt>
 <dd>返回包含整个URL的{{domxref("USVString")}}。 它返回与<code>href</code>属性相同的字符串。</dd>
</dl>

<h2 id="静态方法">静态方法</h2>

<dl>
 <dt>{{domxref("URL.createObjectURL", "createObjectURL()")}}</dt>
 <dd>返回一个{{domxref("DOMString")}} ，包含一个唯一的blob链接（该链接协议为以blob:，后跟唯一标识浏览器中的对象的掩码）。</dd>
 <dt>{{domxref("URL.revokeObjectURL", "revokeObjectURL()")}}</dt>
 <dd>销毁之前使用{{ domxref("URL.createObjectURL()") }}方法创建的URL实例。</dd>
</dl>

<h2 id="使用说明">使用说明</h2>

<p>如果<code>url</code>参数是相对URL，则构造函数将使用<code>url</code>参数和可选的<code>base</code>参数作为基础。</p>

<pre>const url = new URL('../cats', 'http://www.example.com/dogs');
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"
</pre>

<p>可以设置URL属性以构造URL：</p>

<pre>url.hash = 'tabby';
console.log(url.href); // "http://www.example.com/cats#tabby"
</pre>

<p>URL根据 {{RFC(3986)}}中的规则进行编码。 例如：</p>

<pre>url.pathname = 'démonstration.html';
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
</pre>

<p>{{domxref("URLSearchParams")}}接口可用于构建和处理URL查询字符串。</p>

<p>要从当前窗口的URL获取搜索参数，可以执行以下操作：</p>

<pre>// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"
</pre>

<p>URL的{{domxref("URL.toString", "toString()")}}方法仅返回{{domxref("URL.href", "href")}} 属性的值，因此构造函数可以 用于直接对URL进行规范化和编码。</p>

<pre>const response = await fetch(new URL('http://www.example.com/démonstration.html'));</pre>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('File API', '#creating-revoking', 'URL')}}</td>
   <td>{{Spec2('File API')}}</td>
   <td>Added the static methods <code>URL.createObjectURL()</code> and <code>URL.revokeObjectURL</code><code>()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('URL', '#api', 'Node')}}</td>
   <td>{{Spec2('URL')}}</td>
   <td>Initial definition (implements <code>URLUtils</code>).</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.URL")}}</p>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/URL_API">URL API</a></li>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></li>
 <li>Property to obtain a <code>URL</code> object: {{domxref("Window.URL")}}.</li>
 <li>{{domxref("URLSearchParams")}}.</li>
</ul>