JavaScript中undefined值校验及调用slice方法报错解决方案咨询

你写的代码没有生效，核心是3个问题：

• 判断目标和实际调用目标不一致：你判断的是x.val()是否为undefined，但实际调用slice的是$("#x").val()，如果变量x不是指向$("#x")这个jQuery对象，判断逻辑完全失效
• 校验逻辑覆盖不全：只判断了undefined的场景，jQuery的val()方法在DOM节点不存在时会返回null，而typeof null返回值是object，会通过你的判断逻辑，后续调用slice直接报错
• 未校验slice方法存在性：如果输入框的值是数字类型（部分jQuery插件会改写val返回值类型），数字没有slice方法，同样会触发报错

现代浏览器极简写法（ES2020+ 支持） #

直接用可选链+空值合并运算符，一行搞定：

w = $("#x").val()?.slice?.(3, 5) ?? 0;

逻辑说明：

• ?. 可选链运算符：前面的值为undefined/null时直接终止后续调用，返回undefined
• slice?. 额外校验slice方法是否存在，避免非字符串/数组类型调用报错
• ?? 空值合并运算符：仅当前面的返回值为undefined/null时才返回兜底值0，不会误覆盖空字符串、0这类合法slice返回结果

兼容老浏览器写法 #

如果需要兼容不支持ES2020语法的旧环境，用全量判断实现，同时只调用一次val()避免取值不一致问题：

const inputVal = $("#x").val();
let w = 0;
if (inputVal != null && typeof inputVal.slice === 'function') {
  w = inputVal.slice(3, 5);
}

这里用inputVal != null 可以同时判断undefined和null两种空值场景，不需要单独写typeof判断。

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