在前端开发的过程中，我们经常会遇到 URL 参数与 JavaScript 中的对象之间需要相互转化的情况。比如说，当我们需要利用 URL 的查询参数来控制页面的行为时，我们就需要将 URL 参数解析为 JavaScript 中的对象进行操作；又或者，当我们需要将页面上的一些数据传递给服务器时，我们就需要将对象转化为 URL 参数进行请求。
本文将介绍 URL 参数和 JavaScript 中对象的相互转化方法，并提供一些实用的代码示例。
对于 URL 参数转化为 JavaScript 对象，我们首先需要将 URL 参数解析为一个字符串，然后再将其解析为一个对象。
1.1 解析 URL 参数为字符串
我们可以使用 JavaScript 中的 window.location.search 方法来获取当前页面 URL 中的查询参数。这个方法返回的字符串包含了 URL 中 ? 之后的所有内容，但不包括 # 以及其后面的锚点参数。
以下是一个获取当前页面 URL 查询参数的示例代码：
const queryString = window.location.search;
如果我们希望获取其他页面 URL 中的查询参数，可以使用 new URL(urlString).search 方法，将需要解析的 URL 传入即可。例如：
const url = "https://example.com/page/?name=John&age=20"; const queryString = new URL(url).search; // 返回"?name=John&age=20"
1.2 解析查询参数为对象
接下来，我们需要将查询参数的字符串解析为 JavaScript 中的对象。我们可以手动编写一个解析函数，但是这里推荐使用第三方库 query-string，该库提供了一些便捷的解析方法。
首先，我们需要使用 npm 或 yarn 来将 query-string 库添加至项目中：
npm install query-string --save # 或者 yarn add query-string
然后我们便可以使用该库中提供的 parse 方法，将 URL 查询参数的字符串转化为对象。例如：
import queryString from 'query-string'; const values = queryString.parse(queryString);
其中，values 就是一个解析后的对象。例如，如果 queryString 为 "?name=John&age=20"，那么 values 就为 {name: "John", age: "20"}。
当我们需要将 JavaScript 中的对象转化为 URL 参数时，我们需要将对象中的每个键值对进行拼接，形成一个 URL 查询参数的字符串。
2.1 将对象转化为字符串
我们可以手动编写一个转化函数，首先遍历对象中的所有键值对，将它们转化为 "key=value" 格式，然后用 "&" 符号连接起来。例如：
function toQueryString(obj) {
const parts = [];
for (const [key, value] of Object.entries(obj)) {
parts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
}
return parts.join('&');
}
const values = {
name: "John",
age: 20
};
const queryString = toQueryString(values);
// 返回 "name=John&age=20"注意，我们在将每个键值对编码为字符串时，使用了 encodeURIComponent 方法。这个方法可以将字符串中的特殊字符进行编码，防止出现非法的 URL 查询参数。例如，如果键值对中包含一个特殊字符 "?", 它会被转换为 "%3F" 这样的编码字符串。
2.2 将字符串添加到 URL 中
现在我们已经将 JavaScript 对象转化为了一个字符串，接下来的任务就是将它加入到 URL 中。
如果我们要直接修改当前窗口 URL 中的查询参数，可以使用 window.location.search 属性来修改。例如：
const queryString = toQueryString(values); window.location.search = queryString;
如果我们是要构造一个新的 URL，并进行跳转，可以使用 window.location.href 属性或者 window.location.replace 方法。例如：
const queryString = toQueryString(values);
const url = `https://example.com/page/?${queryString}`;
window.location.href = url;
// 或者
window.location.replace(url);注意，这里我们需要自己拼接完整的 URL，而不能简单地使用 window.location.search。因为 search 属性只会返回当前 URL 中的查询参数部分，我们还需要手动拼接主机名、路径名以及锚点参数等。
总结
本文介绍了 URL 参数和 JavaScript 中对象的相互转化方法。我们可以通过 location.search 方法获取 URL 中的查询参数，并使用 query-string 库来将查询参数字符串解析为 JavaScript 对象。反之，我们也可以手动编写辅助函数将 JavaScript 对象转化为查询参数字符串，并将其添加到 URL 中。
以上操作都很简单，但在实际的前端开发中会经常用到，希望能帮助到读者们。
以上是聊聊URL参数和JS对象的相互转化方法的详细内容。更多信息请关注PHP中文网其他相关文章！
