0Pricing
TypeScript Academy · Урок

Объединение с nullish с помощью ??

Задавайте запасные значения только для null и undefined, а не для всех ложных значений

«Объединение с nullish с помощью ??» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Оператор нулевого слияния

Оператор ?? возвращает правую часть только тогда, когда левая часть равна null или undefined. В противном случае он возвращает значение слева. Это точный способ задавать значения по умолчанию.

const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'

Только отсутствующее значение включает запасное значение

Ключевое слово здесь — отсутствующее значение: только null и undefined приводят к использованию правой части. Любое другое значение, включая ложные значения, передаётся без изменений.

console.log(0 ?? 99);       // 0
console.log('' ?? 'x');     // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'

Проблема с ||

Логический OR || использует запасное значение при любом ложном значении: 0, '', false, NaN, а также при отсутствующем значении. Это часто приводит к ошибкам, когда 0 или пустая строка являются допустимыми входными данными.

const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0  — correct

Правильное задание значений по умолчанию

Используйте ??, когда ноль, пустая строка или false являются допустимыми значениями, которые нужно сохранить. Оставляйте || для случаев, когда любое ложное значение действительно должно заменяться запасным.

function volume(v: number | undefined): number {
  return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));

?? с параметрами функций

Распространённый приём — задать значение по умолчанию для необязательного параметра, когда передано undefined, сохранив при этом значимые ложные входные данные.

function greet(name?: string): string {
  return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());

Тип результата ??

Тип выражения a ?? b удаляет null | undefined из типа a и объединяется с типом b. Если a имеет тип string | null, а b — тип string, результат имеет тип string.

const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());

Цепочка значений по умолчанию

Вы можете объединить несколько операторов ??, чтобы последовательно попробовать разные источники и перейти к следующему, если значение отсутствует. Побеждает первое значение, которое не является отсутствующим.

const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);

?? и приоритет операторов

Нельзя смешивать ?? с || или && без скобок — TypeScript требует их, чтобы избежать неоднозначности. Всегда явно группируйте выражения.

const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);

Как отличить ноль от отсутствующего значения

Частая практическая ситуация: температура, оценка или баланс, равные 0, — допустимые данные, а undefined означает «не указано». ?? сохраняет это различие, а || его стирает.

function format(temp: number | undefined): string {
  return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));

?? со свойствами объектов

Чтение необязательного свойства с последующим заданием значения по умолчанию — повседневное применение ??. Оно естественно сочетается с опциональной цепочкой, которую вы объедините с ним на следующем уроке.

type Opts = { retries?: number };
function run(o: Opts): number {
  return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));

Когда что выбирать

Правило выбора: если 0, '' или false — допустимые значения, которые нужно сохранить, используйте ??. Если вы действительно хотите заменить любое ложное значение, используйте ||. Ошибки при задании значений по умолчанию почти всегда возникают из-за привычки выбирать ||.

const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty kept

Быстрая проверка

Проверьте, насколько хорошо Вы поняли оператор нулевого объединения.

Итоги: оператор нулевого объединения

Вы узнали, что ??:

  • Возвращает запасное значение только тогда, когда левая часть равна null или undefined.
  • Сохраняет допустимые ложные значения, такие как 0, '' и false, в отличие от ||.
  • Удаляет null | undefined из типа результата.
  • Требует скобок при сочетании с || или &&.

Далее Вы объедините ?. и ??.

function port(v: number | undefined): number {
  return v ?? 8080;
}
console.log(port(0), port(undefined));

Часто задаваемые вопросы

Урок «Объединение с nullish с помощью ??» бесплатный?

Да — полный текст урока «Объединение с nullish с помощью ??» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Объединение с nullish с помощью ??»?

Задавайте запасные значения только для null и undefined, а не для всех ложных значений Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Объединение с nullish с помощью ??»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Необязательная цепочка с ?.
  2. Объединение с nullish с помощью ??
  3. Объединение ?. и ??
  4. Необязательные вызовы и доступ к элементам
← Назад к TypeScript Academy