escape, encodeURI, encodeURIComponent 有什么区别以及作用?

news2024/12/27 11:34:49

目录

前言

全部内容

 1. 注释

2. 写法

3. 代码 

4. 事件

5. 总结

6. 理论

7. 用法

8. 结论

9. API

10. 优缺点

escape:

encodeURI:

encodeURIComponent:

11. 方法

总结


 

🙂博主:冰海恋雨.
🙂文章核心:escape, encodeURI, encodeURIComponent 有什么区别以及作用?

 在JavaScript中,escape, encodeURI, 和 encodeURIComponent 是三个用于处理URI(统一资源标识符)编码的函数。它们在不同的场景下有不同的应用,并且它们处理字符串的方式也有所不同。在这篇文章中,我们将详细探讨这三个函数的区别、用法、优缺点以及最佳实践。

前言

 在Web开发中,我们经常需要处理URLs和URI组件。这些URLs可能包含特殊字符,如空格、斜杠或其他非ASCII字符,这些特殊字符可能会导致URL解析错误或安全漏洞。为了防止这些问题,我们需要对URLs进行编码,将特殊字符转换为它们的百分号编码表示。escape, encodeURI, 和 encodeURIComponent 是JavaScript提供的三个用于这种编码的函数。

全部内容

 1. 注释

在使用这三个函数时,添加注释是非常重要的,因为它们的行为在某些情况下可能会令人困惑。注释可以帮助其他开发者理解为什么选择使用特定的函数,以及它们的预期行为是什么。 

2. 写法
  •  escape: 这个函数已经被弃用,不推荐使用。它对ASCII字母数字字符不进行编码,对特殊字符进行编码,对非ASCII字符进行编码。
  • encodeURI: 用于编码整个URI。它不会对属于URI的特殊字符进行编码,如:/?#&=+。
  • encodeURIComponent: 用于编码URI的组件。它会对属于URI的特殊字符进行编码。
3. 代码 
var url = "http://example.com/参数?name=值&age=20";
 
// 不推荐使用
var escapedUrl = escape(url);
console.log(escapedUrl); // "http%3A//example.com/%u53C2%u6570?name=%u503C&age=20"
 
// 编码整个URI
var encodedUrl = encodeURI(url);
console.log(encodedUrl); // "http://example.com/%E5%8F%82%E6%95%B0?name=%E5%80%BC&age=20"
 
// 编码URI组件
var encodedComponent = encodeURIComponent(url);
console.log(encodedComponent); // "http%3A%2F%2Fexample.com%2F%E5%8F%82%E6%95%B0%3Fname%3D%E5%80%BC%26age%3D20"

 

4. 事件

在处理用户输入或从服务器接收数据时,正确编码URL是非常重要的,以防止XSS攻击或其他安全漏洞。 

5. 总结

正确编码URL和URI组件是Web开发中的一个重要方面。escape函数已经被弃用,不应再使用。encodeURI和encodeURIComponent提供了更安全、更可靠的方式来编码URLs。 

6. 理论

URI编码是基于RFC 3986标准的,它定义了如何对URI中的特殊字符进行编码。 

7. 用法
  • 使用encodeURI当你需要编码整个URI时。
  • 使用encodeURIComponent当你需要编码URI的组件时。 

8. 结论

正确地编码URL和URI组件是确保Web应用安全和可靠的关键。encodeURI和encodeURIComponent提供了在不同场景下进行编码的能力,而escape函数由于其不一致和不安全的行为,不应再使用。 

9. API

这三个函数都是JavaScript语言的一部分,不依赖于任何外部库或API。

10. 优缺点
  • escape:
  • 优点:在过去的代码中广泛使用。
  • 缺点:已被弃用,对非ASCII字符的编码不一致。

encodeURI:
  • 优点:适用于编码整个URI,不会对属于URI的特殊字符进行编码。
  • 缺点:不能用于编码URI的组件。
encodeURIComponent:

优点:适用于编码URI的组件,会对属于URI的特殊字符进行编码。
缺点:如果用于编码整个URI,可能会导致错误。 


