详解js中判为空的情形（‘ ‘、“ “、0、NaN、false、null、undefined）

旧城等待， 2024-05-05 22:20 56阅读 0赞

#### 前言 ####

在前端的项目开发过程中，用 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、单引号与双引号** ####

![cbb77d8e1491430cafd4c06e185228f9.png][]

**分析**：单引号和双引号的类型与值完全相等且均判定为 false。

#### **2、单引号与双引号（中间带空格）** ####

![269b7fcc77314d16953132f10e5cb9de.png][]

**分析：**单引号与双引号只要中间有空格，不论有几个，均判定为 true，因为空字符也算字符，不为空，从业务角度看，有时表单输入框（el-input）需要校验输入的值不能为空，那么中间带空格的会跳过校验，如果不想跳过需要使用 trim（ if(value.trim()) 判定为 false）；如果单引号和双引号中间的空格都相同，那么二者的类型和值完全相同，否则均不相同。

#### **3、false、'false' 与 0、'0'** ####

![723b6df4c20d44afb2e2bb61ee7a0e92.png][]

![2cffa8b8cb324ca58977a00e3ca5b804.png][]

**分析：**以上结果可以得出带引号的 0 和 带引号的 false 一定是判为 true 的（因为此时是字符且非空），不带引号的一定判为 false；另外 false 与 'false' 在类型和值上都不相等，而 0 与 '0' 只是类型不等，值却是相等的（见结果 a==b 为 true）。

#### **4、null 与 undefined** ####

![839ce430e4ee45edb492f3d811f2ce4e.png][]

**分析：**null 与 undefined 两种类型的判断是比较频繁的，均是判定为 false，二者值相等但类型不同。

#### **5、NaN** ####

![22331e4277fe450c8cde4beae607a23b.png][] **分析：**NaN 一般在数字、字符串等类型转换中产生，js 将其判定为 false。

#### **6、' '、0、NaN、false、null、undefined 之间的比较** ####

![5d6f8b92fe6842ff835c5cbdba60c6b7.png][]

**分析：**上面的图已经很清晰了，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 的比较是没有关系的，这个一定一定要注意**。

[cbb77d8e1491430cafd4c06e185228f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/a16088851256401cb018f1a7400a0b8b.png
[269b7fcc77314d16953132f10e5cb9de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/eb01303936534efba79a408b45494ae4.png
[723b6df4c20d44afb2e2bb61ee7a0e92.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/83105e9375ed4fdd9fdf15da3bcc2f47.png
[2cffa8b8cb324ca58977a00e3ca5b804.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/dd6432f00e5a47b5976f0543a2df39d4.png
[839ce430e4ee45edb492f3d811f2ce4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/e669aa2998d64cd2823a83473ca510c6.png
[22331e4277fe450c8cde4beae607a23b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/6f942ab591254e05b08ddcca2bf09685.png
[5d6f8b92fe6842ff835c5cbdba60c6b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/5163cf838d764dbc813d332a7e7c1472.png