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

目录

前言

全部内容

 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中的查询字符串部分进行编码,它会对所有非标准字符进行编码。

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

千兆路由只有200M,原来是模式选择不对,也找到了内网不能通过动态域名访问内部服务的原因

本来1000M的宽带接入的,但是一测试发现只有200M,把电信叼了过来, 一测试发现宽带没问题,网线正常,网卡正常,只有可能是路由器的问题了,尴尬了,赶紧给满意好评放他走。回头好好研究一…

nvm工具解决nodejs版本切换问题

常见版本问题 npm启动vite项目报错,信息如下 npm run dev> my-vue-app0.0.0 dev D:\data\code\document-assistant-web > vitefile:///D:/data/code/document-assistant-web/node_modules/vite/bin/vite.js:7await import(source-map-support).then((r) >…

16岁还是街头餐厅“洗碗妹”,46岁已成美国“三院士”,华人科学家李飞飞的美国之路

昨天群里大V分享了一本书《The Worlds I See》,我迫不及待的下载阅读了。 16岁,她还是美国街头餐厅的“洗碗妹”。 46岁,她已成为美国三大权威科学院院士、斯坦福教授、当代科技领军人物榜上,与乔布斯齐名的人物。 她就是华裔女科…

一张图搞懂什么是BCD8421编码

如图所示 BCD8421编码的意义是 用四位二进制数表达一位的十进制数 因此十进制下的0~9在BCD8421编码下与其二进制表达是一样的 而多位的十进制数 比如说“10” 则需要将它拆分成两个单独的数“1”和“0” 分别用BCD8421编码表示这两个数 十进制“1” -> 0001 十进…

CTFhub-RCE-远程包含

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

合众汽车选用风河Wind River Linux系统

导读合众新能源汽车股份有限公司近日选择了Wind River Linux 用于开发合众智能安全汽车平台。 合众智能安全汽车平台(Hozon Automo-tive Intelligent Security Vehicle Plat-form)是一个面向高性能服务网关及车辆控制调度的硬件与软件框架,将于2024年中开始投入量产…

传奇手游天花板赤月【盛世遮天】【可做底版】服务端+自主授权+详细教程

搭建资源下载地址:传奇手游天花板赤月【盛世遮天】【可做底版】服务端自主授权详细教程-海盗空间

智能巡检软件哪个好?中小企业如何提升工作效率与质量?

在当今数字化、智能化的时代,智能巡检软件作为一种高效的工具,已经在各行各业得到了广泛的应用。它利用物联网、大数据、人工智能等技术,为巡检工作提供了全面的解决方案,帮助企业实现数据化、智能化管理,提高工作效率…

Power Automate-条件判断和通知操作

在模板中搜索推送通知,选择获取有关重要电子邮件的推送通知 点击创建,再去编辑 该操作的逻辑是收件箱里收到重要性为高的电子邮件时进行下一步 可以更改邮件的重要性选择,点击下拉框重新选择即可 还可以在此步骤下再创建新操作,选…

如何利用ChatGPT撰写学术论文?

在阅读全文前请注意,本文是利用ChatGPT“辅助完成”而不是“帮写”学术论文,请一定要注意学术规范! 本文我将介绍如何使用清晰准确的“指令”让ChatGPT帮助我们在论文写作上提高效率,希望通过本文的指导,读者能够充分…

C# 将PDF文档转换为Word文档

一.开发框架: .NetCore6.0 工具:Visual Studio 2022 二.思路: 1.使用SHA256Hash标识文档转换记录,数据库已经存在对应散列值,则直接返还已经转换过的文档 2.数据库没有对应散列值记录的话,则保存上传PDF…

2024郑州光伏展|郑州储能展|郑州国际太阳能光伏储能展览会

2024第四届中国(郑州)太阳能光伏及储能产业展览会 时间:2024年4月8-10日 地点:郑州.中原国际博览中心 随着人们对环境保护意识的不断提高,太阳能光伏和储能技术在能源领域的应用越来越广泛。为了更好地推广和应用太…

StackExchange.Redis 高并发下timeout超时问题如何解决?

查看服务端程序负载还行,根据打印的连接看到一知半懂,按GitHub的issue提示,这2个Busy的数量不能比Min的大,即要提示Min的数值; 的各个字段: Timeout performing EXEC (1000ms): 表示在执行一个事务(MULTI..…

场景案例∣企业如何打造数智采购商城,赋能企业提速降本增效

从1998年第一个电商平台成立至今,已经有25年。 随着数字化经济加快发展,大数据、云计算、物联网及人工智能的进一步应用,近年来电商化采购模式也强势崛起,在企业采购领域掀起革命性的巨浪。 而随着市场需求的变化多样,…

振南技术干货集:研发版本乱到“妈不认”? Git!(5)

注解目录 1、关于 Git 1.1Git 今生 (Git 和 Linux 的生父都是 Linus,振南给你讲讲当初关于 Git 的爱恨情愁,其背后其实是开源与闭源两左阵营的明争暗斗。) 1.2Git的爆发 (Git 超越时代的分布式思想。振南再给你讲讲旧金山三个年轻人创办 GitHub&…

程序猿的护城河是什么

文章目录 什么类型的程序员容易被淘汰?T型人才往底层学抛弃焦虑,无所畏惧地往前冲。多看多想多实践 什么类型的程序员容易被淘汰? 微信前首席技术负责人张绍文说过: “坦白说,现在很多移动开发工程师更像是 API工程师…

du_命令可以像find_命令那样列出最大的文件吗

【赠送】IT技术视频教程,白拿不谢!思科、华为、红帽、数据库、云计算等等_厦门微思网络的博客-CSDN博客文章浏览阅读418次。风和日丽,小微给你送福利~如果你是小微的老粉,这里有一份粉丝福利待领取...如果你是新粉关注到了小微&am…

【ArcGIS Pro微课1000例】0031:las点云提取(根据范围裁剪点云)

本文讲解ArcGIS Pro3.0中,las点云数据的提取(根据范围裁剪点云)方法。 文章目录 一、加载数据二、工具介绍三、点云裁剪一、加载数据 打开ArcGIS Pro,新建地图,加载配套实验数据包中的0031.rar中的点云数据point.las与范围bound.shp,如下图所示: 二、工具介绍 名称:提…

Riskified: 2023年电商政策滥用问题恶化,正严重挑战商家盈利底线

2023年11月14日,中国上海 —— 近日,由全球领先的电子商务欺诈和风险智能解决方案提供商 Riskified 发布的《政策滥用及其对商家的影响:2023年全球参考基准》报告显示,政策滥用问题正进一步恶化,超过九成电商商家正在承…

突然消失的桌面文件如何恢复?详细教程让你轻松解决问题!

桌面文件突然消失,对于很多人来说,可能是个令人头疼的问题。这些文件可能包含重要的信息,也可能是数日甚至数周的努力成果。那么,当这种情况发生时,我们如何恢复丢失的文件呢?本文将提供一些实用的建议。 1…