概述

JavaScript 中的 URL 对象提供了一种轻松使用和操作 URL 的方法。当您需要在代码中构造、解析或修改 URL 时，它特别有用。

很多时候使用模板字符串来在 JavaScript 中创建 URL。通常这很简单且足够清晰，但 URL 对象是处理 URL 的更强大的 OOP 方法。

甚至 OpenWeatherMap.org 在其文档中也使用模板字符串：https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API key }

对于相当静态的 URL，这很好，但是如果您想更改此 URL，您可能需要考虑使用 URL 对象。

// Using template strings
const lat = 32.087;
const lon = 34.801;
const apiKey = 'your_api_key';
const url = `https://api.openweathermap.org/data/3.0/onecall?lat=${lat}&lon=${lon}&appid=${apiKey}`;

// Using the URL object
const openWeatherUrl = new URL('https://api.openweathermap.org/data/3.0/onecall');
openWeatherUrl.searchParams.set('lat', lat);
openWeatherUrl.searchParams.set('lon', lon);
openWeatherUrl.searchParams.set('appid', apiKey);

基本用法

您可以通过将 URL 字符串传递给其构造函数来创建新的 URL 对象。

在这种情况下（与上面相反），整个 URL 与各个部分一起传入：

const url = new URL('https://example.com:8080/path?query=123#section');

特性

URL 对象有几个属性，您可以使用它们来访问 URL 的各个部分：

• href：字符串形式的完整 URL。
• 协议：协议（例如 https:)。
• 主机名：域名（例如 example.com）。
• port：端口号（例如 8080）。
• 路径名：域名后面的路径（例如/path）。
• search：查询字符串，包括？ （例如？query=123）。
• hash：片段标识符，包括#（例如#section）。
• 主机：主机名和端口组合（例如 example.com:8080）。
• origin：URL 的来源，即协议、主机名和端口。

> const url = new URL('https://example.com:8080/path?query=123#section');
> url.port
'8080'
> url.protocol
'https:'
> url.hostname
'example.com'
> url.pathname
'/path'
> url.search
'?query=123'
> url.hash
'#section'
> url.host
'example.com:8080'

这些也可用于更改 URL 的不同部分？:

> url.port = 1234
1234
> url.pathname = "differentpath"
'differentpath'
> url.hostname = "example.org"
'example.org'
> url
URL {
  href: 'https://example.org:1234/differentpath?query=123#section',
  origin: 'https://example.org:1234',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'example.org:1234',
  hostname: 'example.org',
  port: '1234',
  pathname: '/differentpath',
  search: '?query=123',
  searchParams: URLSearchParams { 'query' => '123' },
  hash: '#section'
}

方法

URL对象还有一些方法来帮助修改URL并与URL交互。

例如，URL 搜索参数 是一个键值对，用于通知 API 服务器详细信息以服务用户。

url.searchParams：返回 URLSearchParams 对象，该对象提供使用查询字符串参数的方法。你可以：

获取查询参数：url.searchParams.get('query')
设置查询参数： url.searchParams.set('query', '456')
删除查询参数： url.searchParams.delete('query')

迭代查询参数：

url.searchParams.forEach((value, key) => {
  console.log(key, value);
});

toString()：以字符串形式返回完整 URL，反映对属性或查询参数所做的任何更改。

开放天气图 API 示例

以下是 OpenWeatherMap 的文档：https://openweathermap.org/api/one-call-3

这是一个简单的示例，展示了如何创建 URL 对象并操作其各个部分：

// get values to interpolate to URL
const apiKey = process.env.openWeatherApiKey || 0
const [lat, lon] = [32.08721095615897, 34.801588162316506]

const openWeatherUrl = new URL("https://api.openweathermap.org")

openWeatherUrl.pathname = "data/3.0/onecall"
openWeatherUrl.searchParams.set('lat',lat)
openWeatherUrl.searchParams.set('lon',lon)

// from the docs
openWeatherUrl.searchParams.set('exclude', 'hourly')

openWeatherUrl.searchParams.set('appid', apiKey)

console.log(openWeatherUrl)

输出：

URL {
  href: 'https://api.openweathermap.org/data/3.0/onecall?lat=32.08721095615897&lon=34.801588162316506&exclude=hourly&appid=0',
  origin: 'https://api.openweathermap.org',
  protocol: 'https:',
  username: '',
  password: '',
  host: 'api.openweathermap.org',
  hostname: 'api.openweathermap.org',
  port: '',
  pathname: '/data/3.0/onecall',
  search: '?lat=32.08721095615897&lon=34.801588162316506&exclude=hourly&appid=0',
  searchParams: URLSearchParams {
    'lat' => '32.08721095615897',
    'lon' => '34.801588162316506',
    'exclude' => 'hourly',
    'appid' => '0' },
  hash: ''
}

概括

JavaScript 中的 URL 对象提供了一种处理 URL 的结构化方法，允许轻松操作和构建复杂的 URL。虽然模板字符串对于静态 URL 来说简单且有效，但 URL 对象对于 URL 是动态的或需要频繁修改的情况来说是理想的选择。

照片由 Anne Nygård 在 Unsplash 上拍摄