攻克URL参数值获取难题，制霸前端逻辑！

2023-09-20 08:08:08

在URL中，查询参数字符串值通常提供有关请求的信息，例如搜索参数或正在使用的对象的ID。如果在前端处理任何业务或请求逻辑，了解如何从URL中检索查询字符串值非常重要。本文分享三种从URL中获取查询字符串值的方法，帮助您在前端开发中轻松获取URL参数值，助力您的前端逻辑更上一层楼。

1. 使用JavaScript的URLSearchParams

URLSearchParams对象是JavaScript中内置的一个类，用于表示查询参数字符串，并提供了一些方便的方法来获取和设置查询参数。以下是如何使用URLSearchParams来从URL中获取参数值：

const url = new URL('https://example.com/?foo=bar&baz=qux');
const params = new URLSearchParams(url.search);

const foo = params.get('foo'); // "bar"
const baz = params.get('baz'); // "qux"

2. 使用正则表达式

正则表达式是一种强大的工具，可以用来匹配和提取字符串中的特定模式。以下是如何使用正则表达式从URL中获取参数值：

const url = 'https://example.com/?foo=bar&baz=qux';

const matches = url.match(/[\?&]([^=]+)=([^&#]*)/g);
const params = {};
matches.forEach(match => {
  const [key, value] = match.split('=');
  params[key] = value;
});

const foo = params['foo']; // "bar"
const baz = params['baz']; // "qux"