在前端开发中，我们经常需要将一些参数拼接成一个 URL 查询字符串来发送给服务器。这个过程可能比较繁琐，但是通过 JavaScript 的内置方法和一些简单的技巧，可以使这个过程变得更加容易和高效。
URL 的查询字符串格式
URL 的查询字符串通常是在 URL 的末尾添加一个 ? 符号，后面跟上若干个 key=value 的形式，多个键值对之间用 & 分隔，例如：
--------------------------------------------------
从参数对象构建查询字符串
假设我们有一个包含参数的对象，例如：
----- ------ - - -- ---------- --------- ------ --
我们可以使用 Object.entries() 方法将其转换为一个由键值对数组组成的数组：
----- ------- - ----------------------- --------------------- -- ------ ----------- ------------ --------
然后，我们可以使用 Array.map() 方法将每个键值对转换为一个查询字符串：
----- ----- - ------------------ ------- -- ------------------- ------------------- -- ------------- ----------------
最后，我们可以使用 Array.join() 方法将所有的查询字符串连接起来：
----- ----------- - ---------------- ------------------------- -- -------------------------
现在，我们就得到了一个有效的查询字符串，可以将其添加到 URL 的末尾并发送给服务器。
键值对的编码与解码
在构建查询字符串时，我们需要确保键和值都经过正确的编码以避免出现错误。特别是当值包含空格、特殊字符或非 ASCII 字符时，我们需要使用 encodeURIComponent() 方法进行编码。
例如，如果参数对象中包含一个名为 name 值为 'John Doe' 的属性，我们需要先对它进行编码：
----- ------ - - ----- ----- ---- -- ----- ----------- - -------------------------------- ------------------------- -- ------------
在接收到查询字符串后，我们也需要将其解析成一个键值对的对象。这个过程可以使用 URLSearchParams API 中的 URLSearchParams() 构造函数来完成：
----- ----------- - -------------------------- ----- ------ - --- ----------------------------- ----------------------------- -- --------- ------------------------------------ -- ------
总结
本文介绍了如何从参数对象中构建 URL 查询字符串，并讨论了编码和解码键值对的方法。通过这些技巧，我们可以更轻松地处理 URL 参数，提高前端开发的效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13749