資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 TypeScript 中編碼和解碼 URL？
URI 代表統一資源識別符號。URL 是最常見的 URI 之一。我們使用 URL（統一資源定位符）來查詢位於網際網路上的網頁。網頁還包含資源。
簡單來說，URI 是包含某些字元的字串，我們可以使用 URI 識別網路上的物理和邏輯資源。URL 是 URI 的一個子集，它儲存網路上的文件地址。
編碼 URI 的原因
閱讀本教程標題後，您腦海中出現的第一個問題可能是為什麼我們需要對 URI 進行編碼和解碼。答案很簡單：URL 只能包含 128 個 ASCII 字元集中的字元。因此，我們需要對某些不屬於 128 個 ASCII 字元集的字元進行編碼。
因此，我們必須使用轉義序列來轉義諸如“！”和“空格”之類的特殊字元，我們可以透過對 URI 進行編碼來實現。如果我們不轉義此類特殊字元，可能會導致問題。
在 TypeScript 中編碼 URI
在 TypeScript 中編碼 URI 有兩種方法可用。encodeURI() 和 encodeURIComponent()。這兩種方法都是內建庫方法，它們將一些特殊字元（例如空格）編碼為一個、兩個、三個或四個轉義序列。這裡，轉義序列表示字元的 UTF-8 編碼。
encodeURI() 和 encodeURIComponent() 方法之間的主要區別在於，encodeURI() 編碼整個 URL 或 URI，而 encodeURIComponent() 編碼 URL 的一部分，這可能是 URL 的查詢引數。
語法
使用者可以按照以下語法使用 encodeURI() 和 encodeURIComponent() 方法對 URI 進行編碼。
let encoded = encodeURI(URI); let encodedComponent = encodeURIComponent(URI);
這裡URI是要透過轉義一些特殊字元進行編碼的 URI。
示例 1
在輸出中，我們看到空格被轉義為 %20，“<”被轉義為 %3C，“>”被轉義為 %3E。
// URL which contains the spaces, <, > as a special characters const demoURL = 'https ://tutorialspoint.tw/artic les/i ndex.php<>'; // encode the URI to escape the special characters. const encodedURL = encodeURI(demoURL); // Printing the encoded URL console.log(encodedURL);
編譯後，它將生成以下 JavaScript 程式碼：
// URL which contains the spaces, <, > as a special characters var demoURL = 'https ://tutorialspoint.tw/artic les/i ndex.php<>'; // encode the URI to escape the special characters. var encodedURL = encodeURI(demoURL); // Printing the encoded URL console.log(encodedURL);
輸出
以上程式碼將產生以下輸出：
https%20://tutorialspoint.tw/artic%20les/i%20ndex.php%3C%3E
示例 2
此示例演示瞭如何使用 encodeURIComponent() 方法對 URL 的一部分進行編碼。我們獲取了包含特殊字元的 URL 字串。之後，我們使用 encodeURIComponent() 方法對 URL 的“index.php<>”部分進行編碼。此外，我們還使用 encodeURIComponent() 對 URL 的“www.Tutorialspoint.com”部分進行了編碼。
輸出顯示，它不是對整個 URL 進行編碼，而是對 URL 的特定部分進行編碼。
// encoding the part of the URL using the encodeURIComponent() method
const encodedURLComponent = `https://tutorialspoint.tw/articles/${encodeURIComponent(
"index.php<>"
)}`;
// Printing the URL with the encoded component.
console.log(encodedURLComponent);
// Encoding the another component of the same URL
console.log(
`https://${encodeURIComponent(
"www. tutorialspoint.com"
)}/articles/index.php<>`
);
編譯後，它將生成以下 JavaScript 程式碼：
// encoding the part of the URL using the encodeURIComponent() method
var encodedURLComponent = "https://tutorialspoint.tw/articles/" + encodeURIComponent("index.php<>");
// Printing the URL with the encoded component.
console.log(encodedURLComponent);
// Encoding the another component of the same URL
console.log("https://" + encodeURIComponent("www. tutorialspoint.com") + "/articles/index.php<>");
輸出
以上程式碼將產生以下輸出：
https://tutorialspoint.tw/articles/index.php%3C%3E https://www.%20tutorialspoint.com/articles/index.php<>
在 TypeScript 中解碼 URI
顯然，我們需要解碼編碼的 URI。解碼器用特殊字元替換字元的轉義序列，並從編碼的 URI 生成原始 URI。我們可以使用 decodeURI() 方法解碼 URI，或使用 decodeURIComponent() 方法解碼 URI 的一部分。
語法
使用者可以按照以下語法使用 decodeURI() 和 decodeURIComponent() 方法解碼編碼的 URL 或其元件。
let orginalURL = decodeURI(encoded_URI); let orginalURLComponent = decodeURI(encoded_URI);
這裡encoded_URI是要解碼的編碼的 URI 或 URL。
示例 1
在此示例中，我們首先使用 encodeURI() 方法對 URI 進行編碼，然後使用 decodeURI() 方法對 URI 進行解碼。
輸出顯示與原始 URI 相同的 URI，因為我們在編碼 URI 後對其進行了解碼。
// defining the original URI
let originalURI = "https://www.google. com/";
// encoding the URI
let encodedURI = encodeURI(originalURI);
console.log("The encoded URI is " + encodedURI);
// decoding the URI
let decodedURI = decodeURI(encodedURI);
console.log("The decoded URI is " + decodedURI);
編譯後，它將生成以下 JavaScript 程式碼：
// defining the original URI
var originalURI = "https://www.google. com/";
// encoding the URI
var encodedURI = encodeURI(originalURI);
console.log("The encoded URI is " + encodedURI);
// decoding the URI
var decodedURI = decodeURI(encodedURI);
console.log("The decoded URI is " + decodedURI);
輸出
以上程式碼將產生以下輸出：
The encoded URI is https://www.google.%20com/ The decoded URI is https://www.google. com/
示例 2
以下示例演示了 decodeURIComponent() 方法的使用。我們獲取了 google 域的 URL，並使用 encodeURIComponent() 方法對 URL 中包含空格和其他特殊字元的部分進行編碼。
在輸出中，使用者可以看到編碼的 URL。我們從輸出中複製了編碼的 URL，並使用 decodeURIComponent() 方法僅解碼編碼的部分，而不是解碼整個 URL。解碼編碼部分後，它看起來類似於原始 URL。
// encoding the URI component
let encodedURIComponent = `https://www.${encodeURIComponent(
"google. com/:>"
)}=`;
console.log("The encoded URI component is " + encodedURIComponent);
// decoding the URI Component
let decodedURIComponent = `https://www.${decodeURIComponent(
"google.%320com/:%3E"
)}=`;
console.log("The decoded URI Component is " + decodedURIComponent);
編譯後，它將生成以下 JavaScript 程式碼：
// encoding the URI component
let encodedURIComponent = `https://www.${encodeURIComponent(
"google. com/:>"
)}=`;
console.log("The encoded URI component is " + encodedURIComponent);
// decoding the URI Component
let decodedURIComponent = `https://www.${decodeURIComponent(
"google.%320com/:%3E"
)}=`;
console.log("The decoded URI Component is " + decodedURIComponent);
輸出
以上程式碼將產生以下輸出：
The encoded URI component is https://www.google.%20com%2F%3A%3E= The decoded URI Component is https://www.google.20com/:>=
在現實生活中的開發中，URI 的編碼和解碼有一些用例。例如，我們希望使用表單從使用者那裡獲取字串，並使用該資料建立 URL。使用者可以輸入空格和 128 個 ASCII 字元集之外的字元，然後我們需要對其進行編碼。
有時，我們需要僅對 URL 的查詢引數進行編碼。在這種情況下，我們可以使用 encodeURIComponent() 方法。對 URI 進行編碼後，當我們想要顯示 URI 或 URL 時，必須對其進行解碼。
15K+ 瀏覽量
