函数 描述
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. Gradle Goodness: Add Incremental Build Support to Tasks

    Gradle has a very powerful incremental build feature. This means Gradle will not execute a task unle ...

  2. windows下nginx访问web目录提示403 Forbidden

    在windows下 http服务器nginx时,访问web目录提示403 Forbidden,首先需要了解nginx出现403错误是什么意思: 403 Forbidden表示你在请求一个资源文件但是n ...

  3. Web | Webpack快速上手

    概述 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 一般我们在开发中都是使用终端去进行安装,使用npm,关于npm ...

  4. Java类和对象详解,以及相关知识点

    了解类和对象前,简单提及面向对象程序设计.面向对象程序设计就是通过对象来进行程序设计,对象表示一个可以明确标识的实体.例如:一个人.一本书.一个学校或一台电脑等等.每个对象都有自己独特的标识.状态和行 ...

  5. C++程序设计入门 引用和动态内存管理学习

    引用: 引用就是另一个变量的别名,通过引用所做的读写操作实际上是作用于原变量上. 由于引用是绑定在一个对象上的,所以定义引用的时候必须初始化. 函数参数:引用传递 1.引用可做函数参数,但调用时只需 ...

  6. CentOS6安装各种大数据软件 第六章:HBase分布式集群的配置

    相关文章链接 CentOS6安装各种大数据软件 第一章:各个软件版本介绍 CentOS6安装各种大数据软件 第二章:Linux各个软件启动命令 CentOS6安装各种大数据软件 第三章:Linux基础 ...

  7. CentOS 7 Minimal 安装JDK 1.8

    真好最近比较闲,打算在linux 的CentOS 7 Minimal版本试着搭建hadoop环境学习学习,当然第一步就是在CentOS 7 Minimal 安装JDK 1.8环境.其实老早就打算了解一 ...

  8. makefile中的一些参数说明

    #obj = main.o sub.o add.o div.o mul.osrc = $(wildcard *.c) #搜索.c文件 可以加路径 obj = $(patsubst %.c, %.o, ...

  9. Mac配置PHP+Nginx+MySQL开发环境

    Homebrew简称brew,OSX上的软件包管理工具,在Mac终端可以通过brew安装.更新.卸载各种软件,(简直就是神器级武器). 废话不多说,没安装brew自己去百度学习安装,这里就不多说了. ...

  10. PHP操作redis之String(字符串)、List(列表)(一)

    Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key – value 缓存产品有以下三个特点: Redis支持数据的持久 ...