JavaScript에 "널 병합"연산자가 있습니까?

Javascript에 null 통합 연산자가 있습니까?

예를 들어 C #에서는 다음과 같이 할 수 있습니다.

String someString = null;
var whatIWant = someString ?? "Cookies!";

Javascript에 대해 알아낼 수있는 가장 좋은 근사는 조건부 연산자를 사용하는 것입니다.

var someString = null;
var whatIWant = someString ? someString : 'Cookies!';

어느 정도 icky IMHO입니다. 더 잘할 수 있습니까?

최신 정보

JavaScript는 이제 nullish 통합 연산자 (??)를 지원합니다 . 왼쪽 피연산자가 null또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환합니다.

사용하기 전에 호환성을 확인하십시오.

C # Null 병합 연산자와 동등한 JavaScript?? ) 가 논리 OR ( ||)을 사용하고 있습니다 .

var whatIWant = someString || "Cookies!";

동작이 C #의 동작과 일치하지 않는 경우가 있지만 (아래에 명시되어 있음) JavaScript에서 기본 / 대체 값을 할당하는 일반적이고 간결한 방법입니다.

설명

첫 번째 피연산자의 유형에 관계없이 부울로 캐스팅하면 결과 false는 두 번째 피연산자를 사용합니다. 아래의 모든 경우에주의하십시오.

alert(Boolean(null)); // false
alert(Boolean(undefined)); // false
alert(Boolean(0)); // false
alert(Boolean("")); // false
alert(Boolean("false")); // true -- gotcha! :)

이것은 다음을 의미합니다.

var whatIWant = null || new ShinyObject(); // is a new shiny object
var whatIWant = undefined || "well defined"; // is "well defined"
var whatIWant = 0 || 42; // is 42
var whatIWant = "" || "a million bucks"; // is "a million bucks"
var whatIWant = "false" || "no way"; // is "false"

function coalesce() {
    var len = arguments.length;
    for (var i=0; i<len; i++) {
        if (arguments[i] !== null && arguments[i] !== undefined) {
            return arguments[i];
        }
    }
    return null;
}

var xyz = {};
xyz.val = coalesce(null, undefined, xyz.val, 5);

// xyz.val now contains 5

이 솔루션은 SQL 병합 기능과 같이 작동하며 여러 인수를 허용하며 값이없는 경우 널을 리턴합니다. C #처럼 동작합니다 ?? "", false 및 0은 NOT NULL로 간주되므로 실제 값으로 계산됩니다. 당신이 .net 배경에서 온다면, 이것이 가장 자연스러운 느낌의 해결책이 될 것입니다.

예, 곧옵니다. 참조 여기에 제안 하고 여기에 구현 상태를 .

다음과 같이 보입니다 :

x ?? y

예

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};

const undefinedValue = response.settings?.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings?.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings?.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings?.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings?.showSplashScreen ?? true; // result: false

만약 || 이야 'C 번호의 교체로 ??좋지 귀하의 경우 충분한, 그것은 빈 문자열과 0을 삼켜 때문에, 당신은 항상 당신의 자신의 기능을 쓸 수있다 :

 function $N(value, ifnull) {
    if (value === null || value === undefined)
      return ifnull;
    return value;
 }

 var whatIWant = $N(someString, 'Cookies!');

아무도 여기에 대한 잠재력을 언급하지 NaN않았습니다. 그래서 저는 2 센트를 더할 것이라고 생각했습니다.

주어진 코드의 경우 :

var a,
    b = null,
    c = parseInt('Not a number'),
    d = 0,
    e = '',
    f = 1
;

||연산자 를 사용하는 경우 첫 번째 거짓이 아닌 값을 얻습니다.

var result = a || b || c || d || e || f; // result === 1

here 게시 된 일반적인 병합 방법을 사용하면 다음과 같은c 값을 얻습니다 .NaN

var result = coalesce(a,b,c,d,e,f); // result.toString() === 'NaN'

이것들 중 어느 것도 나에게 옳지 않은 것 같습니다. 당신의 세계와 다를 수있는 나의 작은 합체 논리 세계에서, 나는 정의되지 않은, null, NaN을 모두 "무시한"것으로 간주합니다. 그래서 다시 돌아올 것으로 기대합니다d 통합 방법에서 0 .

