JavaScript中比较与赋值运算符困惑：书签应用代码问题

这确实是个容易让人摸不着头脑的场景，我来帮你拆解清楚背后的逻辑：

首先得明确两个运算符的本质区别：

• =是赋值运算符：它的作用是把右侧的值赋给左侧变量，而且整个赋值表达式的结果就是这个被赋的值。比如你写if (classname = 'active')，实际上是先把'active'硬塞给classname，然后判断这个赋值的结果（也就是'active'）是否为“真”（truthy）。因为非空字符串属于truthy值，所以条件会成立，函数里的代码也就执行了——但这不是判断，是意外的赋值+逻辑巧合，本质是错误写法，后续大概率会出现莫名其妙的bug。
• ===是严格相等运算符：它会严格比较左右两边的值和类型是否完全一致，只有完全匹配时才返回true。它不工作的原因，几乎肯定是你的classname实际值和你用来比较的值并不完全匹配，常见的坑有这些：
  1. 大小写不匹配：比如你比较的是'Active'，但元素实际类名是小写的'active'；
  2. 多余空格干扰：比如classname实际是'active '（末尾带空格），和'active'严格相等自然不成立；
  3. 多类名共存：如果元素同时有多个类（比如'bookmark active'），直接用===比较整个className字符串肯定匹配不上；
  4. 类型不匹配：比如classname是数字类型，而你比较的是字符串类型。

怎么解决？ #

1. 先排查实际值：在if语句前加一行console.log('当前className:', typeof classname, classname)，看看classname的类型和具体内容，确认它和你预期的比较值是否一致；
2. 立刻抛弃=的错误写法：哪怕它暂时“能用”，也是逻辑错误，后续修改代码时很容易踩坑；
3. 用更可靠的类名操作方式：如果是操作DOM元素的类名，强烈推荐使用classList API，它能帮你避开字符串比较的各种麻烦：

   // 示例：切换书签的激活状态
   function toggleBookmark(el) {
     const activeClass = 'active';
     const inactiveClass = 'inactive';
     if (el.classList.contains(activeClass)) {
       el.classList.remove(activeClass);
       el.classList.add(inactiveClass);
     } else {
       el.classList.remove(inactiveClass);
       el.classList.add(activeClass);
     }
     // 甚至可以更简洁：
     // el.classList.toggle(activeClass);
     // el.classList.toggle(inactiveClass);
   }
   

这样既保证了逻辑的正确性，也彻底避开了字符串比较带来的各种潜在问题。

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