Fe Notebook

Appearance

URL ​

在 JavaScript 中，URL 是用于操作和解析 URL 的内置类。它提供了方便的方法和属性来构建、解析和修改 URL。

使用 URL 构造函数创建一个 URL 对象：

javascript
const url = new URL('https://example.com/path?name=John&age=30#section');

URL 对象的属性可以解析出 URL 的各部分。

javascript
const url = new URL('https://example.com:8080/path?name=John&age=30#section');

console.log(url.href);        // 完整 URL: https://example.com:8080/path?name=John&age=30#section
console.log(url.protocol);    // 协议: https:
console.log(url.hostname);    // 主机名: example.com
console.log(url.port);        // 端口号: 8080
console.log(url.pathname);    // 路径: /path
console.log(url.search);      // 查询字符串: ?name=John&age=30
console.log(url.hash);        // 哈希部分: #section
console.log(url.origin);      // 源: https://example.com:8080

修改 URL ​

修改属性 ​

URL 对象的某些属性是可写的，可以直接修改 URL。

javascript
const url = new URL('https://example.com/path');

url.pathname = '/new-path';
url.search = '?query=test';
url.hash = '#new-section';

console.log(url.href); // https://example.com/new-path?query=test#new-section

添加或删除查询参数 ​

通过 URLSearchParams 对象操作查询参数：

javascript
const url = new URL('https://example.com/path?name=John');

// 添加参数
url.searchParams.append('age', '30');

// 修改参数
url.searchParams.set('name', 'Jane');

// 删除参数
url.searchParams.delete('age');

console.log(url.searchParams.toString()); // name=Jane
console.log(url.href); // https://example.com/path?name=Jane

解析相对 URL ​

使用 URL 构造函数处理相对路径：

javascript
const base = new URL('https://example.com/path/');
const relative = new URL('subpath', base);

console.log(relative.href); // https://example.com/path/subpath

URL 与字符串转换 ​

转换为字符串 ​

toString() 和 href 可以将 URL 对象转换为字符串：

javascript
const url = new URL('https://example.com/path');
console.log(url.toString()); // https://example.com/path
console.log(url.href);       // https://example.com/path

解码和编码 ​

处理 URL 中的特殊字符：

  • encodeURIComponent：对参数值进行编码。
  • decodeURIComponent：对参数值进行解码。
  • encodeURI：对整个 URL 进行编码。
  • decodeURI：对整个 URL 进行解码。
javascript
const param = 'name=John Doe&age=30';
const encoded = encodeURIComponent(param);
console.log(encoded); // name%3DJohn%20Doe%26age%3D30

const decoded = decodeURIComponent(encoded);
console.log(decoded); // name=John Doe&age=30

常见场景 ​

构造动态 URL ​

javascript
const base = 'https://api.example.com';
const endpoint = '/users';
const query = { name: 'John', age: 30 };

const url = new URL(endpoint, base);
Object.entries(query).forEach(([key, value]) => {
  url.searchParams.append(key, value);
});

console.log(url.href); // https://api.example.com/users?name=John&age=30

解析 URL 查询参数 ​

javascript
const url = new URL('https://example.com?name=John&age=30');
const params = Object.fromEntries(url.searchParams.entries());

console.log(params); // { name: 'John', age: '30' }

验证 URL 的有效性 ​

javascript
function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (error) {
    return false;
  }
}

console.log(isValidUrl('https://example.com')); // true
console.log(isValidUrl('invalid-url')); // false

总结 ​

URL 是处理和操作 URL 的强大工具，结合 URLSearchParams 可以轻松实现查询参数的管理。无论在前端还是后端，它都是解析和构建 URL 的首选方案。