URL 编码 JavaScript

2025 年 2 月 16 日 | 阅读 6 分钟

JavaScript 中的 URL 是什么？

在 JavaScript 中，URL 通常指统一资源定位符，它指向一个网络资源，指定其在计算机网络上的位置和检索机制。

简而言之，URL 对象是一个内置对象，提供用于处理 URL 的实用方法。它是一串字符，用于指定万维网上的地址。

它们是网络浏览的基础，因为它们告诉网络浏览器在哪里定位网页、图像、脚本和互联网上的其他文件等资源。

URL 的组成部分

方案

方案指示用于访问互联网上资源的协议。一些常见的方案包括“http”、“https”、“ftp”、“file”等。例如，在 URL https://www.example.com 中，方案是“https”。

领域

域是与互联网上特定 IP 地址对应的人类可读名称。在 URL https://www.example.com 中，域是 www.example.com。

端口

端口号是可选的，指定资源托管的通信端点。如果未指定，则使用方案的默认端口。例如，在 URL https://www.example.com:8080 中，端口是“8080”。

路径

路径指定服务器上特定资源的位置。它在域之后开始，并且可选地包含子目录。例如，在 URL “https://www.example.com/product/software” 中，路径是“/products/software”。

查询参数

查询参数用于将数据作为 URL 的一部分传递给服务器。它们通过问号 (?) 与 URL 的其余部分分隔开，并以由与号 (&) 分隔的键值对形式存在。例如，在 URL “https://www.example.com/search?q=javascript&page=1” 中，查询参数是“q=javascript&page=1”。

片段标识符

