应先清理再解析输入框文本：trim()去空格，正则剔除非法字符，替换全角符号；再用Number()转换并配合isNaN()和isFinite()校验；封装toInt/toFloat函数，返回null而非0；事件中实时反馈，服务端仍需校验。
直接用 Number()、parseInt() 或一元加号 + 转换输入框文本存在风险：空字符串、空格、非法字符都可能转成 NaN 或意外值（如 " 42px" 被 parseInt 解析为 42），导致后续计算出错或静默失败。
先清理再解析，避免隐式转换陷阱
用户输入常含空格、单位（如 "100px"）、逗号（如 "1,234"）或全角字符。应先用 trim() 去首尾空格，再用正则或替换处理干扰字符：
-
去空格和常见单位：
input.value.trim().replace(/[^-\d.]/g, '')—— 保留数字、负号、小数点，剔除其余字符 -
处理千分位逗号：
.replace(/,/g, '')可在清理后追加，例如"1,234.56".replace(/,/g, '') → "1234.56" -
注意全角字符：中文输入法下的句号（。）、短横（－）不是合法小数点或负号，需额外替换（如
.replace(/。/g, '.').replace(/－/g, '-')）
用 Number() 配合 isNaN() 显式校验
Number() 是最贴近“转数字本意”的方法：它对纯数字字符串返回对应数值，对无效输入统一返回 NaN，且不截断（区别于 parseInt）。关键是要主动检查结果：
- ✅ 正确做法：
const num = Number(cleanedStr); if (isNaN(num) || !isFinite(num)) { /* 输入无效 */ } - ❌ 避免只写
if (!num)：因为""、"0"、"0.0"都会进入 false 分支，逻辑错误 -
isFinite()排除Infinity和-Infinity，防止极大数溢出影响计算
根据业务场景选择安全封装函数
把清理、解析、校验打包成可复用函数，减少重复判断：
立即学习“Java免费学习笔记（深入）”；
-
整数场景（如数量、ID）：
function toInt(str) {<br> const n = Number(str.trim().replace(/[^-\d]/g, ''));<br> return Number.isInteger(n) ? n : null;<br> } -
浮点数场景（如价格、尺寸）：
function toFloat(str) {<br> const n = Number(str.trim().replace(/[^-\d.]/g, '').replace(/\.+/g, '.'));<br> return isFinite(n) ? n : null;<br> }（额外防多个小数点） - 返回
null比返回0更安全——调用方能明确区分“无输入”和“输入零”
绑定事件时做实时反馈，别等提交才报错
在 input 或 blur 事件中即时验证，提升体验：
- 输入过程中高亮边框为红色，提示“请输入有效数字”
- 失去焦点时，若转换失败，清空输入框或还原上次有效值（需缓存）
- 计算前再次校验：即使前端做了防护，服务端仍需独立验证，前后端校验逻辑应一致
