Проверка на пустую строку, null и undefined в JavaScript: полный гайд

Онлайн-тренажер Python для начинающих

Изучайте Python легко и без перегрузки теорией. Решайте практические задачи с автоматической проверкой, получайте подсказки на русском языке и пишите код прямо в браузере — без необходимости что-либо устанавливать.

Начать курс

Введение: почему эта задача проще, чем кажется

Каждый разработчик, который хоть раз писал на JavaScript, сталкивался с ситуацией, когда нужно проверить, пустая ли перед ним строка, или, может быть, это вообще null или undefined. Казалось бы, что может быть проще? Но давайте честно: сколько раз вы писали if (str == "") и получали баг, когда переменная оказывалась null? А сколько раз вы пытались вызвать .trim() на undefined и ловили красную ошибку в консоли?

Эта тема — один из самых популярных вопросов на Stack Overflow с десятками тысяч просмотров. И не зря. В JavaScript есть много нюансов, которые превращают простую проверку в минное поле. В этой статье мы разберем все возможные способы, от самых очевидных до профессиональных, и выясним, какой из них лучше использовать в вашем проекте.

Мы поговорим о том, что такое falsy значения, как работает оператор == и ===, и почему "" и 0 — это не то же самое, что false. К концу статьи вы будете точно знать, как написать универсальную проверку, которая не подведет.

Проблема: что считать "пустой" строкой?

Прежде чем писать код, нужно четко определить, что мы проверяем. В контексте вопроса "How do I check for an empty/undefined/null string in JavaScript?" мы обычно имеем в виду три состояния:

Пустая строка ("" или '') — строка нулевой длины.
null — намеренное отсутствие значения.
undefined — переменная объявлена, но не инициализирована.

Но есть и четвертый, неявный случай: строка, состоящая только из пробелов (" "). Часто её тоже считают "пустой" с точки зрения бизнес-логики. Мы разберем все варианты.

Метод 1: Логическое преобразование (самый простой)

Самый популярный и лаконичный способ — использовать тот факт, что JavaScript автоматически преобразует значения в true или false в логическом контексте.

let str = "";

if (!str) {
    console.log("Строка пустая, null или undefined");
} else {
    console.log("Строка не пустая");
}

Этот код сработает для "", null, undefined, 0, NaN и false. Почему? Потому что все эти значения в JavaScript считаются falsy. Если вы уверены, что переменная — это строка (или может быть null/undefined), то этого метода достаточно.

Но есть подвох: если переменная равна 0 (число), то проверка тоже скажет "пусто". Если это критично, такой способ не подходит.

Метод 2: Строгое сравнение (явный контроль)

Если вы хотите быть максимально точным и проверять только три указанных состояния, используйте строгое сравнение (===).

function isEmptyOrNull(str) {
    return str === "" || str === null || str === undefined;
}

console.log(isEmptyOrNull(""));      // true
console.log(isEmptyOrNull(null));    // true
console.log(isEmptyOrNull(undefined)); // true
console.log(isEmptyOrNull("hello")); // false
console.log(isEmptyOrNull(0));       // false (число не пройдет)

Этот код работает без сюрпризов. Он не путает 0 или false с пустой строкой. Но он не обрабатывает строки из пробелов.

Метод 3: Trim + проверка (для "реальной" пустоты)

Часто пользователи вводят в форму пробелы, и строка " " визуально выглядит пустой. Чтобы отловить и такие случаи, нужно обрезать пробелы с помощью метода .trim().

function isBlank(str) {
    return !str || str.trim() === "";
}

console.log(isBlank(""));        // true
console.log(isBlank("   "));     // true
console.log(isBlank(null));      // true
console.log(isBlank(undefined)); // true
console.log(isBlank(" text "));  // false

Обратите внимание: мы сначала проверяем !str. Это защищает от ошибки, если str — null или undefined. Дело в том, что вызов null.trim() выбросит исключение TypeError. Оператор ! преобразует null в true, и вторая часть условия (str.trim()) уже не выполнится. Это называется ленивое вычисление.

Метод 4: Универсальная функция для реальных проектов

Теперь соберем всё вместе и напишем функцию, которая будет работать в 99% случаев. Она проверяет:

null и undefined
Пустую строку
Строку из пробелов
Заодно отсечет числа (если нужно)

function isEmptyString(value) {
    // Если значение не строка — сразу возвращаем false
    if (typeof value !== "string") {
        return false;
    }
    // Проверяем, пустая ли строка после обрезки пробелов
    return value.trim() === "";
}

// Примеры использования:
console.log(isEmptyString(""));        // true
console.log(isEmptyString("   "));     // true
console.log(isEmptyString(null));      // false (не строка)
console.log(isEmptyString(undefined)); // false (не строка)
console.log(isEmptyString("Привет"));  // false
console.log(isEmptyString(0));         // false

Эта функция — золотая середина. Она не ломается, если вы случайно передали в неё число или объект, и корректно обрабатывает пробелы.

Метод 5: Современный синтаксис (ES2020+)

Если вы пишете на современном JavaScript (или TypeScript), можете использовать опциональную цепочку (?.) и nullish coalescing (??). Это делает код элегантнее.

// Проверка с защитой от null/undefined
let userInput = null;

// Опциональная цепочка: если userInput null или undefined, .trim() не вызовется
let isEmpty = !(userInput?.trim());

console.log(isEmpty); // true

// Если нужно получить значение по умолчанию:
let safeString = userInput?.trim() ?? "";
console.log(safeString); // ""

Оператор ?. возвращает undefined, если userInput — null или undefined. Затем ?? заменяет undefined на пустую строку. Это очень читаемо и безопасно.