在使用 javascript 向 url 添加参数时，直接拼接字符串可能会导致一些问题，例如参数顺序错误、编码问题等，尤其是在需要添加多个参数，如用户代理信息和 ip 地址时。本文将介绍如何使用 urlsearchparams 对象来更有效地构建 url 查询字符串，解决 ip 地址无法正确追加到 url 的问题。
使用 URLSearchParams 构建 URL
URLSearchParams 是一个用于处理 URL 查询字符串的接口，它提供了一系列方法来添加、删除和修改 URL 参数。使用 URLSearchParams 可以避免手动拼接字符串可能出现的错误，并提供更好的可读性和可维护性。
以下是使用 URLSearchParams 解决该问题的示例代码：
function getIP(json) {
const params = new URLSearchParams(location.search);
params.append('user', navigator.userAgent);
params.append('ip', json.ip);
$.get("https://hook.us1.make.com/s86ki3rt515ieg1gr3f9xxc5ufdu59zb?" + params);
}代码解释：
- 创建 URLSearchParams 对象： const params = new URLSearchParams(location.search); 这行代码创建了一个新的 URLSearchParams 对象，并将当前页面的查询字符串（location.search）作为初始值传入。如果当前 URL 已经包含查询参数，这些参数会被自动解析并添加到 params 对象中。
- 添加参数： params.append('user', navigator.userAgent); 和 params.append('ip', json.ip); 这两行代码分别使用 append() 方法向 params 对象添加 user 和 ip 参数，并将用户代理信息（navigator.userAgent）和 IP 地址（json.ip）作为对应的值。
- 构建完整的 URL： $.get("https://hook.us1.make.com/s86ki3rt515ieg1gr3f9xxc5ufdu59zb?" + params); 这行代码使用 jQuery 的 $.get() 方法发送 GET 请求。通过将 params 对象直接添加到 URL 后面，URLSearchParams 对象会自动将所有参数转换为正确的查询字符串格式。
注意事项
- 兼容性： URLSearchParams 在现代浏览器中都有很好的支持。如果需要兼容旧版本浏览器，可以考虑使用 polyfill。
- 编码： URLSearchParams 会自动处理 URL 编码，确保参数值中的特殊字符被正确转义。
- 替代方案： 除了 URLSearchParams，还可以使用 encodeURIComponent 手动编码参数值，然后拼接成 URL。但是，URLSearchParams 更加方便和安全。
总结
使用 URLSearchParams 可以更清晰、更安全地构建 URL 查询字符串，避免手动拼接字符串可能导致的错误。在需要向 URL 添加多个参数时，推荐使用 URLSearchParams。通过本文提供的示例代码，可以轻松解决 IP 地址无法正确添加到 URL 的问题。
