url特殊字符编码encodeURI VS encodeURIComponent分析

更新时间：2023年09月26日 11:55:23 作者：热饭班长

这篇文章主要介绍了url特殊字符编码encodeURI VS encodeURIComponent分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

encodeURI VS encodeURIComponent

用于给url中的特殊字符进行编码。

为什么要用？

因为网络标准RFC1738做了硬性规定，只有字符和数字以及一些规定内的特殊符号，才可以不经过编码用于url，换言之就是，如果你的url中包含了规定之外的符号，那它就是非法的url, 无法被服务器解析，也就无法访问到你想要的网络资源。

为了解决这个问题，js就提供了encodeURI和encodeURIComponent来给这些规定之外的符号进行编码，这样，服务器就能正常解析并访问了。

用法？

encodeURI

encodeURI()会编码除去ASCII码、数字和~!@#$&*()=:/,;?+.-_'之外的所有字符。

const url = 'http://www.test.com/images/花朵.png'
const nextUrl = encodeURI(url)
// http://www.test.com/images/%E8%8A%B1%E6%9C%B5.png

encodeURIComponent

encodeURIComponent()会编码除去ASCII码、数字和~!*().-_'之外的所有字符。

const url = 'http://www.test.com/images/花朵.png'
const nextUrl = encodeURIComponent(url)
// http%3A%2F%2Fwww.test.com%2Fimages%2F%E8%8A%B1%E6%9C%B5.png

两者之间的差异

encodeURIComponent会进行编码的字符范围比encodeURI大。

两者之间如何选用

由于两者之间唯一的差异就是可被编码的字符范围，所以需要根据实际需要编码的字符做抉择。

情况1：

const url = 'http://www.test.com/images/花朵.png'
console.log(encodeURI(url));
http://www.test.com/images/%E8%8A%B1%E6%9C%B5.png
console.log(encodeURIComponent(url));
http%3A%2F%2Fwww.test.com%2Fimages%2F%E8%8A%B1%E6%9C%B5.png

通过上面的示例我们发现，由于encodeURIComponent的编码范围很广，如果对整个URL调用，会导致URL中有特殊作用的符号被编码，变成一个非法的URL了，也就无法访问了。所以此种情况应该选用encodeURI。

情况2：

const name = 'AT&T';
console.log(encodeURI(name));
// AT&T
console.log(encodeURIComponent(name));
// AT%26T

由于encodeURI的编码范围较小，导致此处我们希望被编码的&并没有被编码。所以此种情况应该选用encodeURIComponent。

应用场景

场景1：

url参数中包含特殊字符

// 美国电话电报公司
const name = 'AT&T';
const url = `http://www.test.com?name=${name}`;
const nextUrl = new URL(url);
const search = new URLSearchParams(nextUrl.search);
console.log(search.get('name'));
// AT

输出的结果缺少了一部分，这是因为&是一个标准的url参数分割符，所以会被解析为分割符。虽然如此，但本例中的&符号是属于名字的一部分，我们不想让它被解析为url的参数分隔符。这时我们就可以使用encodeURIComponent对name的值进行编码，这样&就不会被识别为参数分割符了

// 美国电话电报公司
const name = 'AT&T';
const url = `http://www.test.com?name=${encodeURIComponent(name)}`;
const nextUrl = new URL(url);
const search = new URLSearchParams(nextUrl.search);
console.log(search.get('name'));
// AT&T

场景2：

将一个回调地址作为参数附加在另一个地址上

const redirectUrl = 'http://www.result.com?type=success&num=10';
const targetUrl = `http://www.test.com?redirectUrl=${redirectUrl}`;
const url = new URL(targetUrl);
const search = new URLSearchParams(url.search);
console.log(search.get('redirectUrl'));
// http://www.result.com?type=success

我们获取redirectUrl参数时，会发现num参数丢失了，这是因为&被当成www.test.com的参数分隔符了，这里我们可以使用encodeURIComponent来对redirectUrl进行编码就能解决这个问题。

const redirectUrl = 'http://www.result.com?type=success&num=10';
const targetUrl = `http://www.test.com?redirectUrl=${encodeURIComponent(redirectUrl)}`;
const url = new URL(targetUrl);
const search = new URLSearchParams(url.search);
console.log(search.get('redirectUrl'));
// http://www.result.com?type=success&num=10

疑问

现代浏览器会自动识别URL中的特殊字符并将其编码，那还需要我们手动调用encodeURI和encodeURIComponent吗？
答案是看情况，比如在参数中有中文的情况下，中文在URL中不会有歧义（中文在URL中不会有其它含义），所以浏览器会帮你完成编码，但是，在有些情况下，浏览器是不知道你是否需要编码的，我们拿前面的一个示例：

// 美国电话电报公司
const name = 'AT&T';

这里的&在URL中有两种含义，一是作为参数分割符，二是作为普通的字符，这时，浏览器无法猜测你的意图，也就不会帮你自动编码了，所以，还是需要你主动调用encodeURIComponent。

注意事项

他们对特殊字符的编码形式是utf-8

以上就是url特殊字符编码encodeURI VS encodeURIComponent分析的详细内容，更多关于url特殊字符编码的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

微信小程序使用扩展组件库WeUI的入门教程
WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一,下面这篇文章主要给大家介绍了关于微信小程序使用扩展组件库WeUI的相关资料,需要的朋友可以参考下
2022-04-04
JavaScript中错误正确处理方式小结你用对了吗
本文将会讨论客户端JavaScript中的错误处理。主要介绍JavaScript中的易犯错误、错误处理、异步代码编写等内容。下面就让我们一起看看如何正确处理JavaScript中的错误
2017-10-10
面向JavaScript入门初学者的二叉搜索树算法教程
二叉搜索树则是二叉树的一种,但它只允许你在左侧节点储存比父节点小的值,右侧只允许储存比父节点大的值,这篇文章主要给大家介绍了关于JavaScript二叉搜索树算法的相关资料,需要的朋友可以参考下
2021-09-09
javascript实现10个球随机运动、碰撞实例详解
这篇文章主要介绍了javascript实现10个球随机运动、碰撞的方法,实例分析了javascript实现小球碰撞的原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
JavaScript中具名函数的多种调用方式总结
这篇文章主要介绍了JavaScript中具名函数的多种调用方式总结,本文总结了4种方法,需要的朋友可以参考下
2014-11-11
js实现鼠标经过时图片滚动停止的方法
这篇文章主要介绍了js实现鼠标经过时图片滚动停止的方法,可实现js滚动特效中的鼠标悬停停止图片滚动的功能,非常具有实用价值,需要的朋友可以参考下
2015-02-02
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
这篇文章主要介绍了设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
JS刷新框架外页面七种实现代码
JS刷新框架想必大家们都有所了解，如何是刷新框架外页面想必大家有所陌生啦,没关系本文的出现将解决大家的燃眉之急，感兴趣的你可不要错过了哈
2013-02-02
前端使用pdf.js实现pdf转为图片
这篇文章主要为大家详细介绍了前端如何使用pdf.js实现pdf转为图片功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-04-04
微信小程序之裁剪图片成圆形的实现代码
最近在开发小程序，产品经理提了一个需求，要求微信小程序换头像，用户剪裁图片必须是圆形。这篇文章主要介绍了微信小程序之裁剪图片成圆形 ,需要的朋友可以参考下
2018-10-10