HTML5 – URL

HTML5中的URL，即統(tǒng)一資源定位符，在互聯網中廣泛應用。愛掏網 - it200.com在具體開發(fā)中，URL可以用在很多地方，比如a標簽的href屬性、img標簽的src屬性等等。愛掏網 - it200.com在HTML中，URL用字符串來表示，它包含協議、主機、端口以及資源路徑等信息。愛掏網 - it200.com

一個URL由四個部分組成：

• 協議(protocol) – 決定了要如何處理要獲取的文件或者數據。愛掏網 - it200.com通常是http或https協議。愛掏網 - it200.com
• 主機名(hostname) – 指定了提供服務的機器名或者IP地址。愛掏網 - it200.com
• 端口(port) – 指定了要使用的端口號（這個部分可以省略，默認為使用80端口）。愛掏網 - it200.com
• 資源路徑(resource path) – 定義了需要獲取的特定資源的位置，以及任何查詢參數(query parameter)。愛掏網 - it200.com

下面是一個例子：

http://www.example.com:8080/path/to/file.html?query=123&search=hello

這個URL表示了一個使用http協議訪問www.example.com機器上位于8080端口的文件/file.html，并且有查詢參數query和search。愛掏網 - it200.com

URL的編碼

在URL中，一些字符需要被編碼，在URL中使用百分比編碼來代替特殊符號。愛掏網 - it200.comURL編碼是將不安全的字符用%后跟兩個表示該字符ASCII碼的十六進制數來替換的過程。愛掏網 - it200.com例如，空格字符被%20替換，加號字符被%2B替換，等號字符被%3D替換。愛掏網 - it200.com

在JavaScript中，可以使用encodeURI()和encodeURIComponent()兩個API進行URL編碼操作。愛掏網 - it200.com

encodeURI()函數用于對完整的URL進行編碼，除ASCII字母、數字、標點符號（- _ . ! ~ * ‘ ( )）外，所有字符都將被替換成%XX格式。愛掏網 - it200.com不過，該函數不會對“/”，“:”和“#”進行編碼。愛掏網 - it200.com下面是一個例子：

var uri = "http://www.example.com/\:8080/path/to/file.html";
var encodedUri = encodeURI(uri);
console.log(encodedUri); // "http://www.example.com/:8080/path/to/file.html"

encodeURIComponent()函數用于對URL中的參數進行編碼。愛掏網 - it200.com該函數將字母、數字、標點符號和以下字符（- _ . ! ~ * ‘ ( )）以外的所有字符替換成%XX格式，包括用于URL的特殊字符如“/”，“:”，“#”和“?”。愛掏網 - it200.com下面是一個例子：

var uri = "http://www.example.com/path/to/file.html?name=Mr.%20John%20Smith&age=30";
var encodedName = encodeURIComponent("Mr. John Smith");
var encodedAge = encodeURIComponent("30");
var encodedUri = uri + "?name=" + encodedName + "&age=" + encodedAge;
console.log(encodedUri);
// http://www.example.com/path/to/file.html?name=Mr.%20John%20Smith&age=30

URL的解碼

在JavaScript中，可以使用decodeURI()和decodeURIComponent()兩個API進行URL解碼操作。愛掏網 - it200.com

decodeURI()函數用于對完整的URL進行解碼，將被編碼的字符還原成原始字符。愛掏網 - it200.com不過，該函數不會對“/”，“:”和“#”進行解碼。愛掏網 - it200.com下面是一個例子：

var encodedUri = "http://www.example.com/:8080/path/to/file.html";
var uri = decodeURI(encodedUri);
console.log(uri); // "http://www.example.com/:8080/path/to/file.html"

decodeURIComponent()函數用于對URL中的參數進行解碼。愛掏網 - it200.com下面是一個例子：

var encodedName = "Mr.%20John%20Smith";
var encodedAge = "30";
var encodedUri = "http://www.example.com/path/to/file.html?name=" + encodedName + "&age=" + encodedAge;
var name = decodeURIComponent(encodedName);
var age = decodeURIComponent(encodedAge);
console.log(name); // "Mr. John Smith"
console.log(age); // "30"

URLSearchParams對象

在HTML5中，引入了一個新的URL處理API – URLSearchParams對象。愛掏網 - it200.com這個對象可用于處理URL中的查詢參數，并提供了多個方法來處理這些參數。愛掏網 - it200.com

下面是一個例子：

var urlSearchParams = new URLSearchParams("?name=Mr.%20John%20Smith&age=30");
console.log(urlSearchParams.get("name")); // "Mr. John Smith"
console.log(urlSearchParams.get("age")); // "30"

以上代碼創(chuàng)建了一個URLSearchParams對象，并從其中獲取了查詢參數“name”和“age”的值。愛掏網 - it200.com

除了基本的get方法，還有以下方法：

• set(key, value) – 設置指定key的value值，如果存在，則覆蓋原值。愛掏網 - it200.com
• append(key, value) – 在指定key的末尾追加一個value值。愛掏網 - it200.com
• delete(key) – 刪除指定key的所有values。愛掏網 - it200.com
• getAll(key) – 返回一個指定key的所有values的數組。愛掏網 - it200.com
• has(key) – 如果存在指定key，則返回true，否則返回false。愛掏網 - it200.com

下面是一個使用URLSearchParams對象的示例：

var urlSearchParams = new URLSearchParams("?category=shoes&size=xl&size=l&color=red");
urlSearchParams.set("size", "m");
console.log(urlSearchParams.toString()); // "category=shoes&size=m&color=red"
urlSearchParams.append("size", "s");
console.log(urlSearchParams.toString()); // "category=shoes&size=m&color=red&size=s"
urlSearchParams.delete("color");
console.log(urlSearchParams.toString()); // "category=shoes&size=m&size=s"
console.log(urlSearchParams.getAll("size")); // ["m", "s"]
console.log(urlSearchParams.has("category")); // true
console.log(urlSearchParams.has("color")); // false

結論

在HTML5中，URL作為互聯網的重要部分，有著廣泛的應用。愛掏網 - it200.com了解URL的基本結構和編碼原理，可以更好地理解URL的作用和使用方式。愛掏網 - it200.com在JavaScript中，使用encodeURI()和decodeURI()可以對URL進行編解碼操作，使用URLSearchParams對象可以方便地處理URL中的查詢參數。愛掏網 - it200.com