WEB基础之：JavaScript转义

JavaScript转义

• • 1. encodeURI()
  • • 1.1 注意
  • 2. decodeURI()
  • 3. encodeURIComponent()
  • • 3.1 `encodeURIComponent()` 和 `encodeURI` 比较
    • 3.2 注意
  • 4. decodeURIComponent()
  • 5. URIError
  • • 5.1 示例

1. encodeURI()

encodeURI() 函数通过将特定字符替换为转义序列来对统一资源标识符 (URI) 进行编码 。

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

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

完整URI:

http://username:password@www.example.com:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor

示例：

encodeURI("https://cn.bing.com/search?q=你好")
// "https://cn.bing.com/search?q=%E4%BD%A0%E5%A5%BD"

1.1 注意

• encodeURI 自身无法产生能适用于HTTP GET 或 POST 请求的URI，例如对于 XMLHTTPRequests, 因为 “&”, “+”, 和 “=” 不会被编码，然而在 GET 和 POST 请求中它们是特殊字符。然而encodeURIComponent这个方法会对这些字符编码。
• 如果试图编码一个非高-低位完整的代理字符，将会抛出一个 URIError错误，例如：

// 编码高-低位完整字符 ok
console.log(encodeURI('\uD800\uDFFF'));

// 编码单独的高位字符抛出 "Uncaught URIError: malformed URI sequence"
console.log(encodeURI('\uD800'));

// 编码单独的低位字符抛出 "Uncaught URIError: URI malformed"
console.log(encodeURI('\uDFFF'));

• 如果URL需要遵循较新的RFC3986标准，那么方括号是被保留的(给IPv6)，因此对于那些没有被编码的URL部分(例如主机)，可以使用下面的代码：

function fixedEncodeURI (str) {
    return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
}

2. decodeURI()

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

decodeURI("https://cn.bing.com/search?q=%E4%BD%A0%E5%A5%BD");
// "https://cn.bing.com/search?q=你好"

3. encodeURIComponent()

encodeURIComponent()函数通过将UTF-8编码的转义序列替换为某些字符的编码 URI

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

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

示例：

encodeURIComponent("https://cn.bing.com/search?q=你好")
// "https%3A%2F%2Fcn.bing.com%2Fsearch%3Fq%3D%E4%BD%A0%E5%A5%BD"

3.1 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)

3.2 注意

• 如果试图编码一个非高-低位完整的代理字符，将会抛出一个 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);
  });
}

// 示例
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).replace(/['()]/g, escape).replace(/\*/g, '%2A').replace(/%(?:7C|60|5E)/g, unescape);
        // 仅管 RFC3986 保留 "!"，但 RFC5987 并没有，所以我们并不需要过滤它
        // 对于 |`^ 并不是 RFC5987 中 URI 编码必须的。可以直接引用
}

4. decodeURIComponent()

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

decodeURIComponent("https%3A%2F%2Fcn.bing.com%2Fsearch%3Fq%3D%E4%BD%A0%E5%A5%BD")
// "https://cn.bing.com/search?q=你好"

5. URIError

当向全局 URI 处理函数传递一个不合法的URI时，URIError 错误会被抛出。

new URIError([message[, fileName[, lineNumber]]])

URIError.prototype 允许向一个 URIError 对象添加额外的属性。

属性	描述
URIError.prototype.constructor	声明创建实例原型 (prototype) 的方法。
URIError.prototype.message	错误信息。虽然 ECMA-262 规范指出 URIError 应该提供其自己专属的 message 属性，但是在 SpiderMonkey 中，该属性继承自 Error.prototype.message
URIError.prototype.name	错误名称。继承自 Error。
URIError.prototype.fileName	产生该错误的代码所在文件的路径。 继承自 Error。
URIError.prototype.lineNumber	产生该错误的代码所在行的行号。继承自 Error。
URIError.prototype.columnNumber	产生该错误的代码所在列的列号。 继承自 Error。
URIError.prototype.stack	堆栈记录。继承自 Error。

5.1 示例

捕获一个 URIError 实例

try {
  decodeURIComponent('%');
} catch (e) {
  console.log(e instanceof URIError); // true
  console.log(e.message);             // malformed URI sequence
  console.log(e.name);                // URIError
  console.log(e.fileName);            // debugger eval code
  console.log(e.lineNumber);          // 2
  console.log(e.columnNumber);        // 21
  console.log(e.stack);               // @debugger eval code:2:21
}

创建一个 URIError 实例

try {
  throw new URIError('Hello', 'someFile.js', 10);
} catch (e) {
  console.log(e instanceof URIError); // true
  console.log(e.message);             // Hello
  console.log(e.name);                // URIError
  console.log(e.fileName);            // someFile.js
  console.log(e.lineNumber);          // 10
  console.log(e.columnNumber);        // 0
  console.log(e.stack);               // @debugger eval code:2:9
}