encodeURIComponent

最新推荐文章于 2024-07-22 09:34:42 发布

珊珊而川

最新推荐文章于 2024-07-22 09:34:42 发布

阅读量430

点赞数 5

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_63681863/article/details/140051052

版权

const SearchBar: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState<string>('');
  const router = useRouter();

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value);
  };

  const handleSearch = () => {
    if (searchTerm.trim() !== '') {
      router.push(`/zhaoci?term=${encodeURIComponent(searchTerm.trim())}`);
    }
  };

encodeURIComponent 是 JavaScript 中的一个全局函数，用于对 URI（Uniform Resource Identifier）中的组件进行编码。它确保将特殊字符转换为一个或多个转义的字符序列，这些序列是安全的并且可以在 URI 中传输。

主要作用

当你需要在 URL 中传递参数值时，某些字符可能具有特殊含义或是不允许的，例如空格、斜杠、问号、等号等。使用 encodeURIComponent 可以确保这些字符被正确编码，使得整个 URL 在传输过程中不会被截断或解析错误。

使用示例

假设你有一个用户输入的搜索词 searchTerm，它包含一些特殊字符，例如空格和中文：

const searchTerm = "hello world 你好";
const encodedSearchTerm = encodeURIComponent(searchTerm);

console.log(encodedSearchTerm); // 输出: "hello%20world%20%E4%BD%A0%E5%A5%BD"

编码后的 encodedSearchTerm 可以安全地作为 URL 参数的一部分：

const url = `/search?term=${encodedSearchTerm}`;
console.log(url); // 输出: "/search?term=hello%20world%20%E4%BD%A0%E5%A5%BD"

在 React 中的应用

结合之前的搜索框示例，encodeURIComponent 用于将用户输入的搜索词编码后再放入 URL 中：

import React, { useState } from 'react';
import { useRouter } from 'next/router';
import { Input, Button } from 'antd';

const SearchBar: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState<string>('');
  const router = useRouter();

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value);
  };

  const handleSearch = () => {
    if (searchTerm.trim() !== '') {
      router.push(`/zhaoci?term=${encodeURIComponent(searchTerm.trim())}`);
    }
  };

  return (
    <div>
      <Input 
        value={searchTerm}
        onChange={handleInputChange}
        placeholder="输入搜索词"
        style={{ width: 300, marginRight: 10 }}
      />
      <Button 
        type="primary"
        onClick={handleSearch}
        disabled={searchTerm.trim() === ''}
      >
        搜索
      </Button>
    </div>
  );
};

export default SearchBar;

在这个示例中，encodeURIComponent 确保用户输入的任何特殊字符都被正确编码，从而可以安全地作为查询参数传递到 /zhaoci 路由。