JavaScript escape and unescape, encodeURIComponent and decodeURIComponent

The escape() and unescape() methods in JavaScript are used to encode and decode strings, respectively. However, both methods have been deprecated and are generally not recommended for use in modern JavaScript. Instead, it is recommended to use encodeURIComponent() and decodeURIComponent() for URL encoding and decoding. That said, here’s a detailed explanation of the differences between escape() and unescape():

1. escape(string) Method

The encode method encodes a string by escaping certain characters, such as non-ASCII characters and special characters. It converts all non-ASCII characters and certain special characters into a hexadecimal escape sequence (e.g., %20 for space, %uXXXX for Unicode characters). It only escapes characters that are not part of the ASCII character set, including characters like spaces, punctuation, and control characters. 

Note that this method has been deprecated because it does not correctly handle all characters, especially UTF-8 characters, and may lead to encoding issues.

Example:

let str = "Hello, world!";
let encodedStr = escape(str);  // "Hello%2C%20world%21"

In the example, the characters like , (comma) and ! (exclamation mark) are replaced with their respective escape sequences.

2. unescape(string) Method

The unescape method decodes a string that was previously encoded by the escape() method. It converts escape sequences (such as %20 for spaces and %uXXXX for Unicode characters) back into their original characters.

Note that just like escape(), this method is deprecated because it doesn't properly handle modern UTF-8 encoding and decoding.

Example:

let encodedStr = "Hello%2C%20world%21";
let decodedStr = unescape(encodedStr);  // "Hello, world!"

In the example, the encoded string is decoded back to the original string, replacing the escape sequences with their corresponding characters.

Key Differences

• escape(): Encodes special characters (non-ASCII characters) into escape sequences, primarily targeting characters outside the ASCII range and some special characters (like spaces, &, =, etc.).
• unescape(): Decodes a string that was encoded using escape() and restores the special characters back to their original form.

Limitations

• These methods only support ASCII characters and do not handle multibyte characters or newer character encodings like UTF-8 correctly.
• They don't handle certain edge cases, like %u sequences for Unicode characters, which encodeURIComponent() and decodeURIComponent() are designed to handle properly.

Example Comparison:

let str = "Hello, world! 你好，世界！";
let encodedStr = escape(str);
console.log(encodedStr);  // "Hello%2C%20world%21%u4F60%u597D%EF%BC%8C%u4E16%u754C%EF%BC%81"

let decodedStr = unescape(encodedStr);
console.log(decodedStr);  // "Hello, world! 你好，世界！"

Recommended Usage (for modern applications)

Instead of using escape() and unescape(), it is better to use the following methods for encoding and decoding URLs:

encodeURIComponent(): Encodes a URI component, handling characters like &, =, and # properly.

decodeURIComponent(): Decodes a URI component encoded with encodeURIComponent().

For example:

let str = "Hello, world! 你好，世界！";
let encodedStr = encodeURIComponent(str);
console.log(encodedStr);  // "Hello%2C%20world%21%20%E4%BD%A0%E5%A5%BD%EF%BC%8C%E4%B8%96%E7%95%8C%EF%BC%81"

let decodedStr = decodeURIComponent(encodedStr);
console.log(decodedStr);  // "Hello, world! 你好，世界！"

Conclusion

• escape() is used to encode a string by escaping non-ASCII characters.
• unescape() is used to decode a string back to its original form.
• Both methods are deprecated, and you should use encodeURIComponent() and decodeURIComponent() instead for proper encoding and decoding, especially when working with URLs.