(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 的安全性和正确性。选择适当的编码函数取决于你处理的数据和用途。

相关推荐
GHUIJS5 分钟前
【vue3】vue3.5
前端·javascript·vue.js
-seventy-14 分钟前
对 JavaScript 原型的理解
javascript·原型
&白帝&32 分钟前
uniapp中使用picker-view选择时间
前端·uni-app
谢尔登39 分钟前
Babel
前端·react.js·node.js
ling1s39 分钟前
C#基础(13)结构体
前端·c#
卸任1 小时前
使用高阶组件封装路由拦截逻辑
前端·react.js
lxcw1 小时前
npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED
前端·npm·node.js
秋沐1 小时前
vue中的slot插槽,彻底搞懂及使用
前端·javascript·vue.js
这个需求建议不做1 小时前
vue3打包配置 vite、router、nginx配置
前端·nginx·vue
QGC二次开发1 小时前
Vue3 : Pinia的性质与作用
前端·javascript·vue.js·typescript·前端框架·vue