URL

理解 URL——定位 Web 上每个资源的地址，以及各部分的含义。

你将学到

URL 是什么、它指向什么
URL 的解剖：scheme、host、path、query、fragment
查询参数如何把数据传给服务器
URL 编码如何处理特殊字符

概念讲解

URL

URL（Uniform Resource Locator，统一资源定位符）是 Web 上某资源的地址。每个网页、图片、API 端点都有 URL。你在浏览器输入它，浏览器就知道往哪发 HTTP 请求。

URL 的解剖

https://api.example.com:443/users/42?sort=name&page=2#settings

| 部分 | 示例 | 含义 | |------|---------|---------| | Scheme | https | 协议（http、https、ftp） | | Host | api.example.com | 服务器域名 | | Port | :443 | 连接端口（常省略） | | Path | /users/42 | 服务器上的具体资源 | | Query | ?sort=name&page=2 | 键值参数 | | Fragment | #settings | 页面内锚点 |

查询参数

查询串（? 之后）以键值对形式给服务器传数据，多组用 & 连接：

/search?q=javascript&limit=10&lang=en

服务器据此过滤、排序、分页。它出现在 URL 里，所以绝不要放秘密。

URL 编码

URL 只能含特定字符。空格、非 ASCII 字母、符号必须百分号编码——换成 % 加十六进制码。空格变 %20；一个中文字符变成多个 %XX。

https://example.com/search?q=hello%20world

这就是为什么 URL 有时满屏 %。浏览器和服务器自动处理编码，但手拼 URL 时你要懂它。

URL vs. URI vs. URN

严格说，URL *定位*（告诉你去哪），URN *命名*（告诉你是什么），URI 是统称。日常 Web 开发里你打交道的就是"URL"。

示例代码

              // 用内置 URL API 构建和解析 URL
const url = new URL("https://api.example.com/users");
url.searchParams.set("sort", "name");
url.searchParams.set("page", "2");
url.searchParams.set("q", "hello world");  // 自动编码！

console.log(url.toString());
// https://api.example.com/users?sort=name&page=2&q=hello+world

console.log(url.searchParams.get("q"));   // "hello world"（已解码）
console.log(url.host);      // "api.example.com"
console.log(url.pathname);  // "/users"

URL API 替你处理编码和解析。searchParams.set 自动编码；searchParams.get 自动解码。绝不要手拼查询串——用这个 API。

动手试一试

URL Encoder
百分号编码和解码 URL——看特殊字符究竟如何表示。

常见错误

错误写法

手拼查询串而不编码。

正确做法

用 URL 和 URLSearchParams API，它们自动编码。手拼 URL 在遇到空格、&、非 ASCII 字符时必出 bug。

错误写法

把敏感数据（API key、令牌）放进 URL 查询串。

正确做法

URL 会被服务器、代理、浏览器历史记录。秘密放 HTTP 头或请求体，绝不放 URL。

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误

URL