Как правильно проверить строку на пустое значение, null или undefined в JavaScript?

Правильный подход к проверке строки на пустоту, null и undefined

Ваша проблема очень распространена среди начинающих разработчиков. Дело в том, что в JavaScript есть несколько "ложных" (falsy) значений, и простое использование if (!str) может привести к неожиданным результатам. Давайте разберём правильные способы проверки.

1. Базовая проверка на null и undefined

Самый простой и безопасный способ — использовать строгое сравнение (===) или typeof:

function isEmptyString(str) {
  // Проверка на null и undefined
  if (str === null || str === undefined) {
    return true;
  }
  // Проверка на пустую строку
  if (str === '') {
    return true;
  }
  return false;
}

console.log(isEmptyString(''));        // true
console.log(isEmptyString(null));      // true
console.log(isEmptyString(undefined)); // true
console.log(isEmptyString('Hello'));   // false
console.log(isEmptyString(0));         // false (число не строка)

2. Универсальная проверка с учётом пробелов

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

function isBlankString(str) {
  // Проверка на null/undefined с помощью оператора ?.
  if (str?.trim() === '' || str === null || str === undefined) {
    return true;
  }
  return false;
}

// Или более компактно:
const isBlank = (str) => str == null || str.trim() === '';

console.log(isBlankString('   '));    // true
console.log(isBlankString(''));       // true
console.log(isBlankString(null));     // true
console.log(isBlankString('abc'));    // false

3. Использование оператора нулевого слияния (??)

Современный подход — использовать ?? для обработки null/undefined и проверку длины строки:

function checkString(str) {
  // ?? возвращает правую часть только если слева null или undefined
  const safeStr = str ?? '';
  return safeStr.length === 0;
}

console.log(checkString(null));       // true
console.log(checkString(undefined));  // true
console.log(checkString(''));         // true
console.log(checkString('текст'));    // false

4. Полная функция для всех случаев

Вот универсальная функция, которая покрывает все сценарии:

function isStringEmpty(str) {
  // 1. Проверка типа: должна быть строка
  if (typeof str !== 'string') {
    return false; // или true, если нужно считать не-строки пустыми
  }
  // 2. Проверка на null/undefined (хотя typeof уже исключает)
  // 3. Проверка на пустоту с учётом пробелов
  return str.trim().length === 0;
}

// Примеры:
console.log(isStringEmpty(''));        // true
console.log(isStringEmpty('   '));     // true
console.log(isStringEmpty(null));      // false (не строка)
console.log(isStringEmpty('abc'));     // false

Важные моменты:

• Всегда используйте строгое сравнение (===) вместо нестрогого (==), чтобы избежать приведения типов.
• Проверяйте тип данных — если вы ожидаете строку, убедитесь, что это действительно строка через typeof.
• Решите, нужно ли учитывать пробелы — для большинства бизнес-логик строка из пробелов считается пустой.
• Используйте современные возможности — оператор опциональной цепочки (?.) и нулевого слияния (??) делают код чище.

Выберите подход, который соответствует вашей задаче. Для большинства случаев я рекомендую комбинацию str == null || str.trim() === '' — это кратко, понятно и надёжно.

// С Lodash
_.isEmpty('');        // true
_.isEmpty(null);      // true
_.isEmpty(undefined); // true
_.isEmpty('   ');     // false (пробелы не считаются пустыми)
_.isEmpty('abc');     // false

const Utils = {
  isBlank: function(value) {
    return value == null || (typeof value === 'string' && value.trim() === '');
  },
  
  isPresent: function(value) {
    return !this.isBlank(value);
  }
};

console.log(Utils.isBlank(''));        // true
console.log(Utils.isBlank(null));      // true
console.log(Utils.isBlank('  '));      // true
console.log(Utils.isBlank('Hi'));      // false
console.log(Utils.isPresent('Hi'));    // true

function greet(name) {
  const safeName = name ?? 'гость';
  if (safeName.trim() === '') {
    return 'Привет, аноним!';
  }
  return `Привет, ${safeName}!`;
}

console.log(greet(null));    // "Привет, гость!"
console.log(greet(''));      // "Привет, аноним!"
console.log(greet('Иван'));  // "Привет, Иван!"