在 Web 开发中，URL 是一种用于唯一标识资源的重要方式。通常情况下，我们可以使用查询字符串来向服务器传递参数。而在查询字符串中，问号（?）是一个非常特殊的字符，因为它会用来分隔 URL 和查询参数。但是，当我们需要向 URL 参数中添加问号时，可能会遇到一些问题。本文将介绍如何在 JavaScript 中正确地传递带有问号的 URL 参数。
使用 encodeURIComponent 函数
如果我们直接将带有问号的字符串拼接到 URL 上，可能会导致 URL 的解析错误。因此，我们需要对带有问号的字符串进行编码处理，确保它们能够被正确地解析。
在 JavaScript 中，我们可以使用 encodeURIComponent() 函数来对字符串进行编码。该函数可以将字符串中的特殊字符转义成它们对应的编码值。对于问号字符，其对应的编码值是 %3F。这样，在将字符串拼接到 URL 上之前，我们需要先使用 encodeURIComponent() 函数对其进行编码，例如：
const search = '?q=' + encodeURIComponent('What is the meaning of life?');
const url = 'https://www.example.com/search' + search;在上面的代码中，encodeURIComponent() 函数对字符串 'What is the meaning of life?' 进行了编码，并将其与查询参数 q 拼接成了一个查询字符串。最终，我们将查询字符串与基本 URL https://www.example.com/search 拼接得到完整的 URL。
使用 URLSearchParams 对象
除了手动使用 encodeURIComponent() 函数之外，我们还可以使用 JavaScript 内置的 URLSearchParams 对象来处理 URL 参数。该对象提供了一系列方法来操作 URL 参数，例如添加参数、删除参数、修改参数等。
对于带有问号的 URL 参数，我们可以使用 URLSearchParams 对象的 set() 方法来设置参数。该方法会自动对参数进行编码处理，因此我们无需手动调用 encodeURIComponent() 函数。例如：
const params = new URLSearchParams();
params.set('q', 'What is the meaning of life?');
const url = 'https://www.example.com/search?' + params.toString();在上面的代码中，我们创建了一个空的 URLSearchParams 对象，并使用其 set() 方法设置了查询参数 q 的值。然后，通过 toString() 方法将参数对象转换为字符串，并将其与基本 URL https://www.example.com/search 拼接得到完整的 URL。
总结
在 Web 开发中，正确地传递 URL 参数是非常重要的。当 URL 参数中包含问号字符时，我们需要对其进行编码处理，以避免 URL 解析错误。在 JavaScript 中，我们可以使用 encodeURIComponent() 函数或 URLSearchParams 对象来进行编码处理。这两种方法都能够确保 URL 参数被正确地解析，具体使用哪种方法取决于具体的场景和需求。
示例代码：
// 使用 encodeURIComponent 函数
const search = '?q=' + encodeURIComponent('What is the meaning of life?');
const url = 'https://www.example.com/search' + search;
// 使用 URLSearchParams 对象
const params = new URLSearchParams();
params.set('q', 'What is the meaning of life?');
const url = 'https://www.example.com/search?' + params.toString();来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25818