📌  相关文章
📜  js 中的 url - Javascript (1)

📅  最后修改于: 2023-12-03 15:16:59.745000             🧑  作者: Mango

JS中的URL

在JavaScript中，我们可以通过使用URL对象来处理URL及其组成部分。

创建URL对象

我们可以使用new URL()构造函数来创建URL对象。例如：

const url = new URL('https://www.example.com/path?query=string#fragment');
console.log(url);

输出结果为：

URL {
  href: 'https://www.example.com/path?query=string#fragment',
  origin: 'https://www.example.com',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'www.example.com',
  hostname: 'www.example.com',
  port: '',
  pathname: '/path',
  search: '?query=string',
  searchParams: URLSearchParams { 'query' => 'string' },
  hash: '#fragment'
}
URL组成部分

URL对象的属性提供了URL组成部分的访问。例如：

console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/path"
console.log(url.searchParams.get("query")); // "string"
修改URL

我们可以使用URL对象的属性来修改URL。例如：

url.protocol = "http:";
url.hostname = "example.org";
url.pathname = "/newpath";
url.searchParams.set("newparam", "newvalue");
console.log(url.href); // "http://example.org/newpath?query=string&newparam=newvalue#fragment"
URLSearchParams

URLSearchParams对象提供了操作URL查询字符串的方法。我们可以使用new URLSearchParams()构造函数来创建URLSearchParams对象。例如：

const params = new URLSearchParams("?query=string&newparam=newvalue");
console.log(params.get("query")); // "string"
console.log(params.get("newparam")); // "newvalue"

我们也可以使用URL对象的searchParams属性访问URL的查询字符串部分。例如：

console.log(url.searchParams.get("query")); // "string"
console.log(url.searchParams.get("newparam")); // "newvalue"

我们可以使用URLSearchParams对象的方法来修改URL的查询字符串。例如：

params.set("newparam", "updatedvalue");
params.append("anotherparam", "anothervalue");
console.log(params.toString()); // "query=string&newparam=updatedvalue&anotherparam=anothervalue"
参考资料