누군가의 뇌가 내 것과 같이 작동하고을 제외하고 싶다면 NaN이 방법으로 다음을 수행하십시오.

function coalesce() {
    var i, undefined, arg;

    for( i=0; i < arguments.length; i++ ) {
        arg = arguments[i];
        if( arg !== null && arg !== undefined
            && (typeof arg !== 'number' || arg.toString() !== 'NaN') ) {
            return arg;
        }
    }
    return null;
}

코드를 최대한 짧게하고 명확성이 부족하지 않은 사람들을 위해 @impinball에서 제안한대로 사용할 수도 있습니다. 이것은 NaN이 NaN과 같지 않다는 사실을 이용합니다. 당신은 더 많은 것을 여기에서 읽을 수 있습니다 이유가 NaN NaN이 같지 않음?

function coalesce() {
    var i, arg;

    for( i=0; i < arguments.length; i++ ) {
        arg = arguments[i];
        if( arg != null && arg === arg ) { //arg === arg is false for NaN
            return arg;
        }
    }
    return null;
}

JavaScript 고유의 null 정의에주의하십시오. 자바 스크립트에는 "값 없음"에 대한 두 가지 정의가 있습니다. 1. Null : 변수가 null이면 변수에 데이터가 포함되어 있지 않지만 변수가 이미 코드에 정의되어 있음을 의미합니다. 이처럼 :

var myEmptyValue = 1;
myEmptyValue = null;
if ( myEmptyValue === null ) { window.alert('it is null'); }
// alerts

이 경우 변수 유형은 실제로 Object입니다. 그것을 테스트하십시오.

window.alert(typeof myEmptyValue); // prints Object

2. 정의되지 않음 : 변수가 코드에서 이전에 정의되지 않았으며 예상대로 값이 포함되지 않은 경우. 이처럼 :

   if ( myUndefinedValue === undefined ) { window.alert('it is undefined'); }
   // alerts

그러한 경우 변수 유형은 '정의되지 않음'입니다.

형식 변환 비교 연산자 (==)를 사용하면 JavaScript는 이러한 빈 값 모두에 대해 동일하게 작동합니다. 이들을 구별하려면 항상 유형 엄격한 비교 연산자 (===)를 사용하십시오.

설명을 읽은 후 @Ates Goral의 답변은 C #에서 수행하는 것과 동일한 작업을 JavaScript로 수행하는 방법을 제공합니다.

@Gumbo의 답변은 null을 확인하는 가장 좋은 방법을 제공합니다. 그러나 특히 JavaScript 확인 및 / 또는 문제 ==와 관련 ===하여 JavaScript 와의 차이점에 유의해야합니다.undefinednull .

여기 에 두 용어의 차이점에 대한 좋은 기사가 있습니다 . 기본적으로, ==대신에 를 사용하면 ===JavaScript가 비교중인 값을 통합 하고이 병합 후 비교 결과를 반환한다는 것을 이해하십시오 .

React의 create-react-app툴체인은 버전 3.3.0 (5.12.2019 릴리스) 이후 null 병합을 지원합니다 . 릴리스 정보에서 :

선택적 체인 및 Nullish Coalescing 연산자

우리는 이제 선택적인 chaining and nullish coalescing operator를 지원합니다!

// Optional chaining
a?.(); // undefined if `a` is null/undefined
b?.c; // undefined if `b` is null/undefined

// Nullish coalescing
undefined ?? 'some other default'; // result: 'some other default'
null ?? 'some other default'; // result: 'some other default'
'' ?? 'some other default'; // result: ''
0 ?? 300; // result: 0
false ?? true; // result: false

이것은 create-react-app3.3.0 이상 을 사용하는 경우 이미 React 앱에서 이미 null-coalesce 연산자 를 사용할 수 있다고 말했습니다 .

예, 제안 은 4 단계 입니다. 이는 제안서가 공식 ECMAScript 표준에 포함될 준비가되었음을 의미합니다. 최신 데스크톱 버전의 Chrome, Edge 및 Firefox에서 이미 사용할 수 있지만이 기능이 브라우저 간 안정성에 도달 할 때까지 조금 더 기다려야합니다.

다음 예제를 통해 동작을 설명하십시오.

