JavaScript URL編碼與解碼

一、URL編碼與解碼概述

在Web開發中，有時需要將字元串傳遞給URL。由於某些字元會在URL中具有特殊含義（例如?、&、=等），因此需要進行URL編碼以確保這些字元被正確地處理。同時也需要對傳入的URL進行解碼，以將之前被編碼的字元轉換回原始狀態。

二、JavaScript中的URL編碼

在JavaScript中，可以使用encodeURI()和encodeURIComponent()函數對URL進行編碼。

1. encodeURI()

encodeURI()函數可對整個URI進行編碼，除了ASCII字母、數字、符號$-_.+!*'()外，其他的字元都將返回UTF-8編碼的字元。

var url = "https://www.example.com/?a=b#c";
var encoded = encodeURI(url);
console.log(encoded); // 輸出：https://www.example.com/?a=b#c

2. encodeURIComponent()

encodeURIComponent()函數可對URI中的每一段進行編碼，包括ASCII字母、數字以及一些特殊字元，例如：冒號、斜杠、問號、井號等。

var url = "https://www.example.com/?a=b#c";
var encoded = encodeURIComponent(url);
console.log(encoded); // 輸出：https%3A%2F%2Fwww.example.com%2F%3Fa%3Db%23c

三、JavaScript中的URL解碼

在JavaScript中，可以使用decodeURI()和decodeURIComponent()函數對URL進行解碼。

1. decodeURI()

decodeURI()函數可對encodeURI()函數編碼的URI進行解碼。

var encoded = "https://www.example.com/?a=b#c";
var decoded = decodeURI(encoded);
console.log(decoded); // 輸出：https://www.example.com/?a=b#c

2. decodeURIComponent()

decodeURIComponent()函數可對encodeURIComponent()函數編碼的URI進行解碼。

var encoded = "https%3A%2F%2Fwww.example.com%2F%3Fa%3Db%23c";
var decoded = decodeURIComponent(encoded);
console.log(decoded); // 輸出：https://www.example.com/?a=b#c

四、代碼示例

下面是一個JavaScript中URL編碼和解碼的完整代碼示例：

var url = "https://www.example.com/?a=b#c"; // 要編碼的URL

// URL 編碼
var encodedURI = encodeURI(url);
var encodedURIComponent = encodeURIComponent(url);

console.log(encodedURI); // 輸出：https://www.example.com/?a=b#c
console.log(encodedURIComponent); // 輸出：https%3A%2F%2Fwww.example.com%2F%3Fa%3Db%23c

// URL 解碼
var decodedURI = decodeURI(encodedURI);
var decodedURIComponent = decodeURIComponent(encodedURIComponent);

console.log(decodedURI); // 輸出：https://www.example.com/?a=b#c
console.log(decodedURIComponent); // 輸出：https://www.example.com/?a=b#c