JavaScript三元运算符中函数调用作为条件的异常问题

你遇到的核心问题是localStorage存储的值都是字符串类型，而你的isKls()函数直接返回这个字符串，在JavaScript的布尔判断中，任何非空字符串都会被视为true——哪怕是字符串"false"！

为什么会触发这个异常？ #

• 当你调用ls.getItem(kls)时，返回的是"true"或"false"字符串，而不是原生布尔值true/false。
• 在三元表达式isKls() ? ... : ...里，"false"作为非空字符串，会被强制转换为布尔值true，所以你的toggleKls永远只会执行第一个分支（设置为"false"），完全无法切换状态。
• 这也解释了为什么isKls()看起来总是返回true——因为它返回的字符串在条件判断里始终被判定为真。

修复步骤 #

只需要修改isKls()函数，把返回的字符串转换为真正的布尔值即可：

// 修复isKls函数，将字符串转为布尔值
const isKls = () => ls.getItem(kls) === "true";

同时，为了让逻辑更清晰，可以优化toggleKls函数，直接基于当前状态取反：

// 优化toggleKls，逻辑更直观
const toggleKls = () => ls.setItem(kls, isKls() ? "false" : "true");
// 或者更简洁的写法：
const toggleKls = () => ls.setItem(kls, String(!isKls()));

验证修复后的逻辑 #

现在：

• 当localStorage中keyListenSwitch的值是"true"时，isKls()返回布尔值true，toggleKls会设置为"false"。
• 当值是"false"时，isKls()返回布尔值false，toggleKls会设置为"true"。
• 你的按键监听逻辑也会正确识别开关状态，不再始终显示为ON。

额外建议 #

如果是初次加载页面，最好先初始化localStorage的默认值，避免值为null的情况：

// 初始化默认开关状态为开启
if (ls.getItem(kls) === null) {
  ls.setItem(kls, "true");
}

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