函数 描述
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. node引入bootstrap npm报错

    今天node引入bootstrap npm报错 但是页面正常显示   最后发现bootstrap.min.js.map没有放在文件里  虽然不用页面中引入    另外也发现了怎么看这种错误了

  2. 高性能MySQL--创建高性能的索引

    关于MySQL的优化,相信很多人都听过这一条:避免使用select *来查找字段,而是要在select后面写上具体的字段. 那么这么做的原因相信大家都应该知道:减少数据量的传输. 但我要讲的是另外一个 ...

  3. c# 在WebBrowser中用SendMessage模拟鼠标点击

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. python学习第二天 -----2019年4月17日

    第二周-第02章节-Python3.5-模块初识 #!/usr/bin/env python #-*- coding:utf-8 _*- """ @author:chen ...

  5. Python学习 :面向对象 -- 三大特性

    面向对象的三大特性 一.封装 把数据.值.变量放入到对象中 构造方法 _init_方法 特殊作用: 在 obj = 类名() 执行时: 内部自动执行两个步骤: 1.创建对象 2.通过对象执行类中的一个 ...

  6. python教程(三)·函数进阶(上)

    在介绍了函数定义的方法后,再来介绍一些进阶知识 参数收集 有时候我们需要参数的数量是任意的,比如print函数的参数的数量是任意的,print函数的内部实现我们不探究,但是单单是参数数量可变这一方面实 ...

  7. 复数 一级ADT实现

    COMPLEX.h /* typedef struct { float RE; //实部 float IM; //虚部 }Complex; */ typedef struct complex * Co ...

  8. 随机队列 ADT接口 数组实现

    Random queue ADT接口 RANDOM.h #include <stdlib.h> #include "Item.h" #include <time. ...

  9. scala 求数组排序后每两个元素的差值

    求数组排序后每两个元素的差值 例如数组 1,5,8,10,2 求得结果为 1,3,3,2 一般什么样的场景会有这种需求呢? 比如 计算一堆数据在一定时间内的计算时延, 或者得到这段时间内数据的平均计算 ...

  10. Titanic幸存预测分析(Kaggle)

    分享一篇kaggle入门级案例,泰坦尼克号幸存遇难分析. 参考文章: 技术世界,原文链接 http://www.jasongj.com/ml/classification/ 案例分析内容: 通过训练集 ...