从参数对象中构建查询字符串

在前端开发中，我们经常需要将一些参数拼接成一个 URL 查询字符串来发送给服务器。这个过程可能比较繁琐，但是通过 JavaScript 的内置方法和一些简单的技巧，可以使这个过程变得更加容易和高效。

URL 的查询字符串格式

URL 的查询字符串通常是在 URL 的末尾添加一个 ? 符号，后面跟上若干个 key=value 的形式，多个键值对之间用 & 分隔，例如：

https://example.com/search?q=keyword&category=book

从参数对象构建查询字符串

假设我们有一个包含参数的对象，例如：

const params = {
  q: 'keyword',
  category: 'book'
};

我们可以使用 Object.entries() 方法将其转换为一个由键值对数组组成的数组：

const entries = Object.entries(params);
console.log(entries);
// [["q", "keyword"], ["category", "book"]]

然后，我们可以使用 Array.map() 方法将每个键值对转换为一个查询字符串：

const parts = entries.map(([key, value]) => `${key}=${value}`);
console.log(parts);
// ["q=keyword", "category=book"]

最后，我们可以使用 Array.join() 方法将所有的查询字符串连接起来：

const queryString = parts.join('&');
console.log(queryString);
// "q=keyword&category=book"

现在，我们就得到了一个有效的查询字符串，可以将其添加到 URL 的末尾并发送给服务器。

键值对的编码与解码

在构建查询字符串时，我们需要确保键和值都经过正确的编码以避免出现错误。特别是当值包含空格、特殊字符或非 ASCII 字符时，我们需要使用 encodeURIComponent() 方法进行编码。

例如，如果参数对象中包含一个名为 name 值为 'John Doe' 的属性，我们需要先对它进行编码：

const params = { name: 'John Doe' };
const encodedName = encodeURIComponent(params.name);
console.log(encodedName);
// "John%20Doe"

在接收到查询字符串后，我们也需要将其解析成一个键值对的对象。这个过程可以使用 URLSearchParams API 中的 URLSearchParams() 构造函数来完成：

const queryString = 'q=keyword&category=book';
const params = new URLSearchParams(queryString);
console.log(params.get('q')); // "keyword"
console.log(params.get('category')); // "book"

总结

本文介绍了如何从参数对象中构建 URL 查询字符串，并讨论了编码和解码键值对的方法。通过这些技巧，我们可以更轻松地处理 URL 参数，提高前端开发的效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13749