2020/06/30 周二
在JS高程3里介绍URI编码方法时，有这样一个描述：有效的URI中不能包含某些字符，比如空格。使用URI编码方法可以把所有无效的字符替换为特殊的utf-8编码，从而让浏览器能够接受和理解
在《HTTP权威指南》第2章URL与资源 - 各种令人头疼的字符(p38)里有介绍原因：
URL是可移植的(portable)，它要统一的命名网上所有的资源，意味着要通过各种不同的协议来传送这些资源，这些协议在传输数据时都会使用不同的机制，在设计URL时，需要满足以下特性：
- 可以通过任意协议进行安全的传输：完整/不丢失信息，以SMTP电子邮件的简单邮件传输协议为例，它使用的传输方法会剥去一些特定字符，为了避开这些问题，URL只能使用一些相对较小的、通用的安全字母表中的字符。
- URL具有可读性：即使是看不见，不可打印的字符也能在URL中使用，比如空格
- 完整性：人们可能会希望URL中可以包含除通用安全字母表之外的二进制数据或字符，因此需要一种转义机制，能够将不安全的字符编码转为安全字符再进行传输
之前有简单说明encodeURIComponent与encodeURI的区别：encodeURI只转义空格，encodeURIComponent会转义所有的非字母数字字符
其实上面的说法是错误的，在mdn的一个示例中，有更加详细说明两者的区别
// encodeURI vs encodeURIComponent
// encodeURI() differs from encodeURIComponent() as follows:
var set1 = ";,/?:@&=+$#"; // Reserved Characters
var set2 = "-_.!~*'()"; // Unreserved Marks
var set3 = "ABC abc 123"; // Alphanumeric Characters + Space [ˌælfənjuːˈmerɪk] 字母数字 + 空格console.log(encodeURI(set1)); // ;,/?:@&=+$#
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // ABC%20abc%20123 (the space gets encoded as %20)console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (the space gets encoded as %20)
上面的例子中可以看到，URI编码方法一般有3种类型的字符
|
字符类型(中)
|
字符类型(英)
|
包含
|
encodeURI
|
encodeURIComponent
|
|
URI保留字符
|
Reserved Characters
|
“;,/?
2020-06 前端技术汇总相关推荐
- 2019-10 前端技术汇总
2019-10 前端技术汇总 2019/10/31 周四 #HTML注释的重要性 #2019/10/30 周三 #svn拉取代码 #如果mac没有装xcode,怎么安装svn #2019/10/28 ...
- 跟着大咖学前端（国内知名前端技术汇总）
国内知名前端大佬汇总,该名单排名 不分先后 尤雨溪(尤小右)- vue项目作者 相关采访:https://www.jianshu.com/p/3092b382ee80 微博:https://weibo ...
- 2020-03 前端技术汇总
2020/03/30 周一 #JSON数据转Blob后,怎么还原 在axios请求下载文件接口时,一般设置responseType: 'blob',文件返回正常就没问题,但后台如果处理文件或鉴权有问题 ...
- 2020-04 前端技术汇总
2020/04/29 周三 #UI设计视觉差问题,总感觉没有居中对齐时怎么办 放大n倍,截图画框,看是否在一条水平线上. 关于UI设计视觉差相关知识点 测量面积和视觉面积 视觉体量是人眼如何察觉物体的 ...
- 2020-08 前端技术汇总
2020/08/30 周日 #npm run 运行多条命令 && 不生效的问题 在项目中除了默认的 webpack-dev-server 外,我们还想同时运行mock接口的node服务 ...
- 2020-07 前端技术汇总
2020/07/30 周四 #什么是好的代码? 在web前端方面,什么是好的代码?好的代码应该包含以下两个特性 高性能,低时延(性能优化) 熟悉数据结构与算法,减少时间复杂度或空间复杂度 熟悉浏览器渲 ...
- 2019-12 前端技术汇总
2019/12/30 周一 #滚动条自动滚动到最右侧 给scrollLeft设置一个超大的值即可 this.$nextTick(() => {element.scrollLeft = 10000 ...
- 2019-11 前端技术汇总
2019年11月技术日常 #2019/11/28 周四 #class的staic属性 由于目前class只支持static方法,static属性目前还处于试验性功能(stage-3)阶段,如果不装ba ...
- 最新前端面试题-前端必备技能-前端技术汇总
一.css部分 1.css盒模型 css盒模型分为标准盒模型和怪异盒模型/IE盒模型 基础盒模型:content(内容) + border + padding + margin 怪异盒模型/IE盒模型 ...
最新文章
- 【Ctsc2011】幸福路径
- Python环境出现模块找不到
- 云计算简介+云计算建站平台
- Docker镜像加速器配置
- dinic （最大流） 算法 讲解
- python转置_python数据分析类库系列Numpy之 数组转置和轴对换
- Oracle .NET Core Beta驱动已出，自己动手写EF Core Oracle
- 进一步了解 apt-get 的几个命令
- PHP利用Mysql锁解决高并发
- mysql标记上具有语法错误_ProgrammingError:（1064，'您的SQL语法有错误；请查看与MySQL服务器版本相对应的手册以获得正确的语法...
- oracle中pga指什么,oracle中pga内存分配原则
- 黑莓：一家把未来押宝无人驾驶的老牌手机厂商
- CF1152 F. Neko Rules the Catniverse (dp)
- 小暑至盛夏始吃苦尝酸保健康
- atitit 完整的知识体系表 学科体系表 v2
- 用python做蒙特卡洛仿真算法
- Ubuntu系统安装搜狗（sougou for linux）输入法详细教程
- VBA版本获取ClientKey
- 教你傻瓜式抠图透明图透头像透明字体
- IPSec Over GRE配置实验
热门文章
- Python 3 迁移怨声载道
- 营养不良和口服万古霉素对人体肠道菌群和营养吸收的影响
- 完整的渗透测试靶场通关
- 中专生计算机基础知识论文3000字,计算机中专毕业论文3000字
- 商用计算机 报价,ASUS - 台式机 - 商用台式电脑配置价格
- 国庆过了，该审视下自己的生活了
- 【Elasticsearch】15 ES文档的基本操作 aggregations 【执行聚合操作】
- 小米应用市场Aso，怎么做小米应用市场ASO？
- python ImportError: cannot import name ' ×××'解决方法
- Python动物图像分割API简单调用实例演示，阿里达摩院视觉智能开放平台使用步骤
|
