6

JavaScript 中URL 查询字符串(query string)的序列与反序列化 - Advoster

 2 years ago
source link: https://www.cnblogs.com/yuzhihui/p/17040986.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

JavaScript 中URL 查询字符串(query string)的序列与反序列化

方法一：

在 JavaScript 中，可以使用 URLSearchParams 对象来处理 URL 中的查询字符串。

序列化（将 JavaScript 对象转换为查询字符串）可以使用 URLSearchParams 对象的 append() 方法，如下所示：

let params = new URLSearchParams();
params.append('name', 'John');
params.append('age', '30');
let queryString = params.toString();
console.log(queryString);

反序列化（将查询字符串转换为 JavaScript 对象）可以使用 URLSearchParams 的构造函数，如下所示：

let queryString = "name=John&age=30";
let params = new URLSearchParams(queryString);
console.log(params.get('name')); // "John"
console.log(params.get('age')); // "30"

对于反序列化的操作可以使用URL的search属性，来解析query string

let url = new URL('https://example.com?name=John&age=30');
let params = new URLSearchParams(url.search);
console.log(params.get('name')); // "John"
console.log(params.get('age')); // "30"

需要注意的是，URLSearchParams 对象只能用于处理查询字符串，而不能用于创建或解析整个 URL。

如果需要更高级的处理方式，可以使用其它库或第三方函数库，比如 qs, querystring 等库来处理。

对于反序列化的操作中的URLSearchParams的使用还有一些方法，比如：

  • has(name): 返回一个 Boolean 值，表示是否存在名称为 name 的查询参数。
  • get(name): 返回名称为 name 的查询参数的值，如果不存在，则返回 null。
  • getAll(name): 返回所有名称为 name 的查询参数的值组成的数组，如果不存在，则返回空数组。
  • set(name, value): 设置名称为 name 的查询参数的值为 value。如果已经存在同名参数，将会覆盖原来的值。
  • append(name, value): 添加名称为 name 的查询参数，并设置其值为 value。如果已经存在同名参数，会添加一个新的参数。
  • delete(name): 删除名称为 name 的查询参数。
  • entries(): 返回一个迭代器，遍历所有查询参数的键值对。
  • keys(): 返回一个迭代器，遍历所有查询参数的名称。
  • values(): 返回一个迭代器，遍历所有查询参数的值。

这些方法都能给出更灵活的操作，请根据具体需求来选择使用

方法二：

当然，如果需要手动处理查询字符串，也可以使用 JavaScript 的标准字符串处理函数来实现。

序列化，可以使用下面的代码把一个对象转换为查询字符串：

function objectToQueryString(obj) {
  return Object.entries(obj).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&');
}
console.log(objectToQueryString({name: 'John', age: '30'}))

反序列化，可以使用下面的代码把查询字符串转换为一个对象：

function queryStringToObject(queryString) {
  let obj = {};
  let arr = queryString.split("&");
  for(let i = 0; i < arr.length; i++){
    let temp = arr[i].split("=");
    obj[temp[0]] = temp[1];
  }
  return obj;
}
console.log(queryStringToObject('name=John&age=30'))

需要注意的是，上述代码使用了 encodeURIComponent 和 decodeURIComponent 来编码和解码查询字符串中的字符，以防止出现无效或不安全的字符。

这些方法都能达到相同的目的，你可以根据项目中使用的JavaScript环境和需要的复杂度来进行选择


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK