logo
Published on

如何在JavaScript中检查空、未定义或null字符串

Authors
  • Name
    Twitter

在编写JavaScript代码时,很多时候我们需要检查一个变量是否是空字符串、未定义或者null。这种检查在处理用户输入或数据验证时尤其常见。

简单的空值检测方法

我们可以通过以下两种简洁的函数来实现这个需求,这些函数仅在检测到变量为undefined、null或空白字符串时返回true,对于其他值(如数字、布尔值、对象、表达式等)都返回false。

function IsNullOrEmpty(value) {
    return (value == null || value === "");
}

function IsNullOrWhiteSpace(value) {
    return (value == null || !/\S/.test(value));
}

上述函数分别用于检测简单的空值和包含空白字符的复杂空值。IsNullOrEmpty函数简洁明了,而IsNullOrWhiteSpace函数则能够检测包含空白字符的字符串。

其中,不需要单独测试undefined,因为 value == null 已包括了 undefined 的情况。

模仿C#风格的空值检测方法

如果你偏爱C#的风格,可以将这些方法添加到String对象中:

String.IsNullOrEmpty = function (value) { 
    return (value == null || value === ""); 
};

String.IsNullOrWhiteSpace = function (value) { 
    return (value == null || !/\S/.test(value)); 
};

注意,不要将这些方法添加到String的原型中,否则在String实例为null时会抛出错误:

String.prototype.IsNullOrEmpty = function (value) { 
    return (value == null || value === ""); 
};

var myvar = null;
if (1 == 2) { myvar = "OK"; } // 可能被设置
myvar.IsNullOrEmpty(); // 抛出错误

测试示例

以下是一个测试数组,包含了多种不同类型的值。可以通过遍历它来检测你的函数是否能够正确处理各种输入:

// 辅助类
var MyClass = function (b) { 
    this.a = "Hello World!"; 
    this.b = b; 
};
MyClass.prototype.hello = function () { 
    if (this.b == null) { 
        alert(this.a); 
    } else { 
        alert(this.b); 
    } 
};

var z;

var arr = [
    ['undefined', undefined],
    ['(var) z', z],
    ['null', null],
    ['empty', ''],
    ['space', ' '],
    ['tab', '\t'],
    ['newline', '\n'],
    ['carriage return', '\r'],
    ['"\\r\\n"', '\r\n'],
    ['"\\n\\r"', '\n\r'],
    ['" \\t \\n "', ' \t \n '],
    ['" txt \\t test \\n"', ' txt \t test \n'],
    ['"txt"', "txt"],
    ['"undefined"', 'undefined'],
    ['"null"', 'null'],
    ['"0"', '0'],
    ['"1"', '1'],
    ['"1.5"', '1.5'],
    ['"1,5"', '1,5'], // 某些地区可用,但JavaScript中无效
    ['comma', ','],
    ['dot', '.'],
    ['".5"', '.5'],
    ['0', 0],
    ['0.0', 0.0],
    ['1', 1],
    ['1.5', 1.5],
    ['NaN', NaN],
    ['/\S/', /\S/],
    ['true', true],
    ['false', false],
    ['function, returns true', function () { 
        return true; 
    }],
    ['function, returns false', function () { 
        return false; 
    }],
    ['function, returns null', function () { 
        return null; 
    }],
    ['function, returns string', function () { 
        return "test"; 
    }],
    ['function, returns undefined', function () { }],
    ['MyClass', MyClass],
    ['new MyClass', new MyClass()],
    ['empty object', {}],
    ['non-empty object', { a: "a", match: "bogus", test: "bogus"}],
    ['object with toString: string', { a: "a", match: "bogus", test: "bogus", toString: function () { 
        return "test"; 
    }}],
    ['object with toString: null', { a: "a", match: "bogus", test: "bogus", toString: function () { 
        return null; 
    }}]
];

通过这些测试数据,可以确保你的空值检测函数在各种场景下都能工作正常,避免潜在的空值类错误。