JavaScript查询字符串

在JavaScript中，查询字符串是URL中紧跟着问号（?）的一部分。它包含一个或多个参数，每个参数由键值对组成，并使用等号（=）分隔。不同的参数之间使用&符号分隔。

例如，以下URL包含两个参数：name和age：

https://example.com/?name=John&age=25

要在JavaScript中操作查询字符串，可以使用一些内置的方法和技巧。

解析查询字符串

可以使用URLSearchParams对象来解析查询字符串。这个对象提供了一些有用的方法来获取和操作查询参数。

首先，需要创建一个URLSearchParams对象，并将查询字符串作为参数传递给它：

const queryString = 'name=John&age=25';
const params = new URLSearchParams(queryString);

现在，可以使用以下方法来获取和操作查询参数：

• get(key)：根据键获取参数的值。
• getAll(key)：根据键获取所有参数值的数组。
• has(key)：检查是否存在具有给定键的参数。
• set(key, value)：设置参数的值。
• delete(key)：删除具有给定键的参数。
• toString()：将参数列表转换回查询字符串。

以下是使用URLSearchParams对象的示例：

const queryString = 'name=John&age=25';
const params = new URLSearchParams(queryString);

console.log(params.get('name')); // 输出: John
console.log(params.get('age')); // 输出: 25

params.set('name', 'Alice');
console.log(params.toString()); // 输出: name=Alice&age=25

params.delete('age');
console.log(params.toString()); // 输出: name=Alice

解析当前URL的查询字符串

如果想要获取当前页面的查询字符串，可以使用URLSearchParams对象的window.location.search属性。这个属性包含当前URL中的查询字符串部分。

以下是获取当前URL查询字符串的示例：

const params = new URLSearchParams(window.location.search);

console.log(params.get('name')); // 输出当前URL参数中名为name的值
console.log(params.get('age')); // 输出当前URL参数中名为age的值

使用正则表达式解析查询字符串

除了使用URLSearchParams对象外，还可以使用正则表达式来解析查询字符串。

以下是一个解析查询字符串的示例：

function parseQueryString(queryString) {
  const params = {};
  
  queryString.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(match, key, value) {
    params[key] = decodeURIComponent(value);
  });
  
  return params;
}

const queryString = 'name=John&age=25';
const params = parseQueryString(queryString);

console.log(params.name); // 输出: John
console.log(params.age); // 输出: 25

构建查询字符串

如果想要构建查询字符串，可以使用URLSearchParams对象或手动创建一个格式化的字符串。

使用URLSearchParams

可以使用URLSearchParams对象来构建查询字符串。

以下是使用URLSearchParams对象构建查询字符串的示例：

const params = new URLSearchParams();

params.append('name', 'John');
params.append('age', 25);

console.log(params.toString()); // 输出: name=John&age=25

手动创建查询字符串

也可以手动创建一个格式化的字符串来构建查询字符串。

以下是手动创建查询字符串的示例：

const params = [
  { key: 'name', value: 'John' },
  { key: 'age', value: 25 }
];

const queryString = params.map(param => `${param.key}=${param.value}`).join('&');

console.log(queryString); // 输出: name=John&age=25

总结

查询字符串在JavaScript中是很常见的一种数据形式。使用URLSearchParams对象可以方便地解析和构建查询字符串。此外，还可以使用正则表达式来解析查询字符串。

希望本文对你理解JavaScript中的查询字符串有所帮助！