如何在alert弹窗中显示URL的GET请求参数？附现有开发代码

以下是可直接运行的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
  // 如果要读取当前页面的真实URL，可替换为 let url = window.location.href
  let url = "https://example.com/path/to/page?name=ferret&color=purple";
  let params = (new URL(url)).searchParams;

  // 场景1：弹出单个指定参数
  alert("name参数的值为：" + params.get('name'));

  // 场景2：弹出所有请求参数（不需要可以注释掉）
  let allParamsText = "所有请求参数：\n";
  for (let [key, value] of params) {
    allParamsText += `${key}: ${value}\n`;
  }
  alert(allParamsText);
</script>
</body>
</html>

关键实现说明 #

• 修复了原代码的语法问题：删除script标签前多余的<，将JS注释符号从#替换为//，避免运行报错
• URLSearchParams的get()方法可直接获取单个参数的值，适配只需要展示特定参数的场景
• 遍历URLSearchParams实例可拿到全部键值对，拼接为格式化字符串后即可在alert中展示所有参数
• 要适配当前页面的真实请求参数，只需把url变量赋值为window.location.href即可

内容的提问来源于stack exchange，提问作者deco99