React中两个看似相同的字符串判定为不相等的问题

两个字符串看起来内容一致，但用===、==或Lodash的isEqual判定都返回不等，核心原因是模板字符串会完全保留编写时的空白字符（包括换行、空格、缩进），你的string1和string2里，各行的缩进空格数量不一样：

• 比如string1中meta:下方的Club行用了8个空格缩进，string2里对应的行只用了6个空格
• 还有data:、another-thing:下方的行缩进空格数也存在差异

这些肉眼难以察觉的空白差异，会让两个字符串的实际内容完全不同，导致判定不等。

解决办法 #

1. 手动统一缩进

直接修改两个字符串，让每一行的缩进空格数、换行完全一致，就能让===判定返回相等。

2. 标准化字符串（自动去除无关空白）

如果不想手动调整，可以写一个标准化函数，去除字符串中无关的空白字符后再比较：

import "./styles.css";

export default function App() {
  const string1 = `{
    meta:
            Club = "chess club"
            Id = "7431"
            Time ="July 6, 2021"
            Report = "3209_321_1"
    data:
            $6523 = {something}
            $val_1 = {717}
    another-thing:
            ($thing)
}`;

  const string2 = `{
  meta:
          Club = "chess club"
          Id = "7431"
          Time ="July 6, 2021"
          Report = "3209_321_1"
  data:
          $6523 = {something}
          $val_1 = {717}
  another-thing:
          ($thing)
}`;

  // 标准化函数：去除每行首尾空白，保留换行结构
  const normalizeStr = (str) => str.split('\n').map(line => line.trim()).join('\n');

  return (
    <div className="App">
        {normalizeStr(string1) === normalizeStr(string2) ? "equal" : "not equal"}
    </div>
  );
}

如果需要忽略所有空白（包括换行），可以把标准化函数改成：

const normalizeStr = (str) => str.replace(/\s+/g, '');

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