片段标识符，也称为哈希，指定文档中的特定部分。它由哈希符号 (#) 后跟一个标识符表示。例如，在 URL https://www.example.com/about#team 中，片段标识符是 team。

如何在 JavaScript 中使用 URL 对象？

在 JavaScript 中，我们可以使用内置的 URL 对象来处理 URL。此对象提供属性和方法来解析、操作和构造 URL。让我们看看如何使用 URL 对象

创建 URL 对象

我们可以通过将 URL 字符串作为参数传递给构造函数来创建新的 URL 对象。例如

访问 URL 组件

一旦有了 URL 对象，我们就可以使用属性访问其各种组件（例如协议、主机名、路径名、搜索等）。例如

console.log(url.protocol); // Output: "https:"
console.log(url.hostname); // Output: "www.example.com"
console.log(url.pathname); // Output: "/search"
console.log(url.search);   // Output: "?q=javascript&page=1"

修改 URL 组件

我们还可以修改 URL 的组件，并使用 URL 对象的属性和方法构造新的 URL 字符串。例如

g the URL object's properties and methods. For example:
url.hostname = 'subdomain.example.com';
url.searchParams.set('q', 'web development');
console.log(url.href); // Output: "https://subdomain.example.com/search?q=web%20development&page=1"

获取当前页面

要获取您当前所在网页的当前 URL，请使用 window.location.href 属性。

const currentUrl = window.location.href;
console.log(currentUrl);
// Output: Logs out your current URL Code language: JavaScript (javascript)

修改 URL 组件

我们可以使用 URL 对象的 searchParams 属性轻松修改 URL 的查询参数。

url.searchParams.set("q", "new query");
console.log(currentUrl);
//output: logs out your current URLcode language: JavaScript (javascript)

构造新的 URL

我们还可以通过组合不同的组件或修改现有组件来构造新的 URL。

const newURL = new URL("https://sample.com");
newURL.pathname = "/new-path";
newURL.searchParams.set("q", "new query");
console.log(newURL.toString())
// Output: https://sample.com/new-path?q=new+query Code language: JavaScript (javascript)

通过在 JavaScript 中使用 URL 对象，我们可以轻松处理 URL 并在您的 Web 应用程序中执行解析、修改和构造 URL 等任务。

为什么要在 JavaScript 中对 URL 进行编码？

当您在 JavaScript 中处理 URL 时，尤其是在处理动态内容时，您需要确保 URL 格式正确且使用安全。URL 可能包含特殊字符，例如空格、斜杠、问号等。如果这些字符未正确编码，它们可能会被 Web 服务器或浏览器误解，从而导致意外行为。

encodeURIComponent() 函数

JavaScript 提供了一个内置函数 encodeURIComponent()，专门用于编码 URL。此函数将字符串作为输入，并返回一个新字符串，其中某些字符已替换为其十六进制转义序列。这些转义序列由一个百分号 (%) 后跟两个十六进制数字组成。

语法

这是语法

uriComponent: 要编码的字符串。

encodeURIComponent() 函数对除以下字符之外的所有字符进行编码：字母字符、十进制数字以及特殊字符“-”、“_”、“.”和“~”。它还有助于我们将空格字符编码为“%20”而不是“+”字符，后者通常用于在查询字符串中编码空格。

示例

这是一个如何使用 encodeURIComponent() 的示例

var originalString = "Hello, world! This is a test & example.";
var encodedString = encodeURIComponent(originalString);
console.log(encodedString);

输出

Hello%2C%20world%21%20This%20is%20a%20test%20%26%20example.

如您所见，逗号、空格、感叹号和与号等特殊字符已正确编码，这使得结果字符串在 URL 中使用安全。

encodeURI() 函数

在 JavaScript 中，encodeURI 函数用于编码整个 URI，包括整个 URL。它不会编码 URI 中允许的某些字符，例如字母、数字、连字符、句点和下划线。

encodeURI 不编码的字符与 encodeURIComponent 函数的字符相同，外加几个更多字符，即

问号 (“?”)
井号 (“#”)
美元符号 (“$”)
与号 (“&”)
逗号 (“, ”)
正斜杠 (“/”)
冒号 (“: ”)
分号 (“;”)
At 符号 (“@”)
等号 (“= ”)
加号 (“+”)

让我们举一个简单的例子

const url = 'https://www.twitter.com';
console.log(encodeURI(url)); 
// Output: https://www.twitter.com 

结果将与给定的 URL 保持不变，因为 encodeURI() 函数不编码某些字符，例如斜杠、句点和冒号。

如果我们在同一个示例上使用 encodeURIComponent()，我们将观察到某些字符被编码。让我们举一个例子来理解

const url = 'https://www.twitter.com';
console.log(encodeURIComponent(url)); 
// Output: https%3A%2F%2Fwww.twitter.com

现在，让我们举一个更复杂的例子，要编码的 URL 值是一个查询参数。

const url = "https://sample.com/search?q=hello world";
console.log(encodeURI(url));
// Output: "https://sample.com/search?q=hello%20world"
console.log(encodeURIComponent(url));
// Output: https%3A%2F%2Fsample.com%2Fsearch%3Fq%3Dhello%20world

encodeURI() 函数帮助我们简单地将查询输入中的空格字符编码为“%20”。另一方面，encodeURIComponent() 编码查询参数中的冒号、斜杠和空格字符。

何时在 JavaScript 中使用 URL 编码？

在 JavaScript 中，URL 编码用于将 URL 中的特殊字符转换为可以安全地通过互联网传输的格式。您通常在 JavaScript 中动态构造 URL 时使用 URL 编码，尤其是在处理用户输入或从外部源检索的数据时。

以下是一些您会在 JavaScript 中使用 URL 编码的常见场景

查询参数

当我们使用查询参数构造 URL 时，我们应该对参数值进行 URL 编码，以确保正确处理空格、与号和斜杠等特殊字符。

var searchTerm = "user input with spaces";
var url = "https://example.com/search?q=" + encodeURIComponent(searchTerm);

表单提交

当您通过 JavaScript 提交表单数据时，您可能需要对表单值进行编码，以确保它们正确传输。

var formData = new FormData();
formData.append("name", "John Doe");
formData.append("email", "john@example.com");
// Use fetch API or XMLHttpRequest to send formData

动态 URL 构造

当我们根据变量或 API 响应中的数据动态构造 URL 时，我们应该对可能包含特殊字符的 URL 部分进行编码。

var dynamicValue = "some data with special characters: &/?=";
var url = "https://example.com/" + encodeURIComponent(dynamicValue);

AJAX 请求

当我们使用 XMLHttpRequest 或 fetch API 发送 AJAX 请求时，如果您在 URL 或请求正文中包含可能包含特殊字符的数据，我们应该对其进行 URL 编码。

var url = "https://example.com/api?param=" + encodeURIComponent(value);
fetch(url, {
    method: 'POST',
    body: JSON.stringify({ key: 'value' }),
    headers: {
        'Content-Type': 'application/json'
    }
});

通过在这些场景中使用 encodeURIComponent()，我们确保您的 URL 格式正确且可以安全地通过互联网传输。

结论

总之，在 JavaScript 中处理 URL 是 Web 开发的基础，使开发人员能够动态管理、操作和构造 URL。URL 对象提供了一个方便的接口来解析和修改 URL 组件，而 encodeURIComponent() 和 encodeURI() 等函数则确保 URL 格式正确且可以安全地通过互联网传输，尤其是在处理特殊字符或用户输入时。

了解 URL 的组成部分，例如方案、域、路径、查询参数和片段标识符，对于有效的 Web 开发至关重要。通过利用 JavaScript 的 URL 对象和编码功能，开发人员可以构建强大的 Web 应用程序，安全准确地处理 URL，从而增强用户体验并维护数据完整性。

下一主题使用 JavaScript 计算年龄

URL 编码 JavaScript

JavaScript 中的 URL 是什么？

URL 的组成部分

方案

领域

端口

路径

查询参数

片段标识符

如何在 JavaScript 中使用 URL 对象？

创建 URL 对象

访问 URL 组件

修改 URL 组件

获取当前页面

修改 URL 组件

构造新的 URL

为什么要在 JavaScript 中对 URL 进行编码？

encodeURIComponent() 函数

encodeURI() 函数

何时在 JavaScript 中使用 URL 编码？

查询参数

表单提交

动态 URL 构造

AJAX 请求

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

URL 编码 JavaScript

JavaScript 中的 URL 是什么？

URL 的组成部分

方案

领域

端口

路径

查询参数

片段标识符

如何在 JavaScript 中使用 URL 对象？

创建 URL 对象

访问 URL 组件

修改 URL 组件

获取当前页面

修改 URL 组件

构造新的 URL

为什么要在 JavaScript 中对 URL 进行编码？

encodeURIComponent() 函数

encodeURI() 函数