JavaScript中什么是URL对象_如何解析参数-js教程-PHP中文网

JavaScript中什么是URL对象_如何解析参数

狼影

发布： 2025-12-09 17:01:08

原创

460人浏览过

URL对象是JavaScript中用于解析、构造和操作URL的内置接口，能可靠提取协议、域名、路径、查询参数等；其searchParams属性为URLSearchParams实例，支持get、set、append、delete等方法处理查询参数，并可通过Object.fromEntries()转为对象。

javascript中什么是url对象_如何解析参数

URL对象是JavaScript中用于解析、构造和操作URL的内置接口，它能轻松提取协议、域名、路径、查询参数等部分，比用正则或字符串分割更可靠、更安全。

URL对象的基本用法

创建一个URL对象很简单，传入完整的URL字符串即可：

new URL("https://example.com:8080/path/to/page?name=alice&age=30#section1")

构造成功后，就能直接访问各种属性：

href：完整的URL字符串
origin：协议 + 域名 + 端口（如 https://example.com:8080）
protocol：协议名，含冒号（如 https:）
hostname：纯域名（如 example.com）
port：端口号（有则返回，否则为空字符串）
pathname：路径部分（如 /path/to/page）
search：查询字符串，含问号（如 ?name=alice&age=30）
hash：锚点，含井号（如 #section1）

如何解析查询参数（searchParams）

URL对象的 searchParams 属性是一个 URLSearchParams 实例，专用于处理查询参数，支持增删改查：

立即学习“Java免费学习笔记（深入）”；

魔术橡皮擦

智能擦除、填补背景内容

查看详情

get(key)：获取第一个匹配值（如 url.searchParams.get("name") → "alice"）
getAll(key)：获取所有同名参数值（适合多选、数组类参数）
has(key)：判断是否存在该参数
set(key, value)：设置或替换参数（会覆盖已有同名项）
append(key, value)：追加参数（允许同名多个）
delete(key)：删除指定参数
toString()：转成标准查询字符串（如 "name=alice&age=30"）

想把所有参数转成普通对象？可以这样写：

const params = Object.fromEntries(url.searchParams);<br>// → { name: "alice", age: "30" }

登录后复制

注意：Object.fromEntries() 返回的值都是字符串，如需数字或布尔值，得手动转换。

实际使用小提示

URL构造函数要求传入**绝对URL**；若只有相对路径或query字符串，可补全为 new URL(query, location.href) 来基于当前页解析
searchParams是实时的，修改它会自动更新URL对象的 href 和 search
不支持IE浏览器，如需兼容，可用 url-parse 或手写解析函数作为降级方案
参数值会自动解码（如 %20 → 空格），无需额外调用 decodeURIComponent