JavaScript 获取URL参数实战详解（新手必看）

刚接触JavaScript的时候，获取URL参数曾让我困惑了好一阵子。现在回头看，当初的困惑大多源于没有找到好的切入点。希望本文能成为那个切入点。

关于获取URL参数，你可能只知道一半

最近在项目里重度用到了获取URL参数，踩过一些坑，也总结出一些心得。趁记忆还新鲜，整理成文，供同样在用JavaScript的朋友参考。

掌握获取URL参数的几个关键

• 遇到获取URL参数相关的问题，先看错误信息，大部分线索都藏在报错里。
• 了解获取URL参数的返回值约定，尤其是失败时返回什么，别让异常悄悄溜过。
• 对获取URL参数的输入做校验，永远不要相信外部传入的数据。
• 使用获取URL参数前先评估有没有更简单的替代方案，最简单的往往最可靠。
• 获取URL参数的命名和用法要保持团队内一致，否则后期维护成本会成倍增加。

掌握了要点之后，示例代码看起来就轻松多了。

眼见为实：获取URL参数示例

来看一个具体的例子——获取 URL 参数：

const params = new URLSearchParams(location.search);
console.log(params.get('id'));
params.forEach((v, k) => console.log(k, v));

实践中的注意事项

• 功能上线后观察一段时间再撤注意力，很多问题有延迟性。
• 复制粘贴代码后一定要逐行检查，隐性问题最爱藏在这里面。
• 批量操作前先小批量试跑，确认无误再全量执行。

总结

本文示例都经过实际验证，可以放心参考。如果你在获取URL参数的使用中发现了新的坑，欢迎补充分享。

---

遇见问题加 QQ23979811 协助处理