// note: this will work only if you're running latest versions of aforementioned browsers
const var1 = undefined;
const var2 = "fallback value";

const result = var1 ?? var2;
console.log(`Nullish coalescing results in: ${result}`);

이전 예는 다음과 같습니다.

const var1 = undefined;
const var2 = "fallback value";

const result = (var1 !== null && var1 !== undefined) ?
    var1 :
    var2;
console.log(`Nullish coalescing results in: ${result}`);

참고 nullish 병합이 됩니다 하지 위협 falsy 있는 값 방식 ||운영자가 한 (그것은 단지에 대한 검사 undefined또는 null값), 따라서 같은 역할을합니다 다음 코드는 다음과 같습니다 :

// note: this will work only if you're running latest versions of aforementioned browsers
const var1 = ""; // empty string
const var2 = "fallback value";

const result = var1 ?? var2;
console.log(`Nullish coalescing results in: ${result}`);

TypesScript 사용자의 경우 TypeScript 3.7부터이 기능을 사용할 수 있습니다.

2020 년 4 월 현재 제안 단계에 있기 때문에 곧 자바 스크립트로 제공 될 예정입니다. 호환성 및 지원에 대한 상태를 https://developer.mozilla.org/en-US/docs/Web/ 에서 모니터링 할 수 있습니다. 자바 스크립트 / 참조 / 운영자 / Nullish_coalescing_operator

Typescript를 사용하는 사람들 은 Typescript 3.7 의 nullish 통합 연산자 를 사용할 수 있습니다

문서에서-

이 기능 생각할 수 - ??연산자 - 기본 값을 "가을 다시"에 대한 방법을 다룰 때 같이 null나 undefined. 우리가 같은 코드를 작성할 때

let x = foo ?? bar();

이것은 값 foo이“존재할 때”사용될 것이라고 말하는 새로운 방법입니다 . 그러나 null또는 undefined일 때 bar()대신 계산하십시오 .

정답 확인

JavaScript로 존재합니까? 그렇습니다. 그러나. 현재 3 단계 에서 2020-02-06 현재 이며 아직 모든 곳에서 지원되지는 않습니다.아래 URL의 링크를 따라 "사양"및 "브라우저 호환성"헤더로 이동하여 자세한 정보를 확인하십시오.

인용 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Nullish 통합 연산자 (??)는 왼쪽 피연산자가 null이거나 정의되지 않은 경우 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다.

논리 OR (||) 연산자와 달리 왼쪽 피연산자가 Null이거나 정의되지 않은 잘못된 값이면 왼쪽 피연산자가 반환됩니다. 즉, ||를 사용하면 다른 변수 foo에 기본값을 제공하기 위해 잘못된 값을 사용 가능한 것으로 간주하면 (예 : ''또는 0) 예기치 않은 동작이 발생할 수 있습니다. 자세한 예는 아래를 참조하십시오.

예를 원하십니까? 내가 게시 한 링크를 따라 가십시오 .

이제 Chrome, Edge, Firefox, Safari 등과 같은 주요 브라우저의 최신 버전을 완벽하게 지원합니다. 다음은 null 연산자와 Nullish Coalescing Operator의 비교입니다.

const response = {
        settings: {
            nullValue: null,
            height: 400,
            animationDuration: 0,
            headerText: '',
            showSplashScreen: false
        }
    };
    /* OR Operator */
    const undefinedValue = response.settings.undefinedValue || 'Default Value'; // 'Default Value'
    const nullValue = response.settings.nullValue || 'Default Value'; // 'Default Value'
    const headerText = response.settings.headerText || 'Hello, world!'; //  'Hello, world!'
    const animationDuration = response.settings.animationDuration || 300; //  300
    const showSplashScreen = response.settings.showSplashScreen || true; //  true
    /* Nullish Coalescing Operator */
    const undefinedValue = response.settings.undefinedValue ?? 'Default Value'; // 'Default Value'
    const nullValue = response.settings.nullValue ?? ''Default Value'; // 'Default Value'
    const headerText = response.settings.headerText ?? 'Hello, world!'; // ''
    const animationDuration = response.settings.animationDuration ?? 300; // 0
    const showSplashScreen = response.settings.showSplashScreen ?? true; //  false