(JavaScript)escape、encodeURI、encodeURIComponent的介绍与区别

前言1-URL的介绍

URL 是 "Uniform Resource Locator"(统一资源定位符)的缩写,它是用来标识和定位互联网上的资源(如网页、图片、文档等)的一种标识方式。URL 是一个文本字符串,通常包含了资源的地址、访问方式以及其他信息,以便浏览器或应用程序能够准确找到并检索所需的资源。

URL 通常由以下几个部分组成:

  1. 协议(Scheme): 协议指定了资源的访问方式,常见的协议包括 HTTP、HTTPS、FTP、mailto、file 等。协议通常作为 URL 的开头,后跟冒号和双斜线(如 https://)。
  2. 主机(Host): 主机部分指定了资源所在的服务器或计算机的域名或 IP 地址。例如,www.example.com 是一个常见的主机名。
  3. 端口(Port): 端口是可选的,它指定了服务器上用于处理请求的端口号。如果未指定端口,通常会使用默认端口,如 HTTP 的默认端口是 80。
  4. 路径(Path): 路径部分指定了服务器上资源的位置,通常是一个文件路径或目录路径。路径以斜杠 / 开头,如 /images/pic.jpg
  5. 查询参数(Query): 查询参数允许传递额外的信息给服务器,通常以 ? 开头,参数之间用 & 分隔,如 ?name=John&age=30
  6. 片段标识符(Fragment): 片段标识符通常用于指定资源中的特定位置,如文档内的锚点。片段标识符以 # 开头,如 #section2

示例 URL:https://www.example.com:8080/images/pic.jpg?name=John&age=30#section2

URL 是互联网上标识和定位资源的重要工具,它允许用户或应用程序访问网络上的各种资源,从网页到文件,从数据库查询到电子邮件。浏览器和其他网络客户端使用 URL 来获取并显示 Web 页面,同时它也用于构建超链接,使用户能够从一个页面跳转到另一个页面。

前言2-URI的介绍

URI 是 "Uniform Resource Identifier"(统一资源标识符)的缩写,它是一种用来唯一标识和定位互联网上资源的字符序列。URI 是一个广义的概念,用于表示任何类型的资源,包括但不限于 Web 页面、文件、数据库记录、电子邮件地址等。

URI 通常分为两个主要子集:

  1. URL(Uniform Resource Locator): URL 是 URI 的一个子集,用于标识和定位互联网上的资源的位置。它包括了资源的地址和访问方式,以确保资源可以被正确地定位和检索。URL 包含了协议、主机、端口、路径、查询参数和片段标识符等组成部分。示例 URL 如:https://www.example.com:8080/images/pic.jpg?name=John&age=30#section2
  2. URN(Uniform Resource Name): URN 是 URI 的另一个子集,用于标识资源的名称,而不关心资源的位置或如何访问它。URN 的目的是提供一个唯一的、永久的资源标识符。例如,ISBN(国际标准书号)就是一种 URN,它用于唯一标识图书,而不考虑图书的存储位置或如何获取它。

总的来说,URI 是一个更广泛的概念,用于标识和定位各种类型的资源,而 URL 和 URN 是 URI 的两个主要子集,分别用于标识资源的位置和名称。 URI 在互联网中起到了至关重要的作用,它使我们能够方便地引用和访问各种资源,无论是 Web 页面、文件、数据还是其他内容。

escape:

  • 介绍: escape 是 JavaScript 中的函数,用于编码字符串中的特殊字符,以便在 URL 中安全传递。它会将字符串中的特殊字符编码为 % 后跟两个十六进制数字的形式。
  • 区别: escape 主要用于编码字符串中的特殊字符,而不是用于整个 URI。它在现代 JavaScript 中已经被废弃,不再推荐使用,因为它存在一些问题,特定字符不会被编码,而且不同浏览器中的行为可能不一致。

存在的问题:

  1. 不对所有字符进行编码: escape 函数并不对所有特殊字符进行编码。例如,它不会对 +& 这样的字符进行编码,这可能导致安全性问题。这意味着在某些情况下,escape 编码的字符串可能不安全。
  2. 不同浏览器之间的差异: 不同浏览器对 escape 的实现可能不一致,这会导致跨浏览器兼容性问题。不同浏览器可能对特殊字符的处理方式不同,因此你无法依赖一致的行为。
  3. 被废弃: escape 已经被废弃,不再包括在 ECMAScript 标准中,因为它存在上述问题。在现代 JavaScript 中,推荐使用 encodeURIComponent 来代替 escape,因为 encodeURIComponent 提供了更可靠和一致的 URL 编码。
  4. 不支持 Unicode: escape 函数不支持对 Unicode 字符的编码,这意味着它在处理国际化和多语言字符集方面存在限制。

encodeURI:

  • 介绍: encodeURI 也是 JavaScript 中的函数,用于编码整个 URI(Uniform Resource Identifier)字符串,以确保整个 URI 在 URL 中安全传递。它保留 URI 结构中的某些字符,如冒号、斜杠、问号和 ampersand,以防止破坏 URI 结构。
  • 区别: encodeURI 用于编码整个 URI ,而不是特定的参数值。它不会对 URI 中的特殊字符进行编码,因为它将整个 URI视为一个整体。通常用于确保整个 URI 的安全性,而不是处理特定参数值的安全性。

encodeURIComponent:

  • 介绍: encodeURIComponent 也是 JavaScript 中的函数,用于编码字符串中的特殊字符,特别是用于编码 URL 查询参数中的值。它会将字符串中的特殊字符编码为 % 后跟两个十六进制数字的形式。
  • 区别: encodeURIComponent 主要用于编码 URL 查询参数中的值,以确保参数值的安全传递,而不关心整个 URI 的结构。它是在构建 URL 查询参数时的首选选择,因为它提供了对特定参数值的安全编码。

总的来说,escape 在现代 JavaScript 中不建议使用,而 encodeURI 用于编码整个 URI ,而 encodeURIComponent 用于编码特定的参数值,以确保 URL 的安全性和正确性。选择适当的编码函数取决于你处理的数据和用途。

相关推荐
excel2 分钟前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
uhakadotcom10 小时前
视频直播与视频点播:基础知识与应用场景
后端·面试·架构
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪11 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom12 小时前
快速开始使用 n8n
后端·面试·github
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试