URL 类 详解

这是 浏览器 + Node.js 通用的官方标准 API,专门用来拆解、拼接、修改加粗样式网址,学完你处理所有链接都不用愁了。

基础用法

  1. 最简写法(完整网址)
js 复制代码
// 浏览器 / Node.js 都能直接运行
const url = new URL("https://www.baidu.com/s?wd=nodejs&page=1");
  1. 常用写法(路径 + 基础域名,处理接口最常用)
js 复制代码
// base:基础域名
// 第二个参数:相对路径
const url = new URL("/s?wd=nodejs", "https://www.baidu.com");

这个写法在 Node.js 写服务器、前端处理接口 时超级常用!

属性列表

属性名 取值 含义(通俗)
u.href 完整网址 整个链接字符串
u.protocol https: 协议(http/https/ftp)
u.host www.baidu.com:8080 域名 + 端口
u.hostname www.baidu.com 纯域名(不带端口)
u.port 8080 端口号
u.pathname /search 路径(域名后面的地址)
u.search ?wd=nodejs&page=3 完整查询参数(带?)
u.hash #chapter1 锚点(# 后面的内容)
u.origin https://www.baidu.com:8080 协议 + 域名 + 端口

这些属性既能读,也能改!

js 复制代码
u.pathname = "/home"; // 修改路径
u.port = "3000";      // 修改端口
console.log(u.href);  // 自动生成新网址

searchParams(处理?后面的参数)

searchParams 是 URL 类自带的参数管理器,不用你拆分字符串,自带一堆方法。
常用方法

js 复制代码
const u = new URL("https://xxx.com?wd=nodejs&page=2");
  1. 获取参数
js 复制代码
u.searchParams.get("wd")   // "nodejs"
u.searchParams.get("page") // "2"
  1. 修改参数
js 复制代码
u.searchParams.set("page", 10); 
// 网址变成 ?wd=nodejs&page=10
  1. 添加参数
js 复制代码
u.searchParams.append("limit", 20);
// 网址变成 ?wd=nodejs&page=10&limit=20
  1. 判断参数是否存在
js 复制代码
u.searchParams.has("wd") // true
  1. 删除参数
js 复制代码
u.searchParams.delete("page");
  1. 遍历所有参数
js 复制代码
u.searchParams.forEach((value, key) => {
  console.log(key, value);
});

特点

1. 全平台通用

  • 浏览器原生支持
  • Node.js 原生支持
  • Electron 支持
  • 手机端网页支持

2. 自动处理编码

你不用管中文乱码,URL 类自动编码 / 解码:

js 复制代码
const url = new URL("https://xxx.com?name=张三");
console.log(url.search); // ?name=%E5%BC%A0%E4%B8%89 (自动编码)
console.log(url.searchParams.get("name")); // 张三 (自动解码)
相关推荐
濮水大叔1 天前
为什么 AI 最擅长 React/Next.js,却很少看到真正好用的 Next.js 开源项目?
react.js·node.js·next.js
AI行业学习1 天前
Claude Code + cc-switch + Git + Node.js 全套下载+安装+配置完整版
开发语言·git·python·前端框架·node.js·html·notepad++
万亿少女的梦1681 天前
基于微信小程序、Express与MongoDB的校园失物招领系统设计
mongodb·微信小程序·node.js·express·系统设计
AI行业学习1 天前
Claude Code + cc-switch + Git + Node.js 一站式完整安装配置教程【8.3】
git·python·安全·前端框架·node.js·html·notepad++
AI行业学习1 天前
Claude Code + cc-switch + Git + Node.js 一站式完整安装配置教程(2026最新·国内可用版)
人工智能·git·python·安全·node.js·html·notepad++
用户847181054192 天前
从0开始打造自己的个人智能体(一)——Deep Agents js环境配置与对话入门
node.js·agent
减瓦2 天前
从 0.1 到 26:一个运行时的十七年进化史
node.js
晓得迷路了2 天前
栗子前端技术周刊第 140 期 - pnpm、Node 新 API 文档网站、Oxlint...
前端·javascript·node.js
孟陬3 天前
Node.js 测试报告格式一览和自定义 json 格式 `--test-reporter=spec | tap | dot | junit | lcov`
node.js
陳陈陳4 天前
🚀 前端流式输出革命:SSE + BFF 架构从零到一实战指南
vue.js·架构·node.js