Typecho合集站.  留言 关于 记事本 
首页 > TYPECHO > typecho教程 > typecho插件 > typecho主题 > 网站开发 > PHP > Linux > web > 编程 > 个人收藏 > 互联网旧文 > 互联网趣文

JavaScript中encodeURI和encodeURIComponent区别

在JavaScript中encodeURIencodeURIComponent不少人容易混淆两个的区别与正确用法,从英文单词上理解的话很容易看出来关键性区别的地方,即一个带Component,另一个不带。也就是说带ComponentencodeURIComponent就把输入当作一个完整的部件全部编码。另一个encodeURI则是对URI进行编码,为了保证返回的参数仍然是一个有效的URIhttp://或者https://://不会被编码,来看看例子。

https://www.qttc.net/Hello World作为入参,分别测试两个函数的返回值

>encodeURIComponent('https://www.qttc.net/Hello World')
< "https%3A%2F%2Fwww.qttc.net%2FHello%20World"
>encodeURI('https://www.qttc.net/Hello World')
< "https://www.qttc.net/Hello%20World"

可能会有同学问了:那encodeURIComponent没有使用场景啊~~,别急,还是有的,请看以下代码


function add_callback (uri){
  let callback = encodeURIComponent('https://www.qttc.net');
  return `${uri}?callback=${callback}`
}

let uri_with_callback = add_callback('https://www.qttc.net/login.html');
console.log(uri_with_callback); // https://www.qttc.net/login.html?callback=https%253A%252F%252Fwww.qttc.net

以上举例了当你要在另一个URI的基础上填补新的参数时,就应该使用encodeURIComponent

但是,encodeURI并不是那么智能,比如以下例子

>encodeURI('https://www.qttc.net/login.html?callback=https://www.qttc.net')
< "https://www.qttc.net/login.html?callback=https://www.qttc.net"

显然,返回值并没有进行任何字符编码,实际上我们期望它应该是

https://www.qttc.net/login.html?callback=https%253A%252F%252Fwww.qttc.net

这是要小心的地方。


转载自:https://www.qttc.net/


发表新评论


本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除
Theme by
夏目贵志, Powered by Typecho | RSS | sitemap