JavaScript中检查空字符串、未定义或空值的方法

技术背景

在JavaScript编程中，经常需要检查一个字符串是否为空、未定义或为null。不同的场景可能需要不同的检查方式，例如表单验证、数据处理等。JavaScript本身没有像某些编程语言那样有直接的string.Empty来表示空字符串，因此需要开发者自行实现相应的检查逻辑。

实现步骤

1. 检查真值和假值

可以使用简单的布尔判断来检查一个值是否为真值或假值。在JavaScript中，空字符串、false、0、null、undefined等都是假值，其他值通常为真值。

// 检查真值
if (strValue) {
    // strValue是一个非空字符串、true、42、Infinity、[]等
}

// 检查假值
if (!strValue) {
    // strValue是一个空字符串、false、0、null、undefined等
}

2. 严格检查空字符串

使用===运算符可以严格检查一个值是否为一个空字符串。

if (strValue === "") {
    // strValue是一个空字符串
}

if (strValue !== "") {
    // strValue不是一个空字符串
}

3. 自定义检查函数

可以创建自定义函数来检查字符串是否为空、未定义或只包含空白字符。

// 检查变量是否为假值或长度为零
function isEmpty(str) {
    return (!str || str.length === 0 );
}

// 检查变量是否为假值或只包含空白字符
function isBlank(str) {
    return (!str || /^\s*$/.test(str));
}

4. 使用可选链和箭头函数

在ES2020及以后的版本中，可以使用可选链和箭头函数来简化检查逻辑。

const isEmpty = (str) => (!str?.length);

5. 使用lodash库

lodash是一个流行的JavaScript实用工具库，提供了_.isEmpty方法，可以处理多种情况。

const _ = require('lodash');
_.isEmpty(value); // 处理 {}, '', null, undefined 等情况

核心代码

以下是一些常用的检查方法的代码示例：

// 检查真值和假值
let str1 = "";
if (!str1) {
    console.log("str1 是假值");
}

// 严格检查空字符串
let str2 = "hello";
if (str2 !== "") {
    console.log("str2 不是空字符串");
}

// 自定义检查函数
function isEmpty(str) {
    return (!str || str.length === 0 );
}
let str3 = "   ";
console.log(isEmpty(str3)); 

// 使用可选链和箭头函数
const isEmpty2 = (str) => (!str?.length);
let str4 = null;
console.log(isEmpty2(str4)); 

// 使用 lodash
const _ = require('lodash');
let str5 = "";
console.log(_.isEmpty(str5)); 

最佳实践

• 明确需求：在检查字符串时，要明确自己的需求，是只检查空字符串，还是要考虑未定义、null或只包含空白字符的情况。
• 性能考虑：简单的检查方法如!str、==、===和length通常比较快，而使用正则表达式的方法可能会较慢。
• 避免全局污染：尽量避免使用String.prototype进行猴子补丁，因为这可能会破坏依赖内置类型现有结构的代码。

常见问题

1. 比较==和===的区别

==会进行类型转换后比较，而===是严格比较，不会进行类型转换。例如，0 == ""返回true，而0 === ""返回false。

console.log(0 == ""); // true
console.log(0 === ""); // false

2. 使用length属性的问题

如果变量可能为null或undefined，直接使用length属性会抛出错误。可以使用可选链或先进行检查。

let str = null;
// 直接使用 length 会报错
// console.log(str.length); 

// 使用可选链
console.log(str?.length); 

// 先进行检查
if (str !== null && str !== undefined) {
    console.log(str.length);
}

3. 正则表达式的性能问题

正则表达式在处理大量数据时可能会较慢，特别是在需要频繁检查的场景中。可以考虑使用其他方法，如trim()和length来替代。

// 正则表达式检查
let str = "   ";
console.log(/^\s*$/.test(str)); 

// 使用 trim() 和 length 检查
console.log(str.trim().length === 0);