jQuery1.7升级至3.6后出现$.trim(...).val is not a function错误如何解决

报错根因 #

你写的$.trim("#my_variable1_id").val()存在两处逻辑错误：

• $.trim()的入参是字符串字面量"#my_variable1_id"，不是你要取的表单值，返回结果就是处理后的id字符串，本身没有val()方法，直接触发类型报错
• 你混淆了「先取表单值再trim」的执行顺序，val()是jQuery对象的方法，只能挂在DOM选择器返回的jQuery对象后调用

可行的修复方案 #

jQuery 3.6已经废弃了$.trim()方法，更推荐直接用JS原生的String.prototype.trim()，可以选以下任意一种写法：

• 优先推荐原生trim写法（兼容所有现代浏览器，不需要依赖jQuery的trim实现）

var my_variable1 = ($("#my_variable1_id").val() || '').trim();

这里用|| ''做兜底，如果val()返回null/undefined/空值，默认转成空字符串再调用trim，避免空值调用方法报错。

• 如果需要沿用jQuery的trim方法，写法调整为：

var my_variable1 = $.trim($("#my_variable1_id").val() || '');

注意要先取到val()的值，再作为参数传给$.trim()，不能在trim后面再加val()。

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