发布于 由admin

JS `URL` 与 `URLSearchParams` API：URL 解析与参数操作

各位观众，大家好！今天咱们来聊聊前端开发中两个非常实用，但又容易被忽略的小伙伴：URL 和 URLSearchParams。它们就像一对黄金搭档，专门负责处理 URL 这种让人又爱又恨的字符串。别担心，咱们今天就用最轻松的方式，把它们摸透！

开场白：URL，前端的门面担当

在Web世界里，URL (Uniform Resource Locator) 就像是房子的地址，浏览器通过它找到对应的资源。前端工程师每天都要和URL打交道，无论是页面跳转、API请求，还是数据传递，都离不开它。一个URL包含了协议、域名、端口、路径、查询参数等等信息，看似简单，实则蕴含着丰富的内涵。

URL API：URL 的解剖大师

JavaScript的 URL API 就像一个解剖大师，可以将URL字符串拆解成各个部分，方便我们进行操作。

1. 创建 URL 对象

首先，我们需要创建一个 URL 对象。有两种方式：

  • 基于绝对 URL:
const url = new URL('https://www.example.com:8080/path/to/resource?param1=value1&param2=value2#hash');
console.log(url);
  • 基于相对 URL 和基础 URL:
const baseUrl = 'https://www.example.com';
const relativeUrl = '/path/to/resource?param1=value1';
const url = new URL(relativeUrl, baseUrl);
console.log(url);

注意，如果 relativeUrl 是一个绝对 URL，那么 baseUrl 会被忽略。

2. 访问 URL 的各个部分

创建 URL 对象后，我们就可以通过它的属性访问 URL 的各个部分了，就像访问一个对象的属性一样简单。

属性 描述 示例
href 完整的 URL 'https://www.example.com:8080/path/to/resource?param1=value1#hash'
origin 协议、域名和端口号 'https://www.example.com:8080'
protocol 协议 (包含冒号) 'https:'
hostname 域名 'www.example.com'
port 端口号 '8080'
pathname 路径 (以斜杠开头) '/path/to/resource'
search 查询字符串 (包含问号) '?param1=value1&param2=value2'
hash hash (包含井号) '#hash'
username 用户名 (用于 FTP URL 等) '' (如果 URL 中没有用户名)
password 密码 (用于 FTP URL 等) '' (如果 URL 中没有密码) 
const url = new URL('https://www.example.com:8080/path/to/resource?param1=value1&param2=value2#hash');

console.log('href:', url.href);
console.log('origin:', url.origin);
console.log('protocol:', url.protocol);
console.log('hostname:', url.hostname);
console.log('port:', url.port);
console.log('pathname:', url.pathname);
console.log('search:', url.search);
console.log('hash:', url.hash);

3. 修改 URL 的各个部分

URL 对象的属性不仅可以读取，还可以修改。修改后，href 属性会自动更新。

const url = new URL('https://www.example.com/path');
url.pathname = '/new/path';
url.search = '?newParam=newValue';
url.hash = '#newHash';

console.log(url.href); // 输出: https://www.example.com/new/path?newParam=newValue#newHash

URLSearchParams API：查询参数的管家

URL中最重要的部分之一就是查询参数 (query parameters)。它们就像是URL的行李箱，可以携带各种数据。URLSearchParams API 就是专门用来管理这些行李的。

1. 创建 URLSearchParams 对象

URLSearchParams 对象可以从以下几种方式创建：

  • 从查询字符串创建:
const params = new URLSearchParams('param1=value1&param2=value2');
console.log(params);
  • 从 URL 对象创建:
const url = new URL('https://www.example.com?param1=value1&param2=value2');
const params = url.searchParams;
console.log(params);
  • 从对象创建:
const params = new URLSearchParams({
  param1: 'value1',
  param2: 'value2',
  param3: ['value3', 'value4'] // 数组会被转换为 param3=value3&param3=value4
});
console.log(params);
  • 直接创建，然后添加参数:
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
console.log(params);

2. 常用方法

URLSearchParams 对象提供了一系列方法来操作查询参数。

  • append(name, value): 添加一个参数。如果参数名已经存在，则添加一个新的值。
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param1', 'value2'); // 现在 param1 有两个值
console.log(params.toString()); // 输出: param1=value1&param1=value2
  • delete(name): 删除所有指定名称的参数。
const params = new URLSearchParams('param1=value1&param1=value2&param2=value3');
params.delete('param1');
console.log(params.toString()); // 输出: param2=value3
  • get(name): 获取第一个指定名称的参数的值。如果参数不存在，则返回 null。
const params = new URLSearchParams('param1=value1&param1=value2&param2=value3');
console.log(params.get('param1')); // 输出: value1
console.log(params.get('param3')); // 输出: null
  • getAll(name): 获取所有指定名称的参数的值，返回一个数组。如果参数不存在，则返回一个空数组。
const params = new URLSearchParams('param1=value1&param1=value2&param2=value3');
console.log(params.getAll('param1')); // 输出: ['value1', 'value2']
console.log(params.getAll('param3')); // 输出: []
  • has(name): 检查是否存在指定名称的参数。
