当前位置：首页 > React

react中如何encode

2026-02-26 14:22:13React

编码 URL 或字符串

在 React 中，可以使用 JavaScript 内置的 encodeURIComponent 或 encodeURI 函数对 URL 或字符串进行编码。这两个函数的区别在于编码范围不同：

react中如何encode

encodeURIComponent：编码范围更广，包括 ; / ? : @ & = + $ , # 等字符。
encodeURI：编码范围较窄，主要用于编码整个 URL，不编码 ; / ? : @ & = + $ , # 等保留字符。

const originalString = "Hello World!@#$";
const encodedComponent = encodeURIComponent(originalString);
const encodedURI = encodeURI(originalString);

console.log(encodedComponent); // "Hello%20World!%40%23%24"
console.log(encodedURI); // "Hello%20World!@#$"

解码 URL 或字符串

如果需要解码已编码的字符串，可以使用 decodeURIComponent 或 decodeURI：

react中如何encode

const decodedComponent = decodeURIComponent(encodedComponent);
const decodedURI = decodeURI(encodedURI);

console.log(decodedComponent); // "Hello World!@#$"
console.log(decodedURI); // "Hello World!@#$"

Base64 编码与解码

如果需要使用 Base64 编码，可以通过 btoa 和 atob 函数实现：

const originalText = "Hello React!";
const base64Encoded = btoa(originalText);
const base64Decoded = atob(base64Encoded);

console.log(base64Encoded); // "SGVsbG8gUmVhY3Qh"
console.log(base64Decoded); // "Hello React!"

处理表单数据编码

在表单提交时，可能需要将数据编码为 application/x-www-form-urlencoded 格式。可以使用 URLSearchParams 实现：

const formData = { name: "John Doe", email: "john@example.com" };
const params = new URLSearchParams();

Object.entries(formData).forEach(([key, value]) => {
  params.append(key, value);
});

console.log(params.toString()); // "name=John+Doe&email=john%40example.com"