11. 方法

避免使用escape。
根据需要选择使用encodeURI或encodeURIComponent。
在处理用户输入或从不可信源接收数据时,始终对URL进行编码。 

总结

在Web开发中,正确编码URL和URI组件是非常重要的,它可以防止安全漏洞并确保应用的可靠性。escape函数由于其不一致和不安全的行为,不应再使用。encodeURI和encodeURIComponent提供了更安全、更可靠的编码方法,应根据具体场景选择使用。通过理解这些函数的区别和正确使用它们,我们可以创建更安全、更稳健的Web应用。

  • escapeencodeURIencodeURIComponent都是用于对URL进行编码的JavaScript函数。
  • escape函数用于对字符串中的非ASCII字符和特殊字符进行编码,但不会对以下字符进行编码: @*/+
  • encodeURI函数用于对整个URL进行编码,不会对以下字符进行编码: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_.!~*'()
  • encodeURIComponent函数用于对URL中的查询字符串部分进行编码,它会对所有非标准字符进行编码。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1207060.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

突破职场竞争,引领未来发展:考取《研发效能(DevOps)工程师职业技术认证》

就业形势堪忧,什么最有保障?考个“国家级”证书傍身吧! 工信部教考中心作为中国领先的行业技能认证机构,其颁发的认证证书不仅代表了个人在信息技术领域的专业能力,更可以录入工业和信息化技术技能人才数据库&#xf…

上海市合成生物产业协会第一届第一次会员大会暨成立仪式今日召开

IFTNews科技讯:11月12日下午,上海市合成生物产业协会第一届第一次会员大会暨成立仪式在上海浦东成功举办。上海市经济和信息化委员会副主任刘平、上海市科学技术委员会一级巡视员兼副主任朱启高、上海市推进科技创新中心建设办公室专职副主任陈尧水出席大…

【技术干货】开源库 Com.Gitusme.Net.Extensiones.Core 的使用(二)

Com.Gitusme.Net.Extensiones.Core 扩展库 1.0.6 版本已发布。 1、版本变更说明 新增Sokcet套接字扩展。简化Socket操作,支持自定义命令封装,使用方便快捷,让您聚焦业务实现,而不必关心底层逻辑,提高开发效率。日志功…

二叉树理论碎碎记

二叉树的种类 在刷题的过程中,我们主要关注两种主要形式:满二叉树和完全二叉树。 满二叉树 如果一棵二叉树只有度为0的结点和度为2的结点,并且度为0的结点在同一层上,则这棵二叉树为满二叉树。如下图所示:这棵二叉…

RT1170的ITM SWO配置,实现printf输出及PC指针的采样分析

最近公司准备启动一个新的项目,使用NXP的MIMXRT1170芯片作为主控,在熟悉芯片的过程中发现RT1176具备ITM和SWO功能模块,于是针对之前项目中因工程庞大导致调试困难的问题,决定使用SWO输出调试信息,这样既可以节省硬件的…

Centos7.9用rancher来快速部署K8S

什么是 Rancher? Rancher 是一个 Kubernetes 管理工具,让你能在任何地方和任何提供商上部署和运行集群。 Rancher 可以创建来自 Kubernetes 托管服务提供商的集群,创建节点并安装 Kubernetes,或者导入在任何地方运行的现有 Kube…

微服务系列-使用 RestTemplate 的 Spring Boot 微服务通信示例

公众号「架构成长指南」,专注于生产实践、云原生、分布式系统、大数据技术分享。 概述 下面我们将学习如何创建多个 Spring boot 微服务以及如何使用 RestTemplate 类在多个微服务之间进行同步通信。 微服务通信有两种风格: 同步通讯异步通信 同步通…

CTFhub-RCE-远程包含

给咱一个phpinfo那么必然有他的道理 PHP的配置选项allow_url_include为ON的话,则include/require函数可以加载远程文件,这种漏洞被称为"远程文件包含漏洞(Remote File Inclusion RFI)"。 allow_url_fopen On 是否允许打开远程文件 allow_u…

