JS encodeURIComponent()

🌙
手机阅读
本文目录结构

概述

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

语法

  1. encodeURIComponent(str);

参数

str

String. URI 的组成部分。

描述

encodeURIComponent 转义除了字母、数字、(、)、.、!、~、*、’、- 和_之外的所有字符。

注意,如果试图编码一个非高 - 低位完整的代理字符,将会抛出一个 URIError 错误,例如:

  1. // 高低位完整
  2. alert(encodeURIComponent('\uD800\uDFFF'));
  3. // 只有高位,将抛出"URIError: malformed URI sequence"
  4. alert(encodeURIComponent('\uD800'));
  5. // 只有低位,将抛出"URIError: malformed URI sequence"
  6. 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 的用途,下面这种方式是比较安全的:

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

示例

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

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

规范

规范 状态 备注
ECMAScript 3rd Edition (ECMA-262) Standard 初始定义
ECMAScript 5.1 (ECMA-262)
encodeURIComponent
Standard
ECMAScript 2015 (6th Edition, ECMA-262)
encodeURIComponent
Standard
ECMAScript Latest Draft (ECMA-262)
encodeURIComponent
Draft

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了