怎么获取 URL 中的参数？写不出来就来复习一下吧

如何获取 URL 中的参数？

在 Web 开发中，我们经常需要从 URL 中获取参数。比如，我们需要根据不同的参数来展示不同的内容或者执行不同的操作等等，从URL中获取参数的重要性就不用我多描述了。那么，在 JavaScript 中，我们应该如何获取 URL 中的参数呢？

假设我们有以下 URL：

https://www.example.com?name=Tom&age=18&gender=male  

我们可以通过以下步骤来获取 URL 中的参数：

1. 使用 window.location.search

使用 window.location.search 获取 URL 中的查询字符串，它包含了以问号 ? 开头的参数列表。

const search = window.location.search; // "?name=Tom&age=18&gender=male"  

2. 使用 URLSearchParams 构造函数

使用 URLSearchParams 构造函数来将查询字符串解析为一个可迭代的对象，它包含了所有参数的键值对。

const params = new URLSearchParams(search); // URLSearchParams { 'name' => 'Tom', 'age' => '18', 'gender' => 'male' }  

3. 使用 get() 方法来获取指定参数的值。

const name = params.get('name'); // "Tom"  
const age = params.get('age'); // "18"  
const gender = params.get('gender'); // "male"  

以上就是获取 URL 中参数的基本方法啦。但是，我们其实还需要考虑一些边界情况和异常处理。

那么我们如何处理边界情况呢？

边界情况处理

• 如果 URL 中没有任何参数，window.location.search 返回空字符串。

const search = window.location.search; // ""  

• 如果 URL 中的参数名重复，URLSearchParams 对象会将它们合并为一个键值对。

const search = "?name=Tom&age=18&gender=male&name=Jerry";  
const params = new URLSearchParams(search); // URLSearchParams { 'name' => ['Tom', 'Jerry'], 'age' => '18', 'gender' => 'male' }  

我们可以使用 getAll() 方法来获取重复参数的所有值。

const names = params.getAll('name'); // ['Tom', 'Jerry']  

• 如果需要获取的参数不存在，params.get() 方法会返回 null。

const hobby = params.get('hobby'); // null  

封装函数

为了方便使用，我们可以将上述方法封装为一个通用的函数 getUrlParams()，它接收两个参数：URL 和参数名，返回对应的参数值。如果参数不存在，则返回 null。

function getUrlParams(url, key) {  
  const search = new URL(url).search;  
  const params = new URLSearchParams(search);  
  return params.get(key);  
}  

我们可以通过以下方式来使用 getUrlParams() 函数：

const url = 'https://www.example.com?name=Tom&age=18&gender=male';  
const name = getUrlParams(url, 'name'); // "Tom"  
const hobby = getUrlParams(url, 'hobby'); // null  

通过上述方法，我们就可以方便地获取 URL 中的参数，并且处理了一些边界情况和异常情况。

完善

不过除了处理边界情况和异常情况，我们还可以进一步完善 getUrlParams() 函数，使其更加灵活和易用。如果将你想要继续了解的话，以下是一些可以考虑的改进：

1. 支持多个参数名

有时候，我们需要同时获取多个参数的值。比如，我们可能需要获取一个商品的 ID 和名称。为了实现这个功能，我们可以将参数名作为一个数组传递给 getUrlParams() 函数，它会返回一个包含对应参数值的对象。

function getUrlParams(url, keys) {  
  const search = new URL(url).search;  
  const params = new URLSearchParams(search);  
  const result = {};  
  keys.forEach(key => {  
    result[key] = params.get(key);  
  });  
  return result;  
}  
   
const url = 'https://www.example.com?productId=123&productName=apple';  
const { productId, productName } = getUrlParams(url, ['productId', 'productName']);  
// productId: "123"  
// productName: "apple"  

2. 支持默认值

有时候，我们需要设置参数的默认值，以避免在参数不存在时返回 null。比如，我们可能需要设置一个页面的默认标题。

为了实现这个功能，我们可以将参数名和默认值作为一个对象传递给 getUrlParams() 函数，它会返回一个包含对应参数值的对象。如果参数不存在，则返回默认值。

function getUrlParams(url, options) {  
  const search = new URL(url).search;  
  const params = new URLSearchParams(search);  
  const result = {};  
  Object.keys(options).forEach(key => {  
    const defaultValue = options[key];  
    result[key] = params.get(key) || defaultValue;  
  });  
  return result;  
}  
   
const url = 'https://www.example.com?title=Hello%20World';  
const { title, description } = getUrlParams(url, { title: 'Default Title', description: 'Default Description' });  
// title: "Hello World"  
// description: "Default Description"  

3. 支持 URL 对象

为了提高代码复用性，我们可以将 getUrlParams() 函数改为接收一个 URL 对象而非字符串。这样，我们就可以在不同的地方直接使用 window.location 而不需要额外的处理。

function getUrlParams(urlObj, options) {  
  const search = urlObj.search;  
  const params = new URLSearchParams(search);  
  const result = {};  
  Object.keys(options).forEach(key => {  
    const defaultValue = options[key];  
    result[key] = params.get(key) || defaultValue;  
  });  
  return result;  
}  
   
const { title, description } = getUrlParams(window.location, { title: 'Default Title', description: 'Default Description' });  
// title: "当前页面的标题"  
// description: "Default Description"  

通过以上的改进，我们就可以使我们的 getUrlParams() 函数更加灵活和易用，使得我们能够更加方便地从 URL 中获取参数。

希望这篇文章能够为大家带来一点参考，如果有错误的地方也欢迎大佬来狠狠鞭策我~

那么这篇文章就到这里结束啦~

如果你想了解更多这类文章，点赞关注作者更新更多~