js编码解码decodeURI()与decodeURIComponent()的区别

原文链接:https://blog.youkuaiyun.com/qq_39712029/article/details/81003518

  1. 定义和用法
    decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

    decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

    从W3C的定义和用法来看,两者没有什么区别,但是两者的参数是有区别的:

decodeURI(URIstring) //URIstring 一个字符串,含有要解码的 URI 或其他要解码的文本。

decodeURIComponent(URIstring) //URIstring 一个字符串,含有编码 URI 组件或其他要解码的文本。

2.使用中区别用法
区别:encodeURIComponent和decodeURIComponent可以编码和解码URI特殊字符(如#,/,¥等),而decodeURI则不能。

encodeURIComponent('#')
"%23"
decodeURI('%23')
"%23"
decodeURIComponent('%23')
"#"
encodeURI('#')
"#"

可以看出encodeURI和decodeURI对URI的特殊字符是没有编码和解码能力的,实际项目中我们一般需要get请求的方式在地址栏中拼接一些参数,但是参数中如果出现#,/,&这些字符,就必须要用decodeURIComponent了,不然这些特殊字符会导致我们接收参数的错误

假如我们要传一个code字段到http://www.xxx.com,值为20180711#abc

var codeVal = encodeURI('20180711#abc');
var url = 'http://www.xxx.com?code=' + codeVal;
console.log(url);
http://www.xxx.com?code=20180711#abc

http://www.xxx.com接收参数

  location.search  //"?code=20180711";

decodeURI("?code=20180711")  //"?code=20180711"

这时候我们拿到的code参数明显是错误的,被特殊字符#截断了,下面我们来看用decodeURIComponent方法:

var codeVal = encodeURIComponent('20180711#abc');
var url = 'http://www.baidu.com?code=' + codeVal;
url;
"http://www.baidu.com?code=20180711%23abc"

http://www.xxx.com接收参数

location.search  //"?code=20180711%23abc"
decodeURIComponent("?code=20180711%23abc")  //"?code=20180711#abc"

### JavaScript `decodeURI` vs `decodeURIComponent` #### 解码 URL 在处理 URL 编码时,`decodeURI` 和 `decodeURIComponent` 函数用于将编码后的字符串转换回原始形式。然而两者之间存在显著差异。 对于整个 URL 的解码操作应当使用 `decodeURI` 函数[^1]。此方法会尝试对传入的参数执行反向转义过程,除了保留那些构成合法 URI 组件所需的特殊字符外(例如冒号、斜杠等),其他被百分比编码过的字符都会被还原成对应的可见字符[^2]。 ```javascript const encodedUrl = "https://example.com/path%20to%2Fpage"; console.log(decodeURI(encodedUrl)); // 输出: https://example.com/path to/page ``` 当涉及到具体查询参数部分或者片段标识符 (# 后面的内容) 时候,则应该采用更为严格的 `decodeURIComponent` 方法来进行更彻底地解码工作[^3]。该方式不仅能够识别并恢复普通文字,还会进一步解析原本属于路径分隔符之类的符号,比如问号 (?), 等号 (=), (&)[^4]。 ```javascript const paramStr = "name=John%20Doe&city=%E5%B9%BF%E5%B7%A5"; const paramsObj = {}; paramStr.split('&').forEach(function(item){ const [key, value] = item.split('='); paramsObj[key] = decodeURIComponent(value); }); console.log(paramsObj); /* 输出: { name: 'John Doe', city: '广州' } */ ``` #### 正确解码实践 为了确保安全性和准确性,在实际应用中建议遵循如下原则: - 对于完整的 URL 字符串,请优先考虑调用 `decodeURI()` 来完成基本层次上的解密; - 如果目标仅限于单独某个组件(如查询参数中的键值对),则务必选用更加严谨细致的 `decodeURIComponent()` 进行针对性处理; 通过这种方式可以有效避免因误用而导致意外情况的发生,同时也提高了程序逻辑的一致性和可靠性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值