JS 检查 URL 参数

有时候我们需要检查 URL 参数是否存在或者是否符合要求。JavaScript 中提供了一些工具和方法可以方便地进行这些操作。

获取 URL 参数

我们可以使用 window.location.search 来获取当前页面的 URL 中的查询参数部分，即 ? 后面的部分。这个查询参数是以字符串的形式返回的。我们可以使用正则表达式或者其它字符串操作方法来处理这个参数。

下面是一个获取 URL 参数的示例：

const queryString = window.location.search;
console.log(queryString); // 输出 "?id=123&name=John+Doe"

解析 URL 参数

我们可以使用 URLSearchParams 对象来解析 URL 参数。这个对象可以让我们方便地获取特定的参数值，也可以让我们遍历所有的参数。

下面是一个使用 URLSearchParams 对象来解析 URL 参数的示例：

const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');
const name = urlParams.get('name');
console.log(id); // 输出 "123"
console.log(name); // 输出 "John Doe"

检查 URL 参数是否存在

我们可以使用上面的方式获取 URL 参数后再检查参数的值是否存在。如果参数不存在，那么获取的值为 null。

下面是一个检查 URL 参数是否存在的示例：

const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');
if (id === null) {
  console.log('ID 参数不存在');
} else {
  console.log(id);
}

检查 URL 参数是否符合要求

我们可以使用正则表达式来检查 URL 参数的值是否符合要求。正则表达式可以匹配特定的模式，让我们更加方便地进行验证。

下面是一个使用正则表达式来检查 URL 参数是否符合要求的示例：

const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');
const idRegex = /^[0-9]+$/;
if (id === null) {
  console.log('ID 参数不存在');
} else if (!idRegex.test(id)) {
  console.log('ID 参数格式不正确');
} else {
  console.log(id);
}

这个示例中，我们使用正则表达式 /^[0-9]+$/ 来检查 ID 参数值是否由数字组成。如果参数格式不正确，我们会输出一个错误信息。

总结

以上是一些常用的检查 URL 参数的方法和技巧。我们可以根据实际需要进行选择和组合，来满足不同的业务需求。