【Javascript】encodeURI、encodeURIComponent、decodeURI、decodeURIComponent

一、encodeURI()

介绍

encodeURI() 函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码

使用场景：当你需要对整个URL进行编码时方便使用，因为它不会编码URL组成部分中需要存在的特殊字符

语法

encodeURI(URI)

参数：
URI： 一个完整的 URI

返回值：
一个新字符串，表示提供的字符串编码为统一资源标识符 (URI)

描述

假定一个 URI 是完整的 URI，那么无需对那些保留的并且在 URI 中有特殊意思的字符进行编码。
encodeURI 会替换所有的字符，但不包括以下字符，即使它们具有适当的 UTF-8 转义序列：

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

示例

var uri = 'https://www.example.com/测试?query=测试&another=值';
var encodedUri = encodeURI(uri);
console.log(encodedUri); 
// https://www.example.com/%E6%B5%8B%E8%AF%95?query=%E6%B5%8B%E8%AF%95&another=%E5%80%BC

二、encodeURIComponent()

介绍

encodeURIComponent() 函数通过将特定字符的每个实例替换成代表字符的 UTF-8 编码的一个、两个、三个或四个转义序列来编码 URI

与 encodeURI() 相比，此函数会编码更多的字符，包括 URI 语法的一部分。

使用场景： 当你需要对URL的某个部分（比如查询字符串的参数）进行编码时使用。因为它会编码几乎所有的字符，使得编码后的字符串可以安全地作为URL参数

语法

encodeURIComponent(str)

参数：
uriComponent：
一个 string、number、boolean、null，undefined 或者任何 object。在编码之前，uriComponent 参数会被转化为字符串

返回值：
原字串作为 URI 组成部分被被编码后的新字符串。

描述

encodeURIComponent 转义除了如下所示外的所有字符：

不转义的字符：
    A-Z a-z 0-9 - _ . ! ~ * ' ( )

encodeURIComponent() 和 encodeURI 不同点

var set1 = ";,/?:@&=+$"; // 保留字符
var set2 = "-_.!~*'()"; // 不转义字符
var set3 = "#"; // 数字标志
var set4 = "ABC abc 123"; // 字母数字字符和空格

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (空格被编码为 %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (空格被编码为 %20)

三、decodeURI()

decodeURI() 函数能解码由encodeURI 创建或其他流程得到的统一资源标识符（URI）

四、decodeURIComponent()

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