某人

此前素未谋面、此后遥遥无期

0%

JavaScript编码

发表于 更新于 分类于

escape()和unescape()函数

escape()函数

定义和用法: escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。

字符的16进制格式值,当该值小于等于0xFF时,用一个2位转移序列: %xx 表示. 大于的话则使用4位序列:%uxxxx 表示.

返回值: 已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。

说明: 该函数不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换。

1
2
3
4
escape(string) #string	必需。要被转义或编码的字符串。

escape("你好世界;hello word!") # "%u4F60%u597D%u4E16%u754C%3Bhello%20word%21"
escape("* @ - _ + . / ") # "*%20@%20-%20_%20+%20.%20/%20"

注释： 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性,ES3 反对使用该方法，应用使用 decodeURI() 和 decodeURIComponent() 替代它。

unescape()函数

定义用法: unescape() 函数可对通过 escape() 编码的字符串进行解码。

返回值: string 被解码后的一个副本。

1
2
unescape("hello%20world"); # "hello world"
unescape("%u60A8%u597D%uFF0C%u4E16%u754C") # "您好，世界"

说明： 该函数的工作原理是这样的：通过找到形式为 %xx 和 %uxxxx 的字符序列（x 表示十六进制的数字），用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码

注释： 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性,ES3 反对使用该方法，应用使用 decodeURI() 和 decodeURIComponent() 替代它。

encodeURI()和decodeURI()函数

encodeURI()函数

定义和用法：
encodeURI() 是对统一资源标识符（URI）进行编码的方法。它使用1到4个转义序列来表示每个字符的UTF-8编码（只有由两个代理字符区组成的字符才用四个转义字符编码）。

返回值： URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。

说明： 假定一个URI是完整的URI，那么无需对那些保留的并且在URI中有特殊意思的字符进行编码。

encodeURI 会替换所有的字符，但不包括以下字符，即使它们具有适当的UTF-8转义序列：

类型 包含
保留字符 ; , / ? : @ & = + $
非转义的字符 字母 数字 - _ . ! ~ * ‘ ( )
数字符号 #

encodeURI 自身无法产生能适用于HTTP GET 或 POST 请求的URI，例如对于 XMLHTTPRequests, 因为 “&”, “+”, 和 “=” 不会被编码，然而在 GET 和 POST 请求中它们是特殊字符。然而encodeURIComponent这个方法会对这些字符编码。

如果试图编码一个非高-低位完整的代理字符，将会抛出一个 URIError 错误如：

1
2
3
4
5
6
7
8
编码高-低位完整字符 ok
encodeURI('\uD800\uDFFF') # "%F0%90%8F%BF"

编码单独的高位字符抛出 "Uncaught URIError: URI malformed"
encodeURI('\uD800')

编码单独的低位字符抛出 "Uncaught URIError: URI malformed"
encodeURI('\uDFFF')

如果URL需要遵循较新的RFC3986标准,那么方括号是被保留的(给IPv6)，因此对于那些没有被编码的URL部分(例如主机)，可以使用下面的代码：

1
2
3
function fixedEncodeURI (str) {
    return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
}

decodeURI()函数

定义和用法: decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

返回值: URIstring 的副本，其中的十六进制转义序列将被它们表示的字符替换。

1
2
3
encodeURI("http://www.baidu.com.cn/My first/") # "http://www.baidu.com.cn/My%20first/"

decodeURI("http://www.baidu.com.cn/My%20first/"); # "http://www.baidu.com.cn/My first/"

encodeURIComponent()函数和decodeURIComponent()函数

encodeURIComponent()函数

概述: encodeURIComponent()是对统一资源标识符（URI）的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码（只有由两个Unicode代理区字符组成的字符才用四个转义字符编码）。

返回值: URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。

说明: 该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ‘ ( ) 。
其他字符（比如 ：;/?: @&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

1
2
encodeURIComponent("http://www.baidu.com") # "http%3A%2F%2Fwww.baidu.com"
encodeURIComponent(",/?:@&=+$#") # "%2C%2F%3F%3A%40%26%3D%2B%24%23"

如果试图编码一个非高-低位完整的代理字符，将会抛出一个 URIError 错误：

1
2
3
4
5
6
7
8
高低位完整
encodeURIComponent('\uD800\uDFFF') # "%F0%90%8F%BF"

只有高位，将抛出"URIError: malformed URI sequence"
encodeURIComponent('\uD800')

只有低位，将抛出"URIError: malformed URI sequence"
encodeURIComponent('\uDFFF')

对于 application/x-www-form-urlencoded (POST) 这种数据方式，空格需要被替换成 ‘+’，所以通常使用 encodeURIComponent 的时候还会把 “%20” 替换为 “+”。

为了更严格的遵循 RFC 3986（它保留 !, ‘, (, ), 和 *），即使这些字符并没有正式划定 URI 的用途，下面这种方式是比较安全的：

1
2
3
function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

decodeURIComponent()函数

定义和用法： decodeURIComponent() 方法用于解码由 encodeURIComponent 方法或者其它类似方法编码的部分统一资源标识符（URI）。

返回值： URIstring 的副本，其中的十六进制转义序列将被它们表示的字符替换。

1
2
decodeURIComponent("%2C%2F%3F%3A%40%26%3D%2B%24%23") # ",/?:@&=+$#"
decodeURIComponent("http%3A%2F%2Fwww.baidu.com") # "http://www.baidu.com"

atob()函数和btoa()函数

Base64是一组相似的二进制到文本(binary-to-text)的编码规则，使得二进制数据在解释成radix-64的表现形式后能够用ASCII字符串的格式表示出来。Base64 这个词出自一种MIME数据传输编码。

atob()函数

概述: 将ascii字符串或二进制数据转换成一个base64编码过的字符串,该方法不能直接作用于Unicode字符串.

1
window.btoa("Hello, world") # "SGVsbG8sIHdvcmxk"

说明： 在各浏览器中,使用 window.btoa 对Unicode字符串进行编码都会触发一个字符越界的异常.

先把Unicode字符串转换为UTF-8编码,可以解决这个问题,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function utf8_to_b64( str ) {
    return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
    return decodeURIComponent(escape(window.atob( str )));
}


utf8_to_b64('? à la mode'); # "PyDDoCBsYSBtb2Rl"
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); # "✓ à la mode"

在js引擎内部,encodeURIComponent(str)相当于escape(unicodeToUTF8(str))
所以可以推导出unicodeToUTF8(str)等同于unescape(encodeURIComponent(str))

btoa()函数

概述: atob() 函数用来解码一个已经被base-64编码过的数据

1
window.atob("SGVsbG8sIHdvcmxk") # "Hello, world"

参考链接

  1. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent