在前端开发的过程中，我们经常会遇到 URL 参数与 JavaScript 中的对象之间需要相互转化的情况。比如说，当我们需要利用 URL 的查询参数来控制页面的行为时，我们就需要将 URL 参数解析为 JavaScript 中的对象进行操作；又或者，当我们需要将页面上的一些数据传递给服务器时，我们就需要将对象转化为 URL 参数进行请求。
本文将介绍 URL 参数和 JavaScript 中对象的相互转化方法，并提供一些实用的代码示例。
- 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 参数
当我们需要将 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中文网其他相关文章！
