从URL中提取参数与将对象转换为URL查询参数的实现代码

从URL中提取参数的实现代码

从URL中提取参数的实现代码

通过JavaScript代码解析URL获取参数是一种很常见的操作，我们可以通过以下操作来提取URL中的参数：

1.使用window.location.search获取查询字符串部分，该部分包含了所有请求参数。例如，我们可以使用以下代码来获取URL地址中的search字符串:

let searchStr = window.location.search;

2.使用URLSearchParams API将查询字符串解析成对象，然后可以使用get()方法获取指定参数的值。

例如，如果我们的URL地址是https://www.example.com/search?q=JavaScript&lang=en，我们可以使用以下代码来获取q和lang两个参数的值：

let searchParams = new URLSearchParams(window.location.search);
let query = searchParams.get('q'); // "JavaScript"
let language = searchParams.get('lang'); // "en"

将对象转换为URL查询参数的实现代码

在开发中，我们经常需要将对象转换为URL查询参数，以便将其附加到URL请求中。 我们可以通过以下方法将对象转换为查询参数：

1.使用Object.entries()方法将对象转换为数组，其中每个元素都是[key, value]的形式。

const obj = {
  name: 'Tina',
  age: 23,
  email: 'tina@example.com'
};

const entries = Object.entries(obj);

2.使用map()方法和encodeURIComponent()方法将数组转换为查询参数组件。

const params = entries.map(entry => {
  return `${encodeURIComponent(entry[0])}=${encodeURIComponent(entry[1])}`;
}).join('&');

例如，对于上面的obj对象，params的值将是 name=Tina&age=23&email=tina%40example.com。

示例说明

示例1：从URL中提取参数

假设我们的URL地址是https://www.example.com/product?id=123&name=Smartphone，我们需要从中提取id和name两个参数的值。

实现代码如下所示：

let searchParams = new URLSearchParams(window.location.search);
let productId = searchParams.get('id'); // "123"
let productName = searchParams.get('name'); // "Smartphone"
console.log(`Product ID: ${productId}, Product Name: ${productName}`);

示例2：将对象转换为URL查询参数

假设我们有一个名为user的对象，它包含用户的姓名、年龄和电子邮件地址等信息，我们需要将其转换为查询参数。

实现代码如下所示：

const user = {
  name: 'Tina',
  age: 23,
  email: 'tina@example.com'
};

const entries = Object.entries(user);
const params = entries.map(entry => {
  return `${encodeURIComponent(entry[0])}=${encodeURIComponent(entry[1])}`;
}).join('&');

console.log(params); // "name=Tina&age=23&email=tina%40example.com"