React中相同字符串用===比较始终返回false的问题排查

开发了一个React组件，使用父组件传递的状态。需求是：当用户已登录且username与sellersUsername两个字符串匹配时，组件渲染OWNER，否则渲染NOT OWNER。

已通过控制台打印带=包裹的字符串，确认字符串前后无空格，但条件语句逻辑看似正确的情况下，本该显示OWNER却显示了NOT OWNER。

组件代码 #

import React from "react";

const EditButton= ({
  isUserLoggedIn,
  username,
  sellersUsername,
}) => {
  return (
    <>
      {isUserLoggedIn&& username === sellersUsername? (
        <>OWNER</>
      ) : (
        <>NOT OWNER</>
      )}

      {console.log(`=${isUserLoggedIn}=`)}
      {console.log(`=${username}=`)}
      {console.log(`=${sellersUsername}=`)}
      {console.log(username=== sellersUsername)}
      {console.log(
        username.localeCompare(sellersUsername, "en", {
          sensitivity: "base",
        })
      )}
      {console.log(isUserLoggedIn&&username===sellersUsername)}
    </>
  );
};

export default GalleryEditButton;

控制台输出（翻译后） #

// 预期应为true但实际不是
=true=
=RandomTestUsername=
=RandomTestUsername=
false
0
false

从控制台输出可以看到：localeCompare返回0（表示两个字符串在基础敏感度下匹配），但===严格相等判断返回false，说明问题出在字符串本身存在不可见差异或数据类型不一致。

• 排查不可见字符：有些字符（比如零宽空格、换行符、制表符）肉眼无法识别，但会导致字符串不相等。可以用JSON.stringify打印字符串的完整内容，查看是否包含隐藏字符：

  console.log(JSON.stringify(username), JSON.stringify(sellersUsername))
  

  如果发现隐藏字符，可通过正则去除：

  const cleanUsername = username.replace(/[\x00-\x1F\x7F-\x9F]/g, '');
  const cleanSellersUsername = sellersUsername.replace(/[\x00-\x1F\x7F-\x9F]/g, '');
  

• 检查数据类型：严格相等===会同时比较值和类型，若其中一个参数不是字符串类型（比如数字、对象），会直接返回false。可打印类型确认：

  console.log(typeof username, typeof sellersUsername)
  

  若类型不一致，可先统一转换为字符串：

  username.toString() === sellersUsername.toString()
  

• 替换判断逻辑：既然localeCompare已经确认字符串匹配，可直接用它的结果作为判断条件，替换原有的===判断：

  {isUserLoggedIn && username.localeCompare(sellersUsername, "en", { sensitivity: "base" }) === 0 ? (
    <>OWNER</>
  ) : (
    <>NOT OWNER</>
  )}
  

内容的提问来源于stack exchange，提问作者Potion