函数 描述
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. Linux命令总结(转)

    1.ls [选项] [目录名 | 列出相关目录下的所有目录和文件 -a 列出包括.a开头的隐藏文件的所有文件 -A 通-a,但不列出"."和".." -l 列出 ...

  2. LeetCode40.组合总和|| JavaScript

    给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在每个组合中只能使用一次. ...

  3. webpack+vuecli使用问题总结

    1,按照官网安装步骤install $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm insta ...

  4. Ubuntu18.04安装mysql及相关配置

    step 1: sudo apt-get update step 2: sudo apt-get install mysql-server step3: 查看mysql服务端是否开启 systemct ...

  5. $.ajax 完整参数

    jquery中的ajax方法参数 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意 ...

  6. ps加强总结

    快捷键 1.ctrl+alt+z返回 2.ctrl+z撤销 3.ctrl+s保存 4.ctrl+shift+s另存为 5.shift是有序的选择   ctrl键是无序的选择 6.ctrl+g打组   ...

  7. Redis 之武林大会 - 哨兵(Sentinel)

    前言 Redis在出从复制的模式下,一旦主节点由于故障不能提供服务,需要人工降从节点晋升为主节点,同时还要通知应用方更新主节点的地址,在很多应用场景下,这样的故障处理方式是无法被接受的.不过幸运的是R ...

  8. tp5 接入腾讯对象存储COS

    以前写过一个接入阿里的OSS对象存储的,现在又简单写了个 腾讯COS对象存储. 这里只有COS使用方式,如果对接TP上传 可以去参考 :http://www.cnblogs.com/inkwhite/ ...

  9. 将linux上的Java代码上传到码云

    将linux上的Java代码上传到码云 1.在linux上直接输入命令获取git sudo apt-get install git 显示资源被占用,按照图中方法强制安装 2.建立与教材配套的目录结构 ...

  10. 2016-2017-2 20155325实验二《Java面向对象程序设计》实验报告

    实验二 面向对象程序设计-1 答案截图 码云代码链接 链接1 实验遇到的问题和解决过程 问题1:在plugins里搜索不到JUnitGenerator V2.0只能搜到Generste Teats 问 ...