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

我一眼就看出问题所在了——localStorage存储的所有值都是字符串类型，而你在条件判断中直接把字符串当成布尔值用了，这就是导致toggle逻辑失效、isKls()看起来异常的核心原因。

核心bug拆解 #

你定义的isKls()函数是这样的：

const isKls = ()=> ls.getItem(kls);

在JavaScript中，任何非空字符串都会被判定为true——哪怕是字符串"false"！比如Boolean("false")的结果是true，只有空字符串""或者null才会被判定为false。

这就导致：

• 不管你localStorage里存的是"true"还是"false"，isKls()在三元运算符isKls() ? ... : ...里都会被当成true，所以toggleKls()永远只会执行ls.setItem(kls, "false")，自然无法切换状态。
• 你控制台看到isKls()返回"false"，但这个字符串在逻辑判断里是真值，所以后续的isKls() ? "ON" : "OFF"永远会显示ON。

而你测试的简单三元表达式之所以正常，是因为你直接传入的是布尔值true/false，和实际代码中传入字符串的情况完全不同！

修复方案 #

只需要修改两个地方，就能解决所有问题：

1. 修正isKls()函数，将字符串转换为布尔值 #

把isKls()改成严格判断字符串是否等于"true"：

const isKls = ()=> ls.getItem(kls) === "true";

这样：

• 当存储值为"true"时，返回布尔值true；
• 当存储值为"false"或者null（初始无值时），返回布尔值false。

2. 保持toggleKls()逻辑不变（现在它能正确工作了） #

现在isKls()返回的是真正的布尔值，三元运算符就能正确分支：

const toggleKls = ()=> isKls() ? ls.setItem(kls, "false") : ls.setItem(kls, "true");

完整修改后的核心代码片段 #

const ls = window.localStorage;
const kls = "keyListenSwitch";
// 修复后的isKls函数
const isKls = ()=> ls.getItem(kls) === "true";
console.warn(`kls: ${isKls()} test: ${ls.getItem("test")} kls by hand: ${window.localStorage.getItem(kls)}`)
const toggleKls = ()=> isKls() ? ls.setItem(kls, "false") : ls.setItem(kls, "true");

// 后续的事件监听代码无需修改

验证效果 #

现在你再测试：

1. 初始状态下，localStorage无keyListenSwitch键，isKls()返回false，按下Ctrl+Alt+L会设置为"true"，控制台显示ON；
2. 再次按下Ctrl+Alt+L，isKls()返回true，会切换为"false"，控制台显示OFF；
3. 按键监听也会根据isKls()的布尔值正确触发。

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