基于FPGA的图像RGB转HLS实现,包含testbench和MATLAB辅助验证程序

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1计算最大值和最小值 4.2计算亮度L 4.3计算饱和度S 4.4计算色调H 5.算法完整程序工程 1.算法运行效果图预览 将FPGA结果导入到MATLAB显示效果: 2.算法运行软件版本 Vivado…

深入理解 Spring Boot 内置工具类:ReflectionUtils

文章目录 1. 什么是反射?2. 使用 ReflectionUtils2.1 获取类的所有字段2.2 调用方法2.3 访问字段 3. 源码分析3.1 doWithFields3.2 findMethod3.3 invokeMethod 4. 拓展与分析4.1 拓展4.2 性能考虑4.3 Java 9 模块化 5. 总结 🎉欢迎来到架构设计专栏~深入…

STM32 I2C详解

STM32 I2C详解 I2C简介 I2C(Inter IC Bus)是由Philips公司开发的一种通用数据总线 两根通信线: SCL(Serial Clock)串行时钟线,使用同步的时序,降低对硬件的依赖,同时同步的时序稳定…

振南技术干货集:深入浅出的Bootloader(3)

注解目录 1、烧录方式的更新迭代 1.1 古老的烧录方式 (怀旧一下,单片机高压烧录器。) 1.2 ISP 与ICP 烧录方式 (还记得当年我们玩过的 AT89S51?) 1.3 更方便的 ISP 烧录方式 1.3.1串口 ISP (是 STC 单片机成就了我们,还是我们成就了…

迅软DSE答疑专业解析:内网遭受攻击的威胁到底有多大

当今数字化时代,企业数据安全已演变为企业生存和发展的至关重要因素。随着信息技术的迅猛发展,企业内网不仅是承载核心数据和信息的关键平台,也成为黑客和恶意软件攻击的主要目标。因此,确保企业数据安全和内网安全已成为企业管理…

2024上海国际智能驾驶技术展览会(自动驾驶展)

2024上海国际智能驾驶技术展览会 2024 Shanghai International Autonomous driving Expo 时间:2024年3月26-28日 地点:上海跨国采购会展中心 随着科技的飞速发展,智能驾驶已经成为了汽车行业的重要趋势。在这个时代背景下,汽车不…

element ui的日期选择器动态设定年份,并默认显示在该年份范围的日期时间

选中某个年份,让日期选择器只能选择该年份内的时间,并且默认显示该年份的时间(由于日期选择器默认显示为当前时间,所以需要跳转到选择的年份) 例:年份选择了2022年,那么日期选择也相应显示到2022年&#xf…

160. 相交链表-哈希表法O(n)时间复杂度

160. 相交链表-o(n)时间复杂度 给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点,返回 null 。 图示两个链表在节点 c1 开始相交: 题目数据 保证 整个…

CPU vs GPU:谁更适合进行图像处理?

CPU 和 GPU 到底谁更适合进行图像处理呢?相信很多人在日常生活中都会接触到图像处理,比如修图、视频编辑等。那么,让我们一起来看看,在这方面,CPU 和 GPU 到底有什么不同,哪个更胜一筹呢? 一、C…

揭密,这个微信群机器人的所有秘密在这里

技术长久不用就废了,我想把软件开发技术重新捡拾起来。 咱们“一起学英语”群已有三年时光,群里很多朋友互帮互助走到了今天。可是,即使再好玩的英语话题,也有谈腻的时候。 群里是不是应该引入一点好玩的东西? 人工智能…

【DP】背包问题全解

一.简介 DP(动态规划)背包问题是一个经典的组合优化问题,通常用来解决资源分配的问题,如货物装载、投资组合优化等。问题的核心思想是在有限的资源约束下,选择一组物品以最大化某种价值指标,通常是总价值或…

Ulimit -系统资源配额配置说明

Linux 对于每个用户,系统限制其最大进程数,为提高性能,可以根据设备资源情况, 设置个Linux用户的最大进程数,一些需要设置为无限制; ulimit 参数说明 选项 含义 例子 -H 设置硬资源限制,一旦…