มีตัวดำเนินการ“ null coalescing” ใน JavaScript หรือไม่

มีตัวดำเนินการรวมศูนย์ว่างใน Javascript หรือไม่

ตัวอย่างเช่นใน C # ฉันสามารถทำได้:

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

การประมาณที่ดีที่สุดที่ฉันสามารถรู้ได้สำหรับ Javascript คือการใช้ตัวดำเนินการตามเงื่อนไข:

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

ซึ่งเป็น IMHO sorta icky ฉันทำได้ดีกว่าไหม

ปรับปรุง

JavaScript นี้รองรับการประกอบ nullish coalescing (??) มันจะส่งกลับตัวถูกดำเนินการทางด้านขวาของมันเมื่อตัวถูกดำเนินการทางด้านซ้ายมือเป็นnullหรือหรือundefinedมิฉะนั้นจะส่งกลับตัวถูกดำเนินการทางด้านซ้ายมือ

โปรดตรวจสอบความเข้ากันได้ก่อนใช้งาน

JavaScript เทียบเท่ากับโอเปอเรเตอร์การรวมกัน C # null ( ??) กำลังใช้ตรรกะ 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 มันรับจำนวนอาร์กิวเมนต์เท่าใดก็ได้และส่งคืนค่า null หากไม่มีค่าใด ๆ มันทำตัวเหมือน C # ?? โอเปอเรเตอร์ในแง่ที่ว่า "", เท็จและ 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 # ??ไม่ดีพอในกรณีของคุณเนื่องจากมันกลืนสตริงและศูนย์ว่างคุณสามารถเขียนฟังก์ชันของคุณเองได้เสมอ:

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

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

ไม่มีใครพูดถึงศักยภาพNaNที่ฉันจะได้รับซึ่งเป็นสิ่งที่มีค่าเป็นโมฆะ ดังนั้นฉันคิดว่าฉันจะเพิ่มสองเซ็นต์ของฉัน

สำหรับรหัสที่ได้รับ:

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

หากคุณต้องใช้||โอเปอเรเตอร์คุณจะได้รับค่าที่ไม่เป็นค่าแรก:

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

หากคุณใช้วิธีการรวมทั่วไปตามที่โพสต์ที่นี่คุณจะได้รับcซึ่งมีค่า:NaN

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

ทั้งคู่ดูเหมือนจะไม่ถูกต้องสำหรับฉัน ในโลกแห่งตรรกะรวมตัวเล็ก ๆ ของฉันซึ่งอาจแตกต่างไปจากโลกของคุณฉันคิดว่าไม่ได้กำหนดเป็นโมฆะและ NaN เพราะทั้งหมดคือ "โมฆะ - อิช" ดังนั้นฉันคาดว่าจะได้รับกลับd(ศูนย์) จากวิธีการรวมตัวกัน

หากสมองของทุกคนทำงานเหมือนของฉันและคุณต้องการแยก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 มีคำจำกัดความสองคำสำหรับ "no value" ใน javascript 1. Null: เมื่อตัวแปรเป็นโมฆะมันหมายถึงไม่มีข้อมูลอยู่ แต่ตัวแปรนั้นถูกกำหนดไว้แล้วในโค้ด แบบนี้:

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

ในกรณีเช่นนี้ชนิดของตัวแปรของคุณคือวัตถุจริง ทดสอบมัน

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

2. ไม่ได้กำหนด: เมื่อตัวแปรไม่ได้ถูกกำหนดมาก่อนในรหัสและตามที่คาดไว้มันไม่ได้มีค่าใด ๆ แบบนี้:

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

หากกรณีดังกล่าวประเภทของตัวแปรของคุณคือ 'ไม่ได้กำหนด'

โปรดสังเกตว่าหากคุณใช้ตัวดำเนินการเปรียบเทียบการแปลงประเภท (==) JavaScript จะทำงานอย่างเท่าเทียมกันสำหรับค่าว่างทั้งสองนี้ หากต้องการแยกแยะระหว่างพวกเขาให้ใช้ตัวดำเนินการเปรียบเทียบแบบ จำกัด ประเภท (===) เสมอ

หลังจากอ่านคำชี้แจงของคุณคำตอบของ @Ates Goral จะให้วิธีการทำงานแบบเดียวกับที่คุณทำใน C # ใน JavaScript

@ คำตอบของ Gumbo ให้วิธีที่ดีที่สุดในการตรวจสอบ null; แต่มันเป็นสิ่งสำคัญที่จะต้องทราบความแตกต่างใน==เมื่อเทียบกับ===ใน JavaScript โดยเฉพาะอย่างยิ่งเมื่อมันมาถึงประเด็นของการตรวจสอบและundefined / หรือnull

