From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../global_objects/encodeuricomponent/index.html | 144 +++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent/index.html (limited to 'files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent') diff --git a/files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent/index.html new file mode 100644 index 0000000000..d80cd457c9 --- /dev/null +++ b/files/zh-cn/web/javascript/reference/global_objects/encodeuricomponent/index.html @@ -0,0 +1,144 @@ +--- +title: encodeURIComponent() +slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent +tags: + - JavaScript + - URI + - 统一资源标识符 +translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent +--- +
{{jsSidebar("Objects")}}
+ +

encodeURIComponent()函数通过将一个，两个，三个或四个表示字符的UTF-8编码的转义序列替换某些字符的每个实例来编码 URI （对于由两个“代理”字符组成的字符而言，将仅是四个转义序列） 。

+ +

{{EmbedInteractiveExample("pages/js/globalprops-encodeuricomponent.html","shorter")}}

+ +

语法

+ +
encodeURIComponent(str);
+ +

参数

+ +
+
str
+
String. URI 的组成部分。
+
+ +

返回值

+ +

原字串作为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 (the space gets encoded as %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 (the space gets encoded as %20)
+ +

注意，如果试图编码一个非高-低位完整的代理字符，将会抛出一个 {{jsxref("URIError")}} 错误，例如：

+ +
// 高低位完整
+alert(encodeURIComponent('\uD800\uDFFF'));
+
+// 只有高位，将抛出"URIError: malformed URI sequence"
+alert(encodeURIComponent('\uD800'));
+
+// 只有低位，将抛出"URIError: malformed URI sequence"
+alert(encodeURIComponent('\uDFFF'));
+ +

为了避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容你都需要用encodeURIComponent进行转义。比如，一个用户可能会输入"Thyme &time=again"作为comment变量的一部分。如果不使用encodeURIComponent对此内容进行转义，服务器得到的将是comment=Thyme%20&time=again。请注意，"&"符号和"="符号产生了一个新的键值对，所以服务器得到两个键值对（一个键值对是comment=Thyme，另一个则是time=again），而不是一个键值对。

+ +

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

+ +

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

+ +
function fixedEncodeURIComponent (str) {
+  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
+    return '%' + c.charCodeAt(0).toString(16);
+  });
+}
+ +

示例

+ +

下面这个例子提供了 UTF-8 下 Content-Disposition 和 Link 的服务器响应头信息的参数（例如 UTF-8 文件名)：

+ +
var fileName = 'my file(2).txt';
+var header = "Content-Disposition: attachment; filename*=UTF-8''"
+             + encodeRFC5987ValueChars(fileName);
+
+console.log(header);
+// 输出 "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt"
+
+
+function encodeRFC5987ValueChars (str) {
+    return encodeURIComponent(str).
+        // 注意，仅管 RFC3986 保留 "!"，但 RFC5987 并没有
+        // 所以我们并不需要过滤它
+        replace(/['()]/g, escape). // i.e., %27 %28 %29
+        replace(/\*/g, '%2A').
+            // 下面的并不是 RFC5987 中 URI 编码必须的
+            // 所以对于 |`^ 这3个字符我们可以稍稍提高一点可读性
+            replace(/%(?:7C|60|5E)/g, unescape);
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('ES3')}}{{Spec2('ES3')}}初始定义
{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}{{Spec2('ESDraft')}}
+ +

浏览器兼容性

+ +

{{Compat("javascript.builtins.encodeURIComponent")}}

+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf