JS系列之url编码

方法一：encodeURIComponent 和 decodeURIComponent

encodeURIComponent

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

语法：

encodeURIComponent(str);

参数：str URI 的组成部分

描述：
encodeURIComponent 转义除了字符、数字、(、)、.、!、~、*、'、-、_ 之外的所有字符。

DEMO:

encodeURIComponent('@*_+-./');
// "%40*_%2B-.%2F"

encodeURIComponent('https://www.baidu.com/');
// "https%3A%2F%2Fwww.baidu.com%2F"

encodeURIComponent('https://www.baidu.com/?key=abc&page=2')
// "https%3A%2F%2Fwww.baidu.com%2F%3Fkey%3Dabc%26page%3D2"


decodeURIComponent("https%3A%2F%2Fwww.baidu.com%2F%3Fkey%3Dabc%26page%3D2")
// "https://www.baidu.com/?key=abc&page=2"
unescape("https%3A%2F%2Fwww.baidu.com%2F%3Fkey%3Dabc%26page%3D2")
// "https://www.baidu.com/?key=abc&page=2"
decodeURI("https%3A%2F%2Fwww.baidu.com%2F%3Fkey%3Dabc%26page%3D2")
// "https%3A%2F%2Fwww.baidu.com%2F%3Fkey%3Dabc%26page%3D2"

方法二：encodeURI 和 decodeURI

encodeURI

语法：

encodeURI(URI)

参数：URI 一个完整的URI
返回值：一个新字符串，表示提供的字符串编码为统一资源标识符（URI）。

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

http://username:[e-mail]:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

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

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

DEMO:

encodeURI('@*_+-./');
// "@*_+-./"

encodeURI('https://www.baidu.com/');
// "https://www.baidu.com/"

encodeURI('https://www.baidu.com/?key=abc&page=2')
// "https://www.baidu.com/?key=abc&page=2"

方法三：escape 和 unescape

escape

已弃用
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

语法：

escape(str)

str 待编码的字符串

描述：
escape() 方法生成新的由十六进制转义序列替换的字符串
escape 函数是全局对象的属性。除了 @*_+-./ 外的特殊字符会被编码。

DEMO：

escape('@*_+-./');    
// "@*_+-./"

escape('https://www.baidu.com/');  
// "https%3A//www.baidu.com/"

escape('https://www.baidu.com/?key=abc&page=2')
// "https%3A//www.baidu.com/%3Fkey%3Dabc%26page%3D2"


unescape("https%3A//www.baidu.com/%3Fkey%3Dabc%26page%3D2")
// "https://www.baidu.com/?key=abc&page=2"
decodeURIComponent("https%3A//www.baidu.com/%3Fkey%3Dabc%26page%3D2")
// "https://www.baidu.com/?key=abc&page=2"
decodeURI("https%3A//www.baidu.com/%3Fkey%3Dabc%26page%3D2")
// "https%3A//www.baidu.com/%3Fkey%3Dabc%26page%3D2"

URI

统一资源标识符(Uniform Resource Identifier) 是一个指向资源的字符串。
最通常用在 URL 上来指定 Web 上资源文件的具体位置。