前言
在前端的项目开发过程中,用 if 判断是否为空的情形经常使用,但为空的情形比较多样,不稍加注意容易判断错误而导致处理业务失败,本文将详细分析单个空格、多个空格、 '0'、0、NaN、false、null、undefined 等是否为空的情形。首先把结论写在下方:
判为 false 的输入:' '(单引号)、" "(双引号)、false、null、0、NaN、undefined
判为 true 的输入:' '(单引号内带空格)、" "(双引号内带空格)、'0'、'false'
归纳:单引号和双引号内只要带有字符,不管是什么类型的字符(包括空字符),则判为 true,如内部不带任何字符则判为 false,而 false、null、0、NaN、undefined 这些特殊字符一律判为false。
1、单引号与双引号
分析:单引号和双引号的类型与值完全相等且均判定为 false。
2、单引号与双引号(中间带空格)
分析:单引号与双引号只要中间有空格,不论有几个,均判定为 true,因为空字符也算字符,不为空,从业务角度看,有时表单输入框(el-input)需要校验输入的值不能为空,那么中间带空格的会跳过校验,如果不想跳过需要使用 trim( if(value.trim()) 判定为 false);如果单引号和双引号中间的空格都相同,那么二者的类型和值完全相同,否则均不相同。
3、false、'false' 与 0、'0'
分析:以上结果可以得出带引号的 0 和 带引号的 false 一定是判为 true 的(因为此时是字符且非空),不带引号的一定判为 false;另外 false 与 'false' 在类型和值上都不相等,而 0 与 '0' 只是类型不等,值却是相等的(见结果 a==b 为 true)。
4、null 与 undefined
分析:null 与 undefined 两种类型的判断是比较频繁的,均是判定为 false,二者值相等但类型不同。
5、NaN
分析:NaN 一般在数字、字符串等类型转换中产生,js 将其判定为 false。
6、' '、0、NaN、false、null、undefined 之间的比较
分析:上面的图已经很清晰了,null 与 undefined、0 与 ' '、0 与 false、' ' 与 false 在值上是相等的,但是因为类型不同,所以不会严格相等(===),另外' '、0、NaN、false、null、undefined 六者之间两两比较的结果并没有全部附在图中,但笔者自己测试过了,其他未做比较的均为 false,普通相等(==)与严格相等(===)均为 false,大家也可以自行去验证 。综合上述所有结果图可知:if(a) 为 false 并不表示 a==false 或 a===false(例如 a 取 null 或 undefined 或NaN),if 里面的判定与该变量与 false 的比较是没有关系的,这个一定一定要注意。