1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
---
title: Оператор нулевого слияния
slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
---
<p>{{JSSidebar("Operators")}}</p>
<p><strong>Оператор нулевого слияния (<code>??</code>)</strong> это логический оператор, который возвращает значение правого операнда когда значение левого операнда равно {{jsxref("null")}} или {{jsxref("undefined")}}, в противном случае будет возвращено значение левого операнда.</p>
<p>В отличие от <a href="/ru/docs/Web/JavaScript/Reference/Operators/%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B#%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D0%98%D0%9B%D0%98">логического ИЛИ (<code>||</code>)</a>, левая часть оператора вычисляется и возвращается даже если его результат после приведения к логическому типу оказывается<em> <a href="/ru/docs/Web/JavaScript/Reference/Operators/%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B#%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5">ложным</a></em>, но не является <code>null</code> или <code>undefined</code>. Другими словами, если вы используете <code>||</code> чтобы установить значение по умолчанию, вы можете столкнуться с неожиданным поведением если считаете некоторые <em>ложные</em> значения пригодными для использования (например, "" или 0). Ниже приведены примеры.</p>
<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.<br>
See <a href="https://github.com/mdn/interactive-examples/pull/1482#issuecomment-553841750">PR #1482</a> regarding the addition of this example.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox"><var>leftExpr</var> ?? <var>rightExpr</var>
</pre>
<h2 id="Примеры">Примеры</h2>
<h3 id="Использование_оператора_нулевого_слияния">Использование оператора нулевого слияния</h3>
<p>В этом примере показано как устанавливать значения по умолчанию, оставив в покое значения отличные от <code>null</code> или <code>undefined</code>.</p>
<pre class="brush: js">const nullValue = null;
const emptyText = ""; // falsy
const someNumber = 42;
const valA = nullValue ?? "default for A";
const valB = emptyText ?? "default for B";
const valC = someNumber ?? 0;
console.log(valA); // "default for A"
console.log(valB); // "" (так как пустая строка не null или undefined)
console.log(valC); // 42</pre>
<h3 id="Значение_по_умолчанию_в_присваивании_переменной">Значение по умолчанию в присваивании переменной</h3>
<p>Ранее, для присваивания значения по умолчанию переменной использовался оператор логического ИЛИ (<code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR_2">||</a></code>):</p>
<pre class="brush: js">let foo;
// переменной foo никогда не присваивалось значение, поэтому она undefined
let someDummyText = foo || 'Hello!';</pre>
<p>Однако, оператор <code>||</code> это логический оператор, левый операнд которого при сравнении неявно приводится к булевому значению, поэтому любое <em>ложное</em> значение (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) не возвращается. Данное поведение может быть нежелательным если вы рассматриваете <code>0</code>, <code>''</code>, или <code>NaN</code> как корректные значения.</p>
<pre class="brush: js">let count = 0;
let text = "";
let qty = count || 42;
let message = text || "hi!";
console.log(qty); // 42 and not 0
console.log(message); // "hi!" and not ""
</pre>
<p>Оператор нулевого слияния предотвращает попадание в такую ловушку, возвращая второй операнд если первый оказывается <code>null</code> or <code>undefined</code> (но не любым другим <em>ложным</em> значением):</p>
<pre class="brush: js">let myText = ''; // Пустая строка (тоже является ложным значением при приведении к логическому типу)
let notFalsyText = myText || 'Hello world';
console.log(notFalsyText); // Hello world
let preservingFalsy = myText ?? 'Hi neighborhood';
console.log(preservingFalsy); // '' (так как myText не undefined и не null)
</pre>
<h3 id="Синтаксическое_сокращение">Синтаксическое сокращение</h3>
<p>Так же как при использовании логического И и ИЛИ, правое выражение не вычисляется если найдено подходящее значение в левом.</p>
<pre class="brush: js">function A() { console.log('A was called'); return undefined;}
function B() { console.log('B was called'); return false;}
function C() { console.log('C was called'); return "foo";}
console.log( A() ?? C() );
// выводит "A was called", затем "C was called", и затем "foo"
// так как A() возвращает undefined, поэтому оба выражения вычисляются
console.log( B() ?? C() );
// выводит "B was called", затем "false"
// так как B() возвращает false (но не null или undefined), правое
// выражение не вычисляется
</pre>
<h3 id="Не_объединяется_с_И_или_ИЛИ_операторами">Не объединяется с И или ИЛИ операторами</h3>
<p>Нельзя напрямую объединять И (<code>&&</code>) и ИЛИ (<code>||</code>) операторы с <code>??</code>. При таком выражении будет выброшен <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>.</p>
<pre class="brush: js example-bad">null || undefined ?? "foo"; // выбрасывает SyntaxError
true || undefined ?? "foo"; // выбрасывает SyntaxError</pre>
<p>Однако, при заключении в скобки выражение является корректным:</p>
<pre class="brush: js example-good">(null || undefined) ?? "foo"; // returns "foo"
</pre>
<h3 id="Отношение_к_оператору_опциональной_последовательности_.">Отношение к оператору опциональной последовательности (<code>?.</code>)</h3>
<p>Оператор нулевого слияния определяет <code>undefined</code> и <code>null</code> как специальные значения так же как и <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Optional_chaining">оператор опциональной последовательности (<code>?.</code>)</a>, который используется для доступа к свойствам объекта, значение которого может быть <code>null</code> или <code>undefined</code>.</p>
<pre class="brush: js">let foo = { someFooProp: "hi" };
console.log(foo.someFooProp?.toUpperCase()); // "HI"
console.log(foo.someBarProp?.toUpperCase()); // undefined
</pre>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li><a href="/ru/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Оператор опциональной последовательности</a></li>
<li><a href="/ru/docs/Web/JavaScript/Reference/Operators/%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B5_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D1%8B#%D0%9B%D0%BE%D0%B3%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B5_%D0%98%D0%9B%D0%98">Логическое ИЛИ (<code>||</code>)</a></li>
<li><a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">Параметры по умолчанию</a></li>
</ul>
|
