查国外网站备案网站制作公司 深圳

功能介绍

这段代码定义了一个名为 getParamsByKey 的函数，用于从当前页面的 URL 查询参数中提取指定键（key）对应的值。函数通过解析 window.location.search 获取查询参数，并返回匹配键的值。

代码解析

输入参数

• key: string：需要查询的 URL 参数键名。

逻辑流程

1. 检查当前环境是否支持 window 对象（确保在浏览器端运行）。
2. 获取 window.location.search，即 URL 中 ? 后的查询字符串。
3. 移除 ? 并分割参数为键值对数组（split('&')）。
4. 遍历数组，匹配键名与输入 key 一致的项，提取对应值。

返回值

• 返回匹配的字符串值；若无匹配项，返回空字符串 ''。

使用示例

假设当前 URL 为 https://example.com?name=test&id=123：

const name = getParamsByKey('name'); // 返回 'test'
const id = getParamsByKey('id');     // 返回 '123'
const unknown = getParamsByKey('foo'); // 返回 ''

注意事项

1. 环境兼容性：函数内校验了 window 对象存在性，避免在非浏览器环境（如 SSR）报错。
2. 参数格式：仅支持简单键值对（如 key=value），复杂值需额外处理（如 URL 解码）。
3. 默认值：未匹配时返回空字符串，调用方需自行处理边界情况。

优化建议

1. 添加 decodeURIComponent 处理值中的特殊字符（如 %20）。
2. 扩展为返回全部参数的接口（如 getAllParams），减少多次调用开销。
3. 使用 URLSearchParams API（现代浏览器支持）简化逻辑：

   export const getParamsByKey = (key: string): string => {let value = '';if (typeof window !== 'undefined') {const { search } = window.location;const queryArr = search.replace('?', '').split('&');queryArr.forEach((ele) => {if (ele && ele.split('=')[0] === key) {// eslint-disable-next-line prefer-destructuringvalue = ele.split('=')[1];}});}return value;
   };