JavaScript encodeURIComponent() 函数

JavaScript encodeURIComponent() 语法

encodeURIComponent() 是 JavaScript 的一个全局函数，它用于对 “URI 的某个部分” 进行编码，比如查询参数的值、路径段或片段标识符等。

encodeURIComponent() 会将 URI 组件中的所有非字母数字字符（除了少数例外）转换为 “%xx” 的形式（其中 “xx” 是字符的十六进制表示）。

语法：

encodeURIComponent(URIcomponent)

说明：

encodeURIComponent() 函数接收单个参数。

URIcomponent（必选）：URI 字符串的某个部分。

encodeURIComponent() 函数会将几乎所有非字母数字字符进行编码，包括那些在完整 URI 中被视为保留字符的字符，例如 ;、/、?、:、@、&、=、+、$、,、#。但它不会编码以下字符：

字母数字字符：A-Z a-z 0-9。
特殊字符：- _ . ! ~ * ' ( )。

提示:

encodeURIComponent() 是一个全局函数（顶层函数），我们可以直接调用而无需创建实例。
如果需要编码整个 URI，我们应该使用 encodeURI() 函数。

JavaScript encodeURIComponent() 摘要

属于	JavaScript 全局对象
使用频率	中
官方文档	查看
MDN	查看

JavaScript encodeURIComponent() 示例

接下来，我们通过一个简单的例子来讲解一下 encodeURIComponent() 是如何使用的。

示例 1：encodeURIComponent() 基本用法

运行代码

const queryString1 = "?keywords=绿叶网";
console.log(encodeURIComponent(queryString1));

const queryString2 = "?keywords=πθφ&charset=utf8";
console.log(encodeURIComponent(queryString2));

运行结果如下。

%3Fkeywords%3D%E7%BB%BF%E5%8F%B6%E7%BD%91
%3Fkeywords%3D%CF%80%CE%B8%CF%86%26charset%3Dutf8

分析：

encodeURIComponent() 不仅会将中文字符进行编码，同时也会对 URI 保留字符 “&”、“?” 等进行编码。这样做的目的是：确保这些字符在作为查询参数值传输时，不会被误解析为 URI 结构的一部分。

encodeURI() 与 encodeURIComponent() 的区别

encodeURI() 与 encodeURIComponent() 这两个函数都用于对 URI 进行编码，但它们之间存在以下的区别。

encodeURI()：不会对属于 URI 语法的字符（即 URI 保留字符）进行编码，包括 /、:、？、= 等。比如 "?keywords=python&charset=utf8" 编码之后还是 "?keywords=python&charset=utf8"。
encodeURIComponent()：会对属于 URI 语法的字符进行编码，编码会更加彻底。比如 "?keywords=python&charset=utf8" 编码之后会变成 "%3Fkeywords%3Dpython%26charset%3Dutf8"。

encodeURI() 对比 encodeURIComponent()
原值	encodeURI()	encodeURIComponent()
%	%25	%25
空格	%20	%20
:	:	%3A
/	/	%2F
?	?	%3F
=	=	%3D
+	+	%2B
;	;	%3B
#	#	%23
$	$	%24
&	&	%26
@	@	%40

示例 2：encodeURI() vs encodeURIComponent()

运行代码

const str = "?keywords=绿叶网&charset=utf8";

console.log(encodeURI(str));
console.log(encodeURIComponent(str));

运行结果如下。

?keywords=%E7%BB%BF%E5%8F%B6%E7%BD%91&charset=utf8
%3Fkeywords%3D%E7%BB%BF%E5%8F%B6%E7%BD%91%26charset%3Dutf8

分析：

再次强调一下：如果想要编码 “整个 URI”，我们应该使用 encodeURI() 函数。如果想要编码 “URI 的某个部分（如查询字符串）”，我们应该使用 encodeURIComponent() 函数。