const params = new URLSearchParams('param1=value1&param2=value2');
console.log(params.has('param1')); // 输出: true
console.log(params.has('param3')); // 输出: false
  • set(name, value): 设置指定名称的参数的值。如果参数已经存在，则删除所有同名参数，然后添加一个新参数。
const params = new URLSearchParams('param1=value1&param1=value2&param2=value3');
params.set('param1', 'newValue');
console.log(params.toString()); // 输出: param1=newValue&param2=value3
  • sort(): 按照参数名称的字母顺序排序。
const params = new URLSearchParams('b=2&a=1&c=3');
params.sort();
console.log(params.toString()); // 输出: a=1&b=2&c=3
  • toString(): 将 URLSearchParams 对象转换为查询字符串。
const params = new URLSearchParams({ param1: 'value1', param2: 'value2' });
console.log(params.toString()); // 输出: param1=value1&param2=value2
  • forEach(callback): 遍历所有参数。
const params = new URLSearchParams('param1=value1&param2=value2&param3=value3');
params.forEach((value, name) => {
  console.log(`${name}: ${value}`);
});
// 输出:
// param1: value1
// param2: value2
// param3: value3

3. 迭代器

URLSearchParams 对象是可迭代的，可以使用 for...of 循环遍历所有参数。

const params = new URLSearchParams('param1=value1&param2=value2');
for (const [name, value] of params) {
  console.log(`${name}: ${value}`);
}
// 输出:
// param1: value1
// param2: value2

实践案例：构建 API 请求 URL

假设我们需要向一个 API 发送请求，并携带一些查询参数。使用 URL 和 URLSearchParams 可以轻松构建请求 URL。

const baseUrl = 'https://api.example.com/users';
const params = new URLSearchParams({
  page: 1,
  pageSize: 10,
  sort: 'name',
  order: 'asc'
});

const url = new URL(baseUrl);
url.search = params.toString();

console.log(url.href); // 输出: https://api.example.com/users?page=1&pageSize=10&sort=name&order=asc

// 使用 fetch 发送请求
fetch(url.href)
  .then(response => response.json())
  .then(data => console.log(data));

进阶技巧：URL 编码与解码

URL 中有些字符是保留字符，需要进行编码才能安全地传输。例如，空格会被编码为 %20。URLSearchParams 会自动进行编码和解码，所以一般情况下我们不需要手动处理。

但是，如果需要手动编码和解码，可以使用以下函数：

  • encodeURIComponent(string): 编码 URL 组件 (例如，查询参数的值)。
  • decodeURIComponent(string): 解码 URL 组件。
  • encodeURI(string): 编码完整的 URL。
  • decodeURI(string): 解码完整的 URL。

encodeURIComponent 比 encodeURI 更常用，因为它会编码更多的字符，更安全。

const encodedValue = encodeURIComponent('hello world!');
console.log(encodedValue); // 输出: hello%20world%21

const decodedValue = decodeURIComponent(encodedValue);
console.log(decodedValue); // 输出: hello world!

兼容性问题：老浏览器的救星

虽然 URL 和 URLSearchParams API 已经很普及了，但仍然有一些老旧的浏览器不支持。为了兼容这些浏览器，可以使用 polyfill。

一个常用的 polyfill 是 url-search-params。

npm install url-search-params
// 引入 polyfill
import 'url-search-params-polyfill';

// 现在就可以在所有浏览器中使用 URLSearchParams 了
const params = new URLSearchParams('param1=value1&param2=value2');
console.log(params.toString());

最佳实践：让你的 URL 更优雅

  • 使用 URL 和 URLSearchParams API: 避免手动拼接 URL 字符串，使用 API 可以减少出错的概率，并提高代码的可读性。
  • 保持 URL 的简洁: 只包含必要的查询参数，避免冗余。
  • 使用有意义的参数名: 参数名应该清晰地表达参数的含义。
  • 避免在 URL 中传递敏感信息: 例如，密码等敏感信息应该通过 POST 请求发送。
  • 注意 URL 的长度限制: 不同的浏览器和服务器对 URL 的长度有限制，过长的 URL 可能会导致请求失败。

总结：URL 处理，不再头疼！

今天我们一起学习了 URL 和 URLSearchParams API，掌握了 URL 的解析和查询参数的操作。希望通过今天的讲解，大家能够更加自信地处理 URL，让你的代码更加优雅和健壮！ 记住，URL不再是前端的拦路虎，而是我们手中的利器！ 掌握它们，你就能在Web世界里畅游无阻！

练习题：巩固你的知识

  1. 给定一个 URL https://www.example.com/products?category=electronics&price=100&price=200，如何使用 URLSearchParams 获取 price 的所有值？
  2. 如何使用 URL 和 URLSearchParams API 将以下对象转换为 URL 查询字符串：{ name: 'John Doe', age: 30, city: 'New York' }？
  3. 如何判断一个 URL 中是否包含名为 debug 的查询参数？

希望大家多多练习，熟练掌握这些 API。 祝大家编程愉快！下次有机会再和大家分享其他的技术知识。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注