React状态中负浮点数字符串转数字有时返回NaN的原因

这种情况几乎都是因为你的state字符串里藏着不可见的特殊字符——表面看起来是"-11.5"，但实际包含了零宽空格、全角字符、非标准减号这类肉眼无法识别的内容，导致Number()和parseFloat()无法将其解析为有效数字。

为什么字面量和const变量没问题？ #

你手动编写的字符串字面量"-11.5"和const变量c，都是纯标准ASCII字符：减号对应ASCII编码45，小数点是46，数字是48-57，这些都是数字解析函数能正常识别的字符。但React状态的初始值可能是从别处复制粘贴而来，或是从API、输入框获取时附带了隐藏字符，外观和字面量一致，但底层编码完全不同。

验证方法 #

你可以打印字符串中每个字符的Unicode编码，和字面量的编码做对比：

// 打印state每个字符的编码
console.log(state.split('').map(c => c.charCodeAt(0)));
// 打印字面量的编码做对比
console.log("-11.5".split('').map(c => c.charCodeAt(0)));

正常情况下，字面量的编码结果应该是[45, 49, 50, 46, 53]，如果state的编码里多出其他数字（比如8203是零宽空格的编码），就说明确实存在隐藏字符。

解决办法 #

你可以用正则表达式剔除所有非数字、非标准减号/小数点的字符：

const cleanState = state.replace(/[^\d.-]/g, '');
console.log(Number(cleanState)); // 此时应该能正常解析出-11.5

或者直接手动重新输入一遍useState的初始值，避免复制粘贴带来的隐藏字符问题。

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