react中如何encode
在 React 中如何进行 URL 编码
React 中可以使用 JavaScript 内置的 encodeURIComponent 或 encodeURI 函数对 URL 进行编码。这些函数是 JavaScript 标准库的一部分,无需额外安装。
使用 encodeURIComponent
encodeURIComponent 用于编码 URI 的组成部分,例如查询参数。它会编码几乎所有特殊字符。
const queryParam = 'user name=张三&age=25';
const encodedParam = encodeURIComponent(queryParam);
console.log(encodedParam); // 输出: user%20name%3D%E5%BC%A0%E4%B8%89%26age%3D25
使用 encodeURI
encodeURI 用于编码整个 URI,不会编码属于 URI 的特殊字符,如 /, ?, = 等。
const url = 'https://example.com/user name=张三';
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // 输出: https://example.com/user%20name=%E5%BC%A0%E4%B8%89
在 React 组件中使用
在 React 组件中,可以在事件处理函数或 useEffect 中调用这些编码函数。
import React from 'react';
function MyComponent() {
const handleClick = () => {
const param = 'user name=张三';
const encoded = encodeURIComponent(param);
console.log(encoded);
};
return <button onClick={handleClick}>Encode</button>;
}
处理查询参数
如果需要处理 URL 查询参数,可以结合 URLSearchParams 使用。
const params = new URLSearchParams();
params.append('name', '张三');
params.append('age', '25');
const queryString = params.toString();
// queryString 已经是编码后的字符串
注意事项
encodeURIComponent会编码更多字符,适合编码查询参数或路径部分。encodeURI适合编码整个 URL,但不会编码保留字符。- 对于现代浏览器,
URLSearchParams是处理查询参数更安全的方式。