มีบทความที่ดีมากเกี่ยวกับความแตกต่างในสองข้อตกลงเป็นที่นี่ โดยทั่วไปเข้าใจว่าหากคุณใช้==แทน===JavaScript จะพยายามรวมค่าที่คุณกำลังเปรียบเทียบและส่งคืนสิ่งที่ผลลัพธ์ของการเปรียบเทียบหลังจากการรวมกันนี้

โปรดทราบว่าการตอบสนองของcreate-react-appเครื่องมือโซ่สนับสนุนด้วย null coalescing ตั้งแต่เวอร์ชัน 3.3.0 (ปล่อย 2019/05/12) จากบันทึกประจำรุ่น:

ตัวเลือกการรวมสายโยงและ Nullish รวมตัวกัน

ตอนนี้เราสนับสนุนโอเปอเรเตอร์ที่เป็นตัวเลือกและการรวมตัวกันแบบ nullish!

// 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+ คุณสามารถเริ่มใช้ตัวดำเนินการ null-coalesce ได้แล้วในแอป React

ใช่และข้อเสนอของมันคือด่าน 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จะไม่คุกคามค่าที่ผิดพลาดอย่างที่||ผู้ให้บริการทำ (ตรวจสอบ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}`);

สำหรับผู้ใช้ typescript เริ่มต้นจากTypeScript 3.7คุณลักษณะนี้ยังมีอยู่ในขณะนี้

หวังว่าจะให้บริการใน Javascript เร็ว ๆ นี้เนื่องจากอยู่ในช่วงข้อเสนอตั้งแต่ เม.ย. 2563 คุณสามารถตรวจสอบสถานะที่นี่เพื่อความเข้ากันได้และการสนับสนุน - https://developer.mozilla.org/en-US/docs/Web/ JavaScript / อ้างอิง / ผู้ประกอบการ / Nullish_coalescing_operator

สำหรับคนที่ใช้ typescript, คุณสามารถใช้ประกอบการหลอมรวม nullishจาก typescript 3.7

จากเอกสาร -

คุณสามารถคิดว่าคุณลักษณะนี้ - ??ผู้ประกอบการ - เป็นวิธีการ“ตกกลับ” เป็นค่าเริ่มต้นได้เมื่อต้องรับมือกับหรือnull undefinedเมื่อเราเขียนโค้ดเช่น

let x = foo ?? bar();

นี่เป็นวิธีใหม่ในการบอกว่ามูลค่าfooจะถูกใช้เมื่อเป็น "ปัจจุบัน"; แต่เมื่อมันnullหรือundefinedคำนวณbar()ในสถานที่ของมัน

ตกลงคำตอบที่เหมาะสม

มันมีอยู่ใน JavaScript? ใช่. แต่. ปัจจุบันมีให้บริการตั้งแต่ปี2020-02-06ที่ด่าน3และยังไม่รองรับในทุกที่ ไปที่ลิงก์ใน URL ด้านล่างและไปที่ส่วนหัว "ข้อมูลจำเพาะ" และ "ความเข้ากันได้ของเบราว์เซอร์" เพื่อดูข้อมูลเพิ่มเติมว่าอยู่ที่ไหน

อ้างจาก: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

ตัวดำเนินการรวมศูนย์ nullish (?) เป็นตัวดำเนินการเชิงตรรกะที่ส่งกลับตัวถูกดำเนินการทางด้านขวาของมันเมื่อตัวถูกดำเนินการทางด้านซ้ายเป็นโมฆะหรือไม่ได้กำหนดและมิฉะนั้นส่งคืนตัวถูกดำเนินการทางด้านซ้าย

ตรงกันข้ามกับตัวดำเนินการแบบลอจิคัล OR (||) ตัวถูกดำเนินการทางด้านซ้ายจะถูกส่งกลับหากเป็นค่าที่เป็นเท็จซึ่งไม่เป็นโมฆะหรือไม่ได้กำหนดไว้ กล่าวอีกนัยหนึ่งถ้าคุณใช้ || เพื่อให้ค่าเริ่มต้นบางอย่างแก่ตัวแปรฟูคุณอาจพบพฤติกรรมที่ไม่คาดคิดหากคุณพิจารณาค่าที่ผิดพลาดบางอย่างที่สามารถใช้งานได้ (เช่น '' หรือ 0) ดูตัวอย่างด้านล่างเพิ่มเติม

ต้องการตัวอย่างไหม ตามลิงค์ที่ฉันโพสต์มันมีทุกอย่าง

ตอนนี้มันรองรับเบราว์เซอร์รุ่นใหญ่เช่น Chrome, Edge, Firefox, Safari และรุ่นอื่น ๆ ต่อไปนี้คือการเปรียบเทียบระหว่างตัวดำเนินการ null กับตัวดำเนินการ Nullish Coalescing

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