函数 描述
encodeURI() 把字符串编码为 URI
encodeURIComponent() 把字符串编码为 URI 组件
escape() 对字符串进行编码

上面是查询来自w3school的资料。那么三者之间有什么区别呢,请容我测试测试。

var str = "http://localhost:8080/Product/index?id=123&attr=456&area=中国";
console.log(encodeURI(str));
console.log(encodeURIComponent(str));
console.log(escape(str));

打印结果如下:

http://localhost:8080/Product/index?id=123&attr=456&area=%E4%B8%AD%E5%9B%BD
http%3A%2F%2Flocalhost%3A8080%2FProduct%2Findex%3Fid%3D123%26attr%3D456%26area%3D%E4%B8%AD%E5%9B%BD
http%3A//localhost%3A8080/Product/index%3Fid%3D123%26attr%3D456%26area%3D%u4E2D%u56FD

可以看出,

encodeURI不会对:/?&= 这几个在uri中起分割作用的字符进行编码;

encodeURIComponent则会相应的编码成%3A、%2F、%3F、%26、%3D。

观察escape则发现,:?&都被转码了,而/没有,w3school解释是,escape函数会对ascii码中字母、数字及符号( * @ - _ + . / )之外的所有字符进行编码。

另外,我们可以看出escape对汉字“中国”编码后结果与前两者不同。W3SCHOOL也建议不使用该方法,用前两者代替。

JS对字符串编码的几种方式的更多相关文章

  1. js中 json对象与json字符串相互转换的几种方式

    以下总结js中 json对象与json字符串相互转换的几种方式: 一.JSON对象转化为JSON字符串 1.使用JSON.stringify()方法进行转换 该方法不支持较老版本的IE浏览器,比如:i ...

  2. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  3. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  4. js中声明Number的五种方式

    转载自:http://www.jb51.net/article/34191.htm <!DOCTYPE html> <html> <head> <meta c ...

  5. egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名

    egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...

  6. 点评js异步加载的4种方式

    主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <htm ...

  7. C 语言字符串连接的 3种方式

    C 语言字符串连接的 3种方式 #include<stdio.h> #include<stdlib.h> #include<string.h> char *join ...

  8. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  9. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

随机推荐

  1. 维度属性的KeyColumns如果是Integer类型,那么维度表中该列的值不能有为null的

    如果维度属性的 KeyColumns的DataType设置为了Integer类型,那么要注意该维度属性列在数据库中不能有为null的值. 例如下图中我们有维度DIM_Vehcile,其中有个维度属性叫 ...

  2. npm run dev启动项目报错 Cannot find module 'webpack-cli/bin/config-yargs'

    一般是webpack的版本和webpackserver的版本不兼容导致的错误. 解决方法是先卸载这两个版本,再安装指定的版本. 卸载: 再安装指定或者最新版本的webpack和webpack-dev- ...

  3. JS模拟Dictionary

    function Map() { this.keys = new Array(); this.data = new Array(); //添加键值对 this.set = function (key, ...

  4. 【Dubbo源码阅读系列】服务暴露之远程暴露

    引言 什么叫 远程暴露 ?试着想象着这么一种场景:假设我们新增了一台服务器 A,专门用于发送短信提示给指定用户.那么问题来了,我们的 Message 服务上线之后,应该如何告知调用方服务器,服务器 A ...

  5. vue-cli 3.0 豆瓣api接口使用element做分页

    记录自己的学习 大佬绕道谢谢! 豆瓣即将上映接口:https://api.douban.com/v2/movie/coming_soon 本地跨域问题 看我之前的文章:https://www.cnbl ...

  6. 运维与架构—Nginx的优缺点

    Nginx的优点是: 1.工作在网络的7层之上,可以针对http应用做一些分流的策略,比如针对域名.目录结构 它的正则规则比HAProxy更为强大和灵活,这也是它目前广泛流行的主要原因之一 Nginx ...

  7. PHP处理高分辨率图片的问题

    今天小伙伴在群里问了这么一个问题: 出现这种情况就是因为内存不足,PHP程序直接退出了,报错大概如下: 上图的意思就是说,我们能使用的内存最大是8M,但是处理这个图片还需要额外的41bytes,就会导 ...

  8. Delphi高效定制格式的FormatDateTime

    本人根据歼10博主的此博文的思路进行改进,目的是高效的实现FormatDateTime('YYYY-MM-DD HH:NN:SS.ZZZ', Now); 在DelphiXE3 32Bits环境测试10 ...

  9. Spark RDD理解

    目录 ----RDD简介 ----RDD操作类别 ----RDD分区 ----宽依赖和窄依赖作用 ----RDD分区划分器 ----RDD到调度 返回顶部 RDD简介 RDD是弹性分布式数据集(Res ...

  10. ie的盒模型和标准模型

    使用 box-sizing:content-box || border-box || inherit 原理图 计算 怪异模型|IE模型 div宽度(定死) = 内容宽度+border宽度+paddin ...