1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
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>
<div class="hidden">
<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们发送请求请求。</p>
</div>
<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>
|
