JS 判断字符串是否为空
1.数据类型
从 ES6 开始,JS 共有 7 种数据类型,分为基本类型和引用类型两大类。
基本类型:String、Number、Boolean、Symbol、Undefined、Null
引用类型:Object(object、array、function)
typeof 运算符返回变量或表达式的类型,通过 typeof 运算符可以粗略确定 JavaScript 变量的类型。
typeof '' // "string"
typeof 'Bill Gates' // "string"
typeof 0 // "number"
typeof 3.14 // "number"
typeof false // "boolean"
typeof true // "boolean"
typeof Symbol() // "symbol"
typeof undefined // "undefined"
typeof null // "object"
typeof {name:'Bill', age:62} // "object"
typeof [0, 1, 2] // "object"
typeof function(){} // "function"
typeof (()=>{}) // "function"
需要注意的是,对 null、数组执行 typeof 结果是 “object”。
JS 是解释型弱类型编程语言,定义变量时无需指明类型,变量类型在程序执行时由实际值的类型决定,且可以直接赋予不同类型值来改变变量类型。
var foo = 'foo'
foo = 123
console.log(foo) // 123
2.正确优雅地判断字符串是否为空
弱类型给编程带了方便,但有这种灵活的成本并不廉价,因为一不小心就会出错。比如我们判断一个变量是空字符串可能会写成下面这个样子。
function isEmptyStr(s) {
if (s == '') {
return true
return false
}
如果之前经常写强类型语言,第一次写 JS 的话,很容易写出上面这种代码。但是因为 JS 是弱类型语言,只有执行表达式时才能确定 s 的类型,所以 s 可能并不是字符串类型,如果 s 是 undefined 或者 null,也认为是空的话,那么
s == ''
并不成立,得出错误的判断。把 undefined 和 null 当做空字符串,代码修改如下
function isEmptyStr(s) {
if (s == undefined || s == null || s == '') {
return true
return false
isEmpty(undefined) // true
isEmpty(null) // true
isEmpty('') // true
这样就对了吗?当你看到下面的结果,你可能跟我一样,想打人。
isEmptyStr(0) // true
isEmptyStr(false) // true
我只想安静地判断一个变量是不是空串,为啥 JS 给我整出这么多幺蛾子。这是因为 JS 把 0 和 false 的值与空串认为是等同的,所以出现了上面这种诡异的情况。我们需要使用 === 运算符加上类型的判断。JS 中
==
只判断值,
===
运算符需要在类型和值两方面同时相等才判为 true。
function isEmptyStr(s) {
if (s == undefined || s == null || s === '') {
return true
return false
}
有没有更简洁的写法呢?实际上 null 与 undefined 虽然不是东东,但是 JS 中规定,二者的值是相等的,只是类型不同。
null == undefiend // true
null === undefined // false
所以上面判断字符串是否为空串可以简写为:
function isEmptyStr(s) {
if (s == null || s === '') {
return true
return false
function isEmptyStr(s) {
if (s == undefined || s === '') {
return true
return false
isEmptyStr(undefined) // true
isEmptyStr(null) // true
isEmptyStr('') // true
3.不是空串一定是“不空串”吗?
判断字符串是否为空可能会有人从相反的角度出发,即判断字符串不为空。
function isEmptyStrV2(s) {
if (typeof s == 'string' && s.length > 0) {
return false
return true
isEmptyStrV2(undefined) // true
isEmptyStrV2(null) // true
isEmptyStrV2('') // true
细心的同学会发现,上面这个函数实际上并非和函数
isEmptyStr()
完全等同,因为当输入 undefined,null 和字符串类型外的变量时,两个函数的结果是不一样的。
// 对象
isEmptyStr({}) // false
isEmptyStrV2({}) // true
// 布尔
isEmptyStr(false) // false
isEmptyStrV2(false) // true
// 数值
isEmptyStr(1) // false
isEmptyStrV2(1) // true
出现这种情况的原因是入参可能并不是字符串,所以上面函数
isEmptyStrV2()
的结果是错误的,
isEmptyStr()
的结果是对的,但是使用
isEmptyStr()
时也要注意
不是空串不代表是不空串(有长度的字符串)
。听起来有点难理解,这就是弱类型语言灵活带来的不便,给 coder 犯错提供了非常多的机会。
因为
不是空串不代表是不空串
,所以判断是否是空串不能从相反的角度出发,上面的函数
isEmptyStrV2()
是不可用的,还是需要直接判断是空串才行,因为空串和有长度的字符串之间还存在着小三(其他类型),三者关系如下:
同样地,当我们需要判断一个变量是有长度的字符串时,不能直接使用函数
isEmptyStr()
,也要直接判断才行。
function isNotEmptyStr(s) {