Apakah ada operator “null coalescing” di JavaScript?

Apakah ada operator penggabungan nol di Javascript?

Misalnya, dalam C #, saya bisa melakukan ini:

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

Perkiraan terbaik yang dapat saya ketahui untuk Javascript menggunakan operator kondisional:

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

Yang agak IMHO icky. Bisakah saya berbuat lebih baik?

Memperbarui

JavaScript sekarang mendukung operator penggabungan nullish (??) . Ini mengembalikan operan sisi kanan ketika operan sisi kiri adalah nullatau undefined, dan sebaliknya mengembalikan operan sisi kiri.

Silakan periksa kompatibilitas sebelum menggunakannya.

Setara JavaScript dari operator penggabungan C # null ( ??) menggunakan logika OR ( ||):

var whatIWant = someString || "Cookies!";

Ada beberapa kasus (diklarifikasi di bawah) bahwa perilaku tidak cocok dengan C #, tetapi ini adalah cara umum, singkat untuk menetapkan nilai default / alternatif dalam JavaScript.

Klarifikasi

Terlepas dari jenis operan pertama, jika casting ke hasil Boolean false, tugas akan menggunakan operan kedua. Waspadalah terhadap semua kasus di bawah ini:

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

Ini berarti:

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

solusi ini berfungsi seperti fungsi SQL coalesce, ia menerima sejumlah argumen, dan mengembalikan nol jika tidak ada yang memiliki nilai. Berperilaku seperti C # ?? operator dalam arti bahwa "", false, dan 0 dianggap TIDAK NULL dan karenanya dianggap sebagai nilai aktual. Jika Anda berasal dari latar belakang .net, ini akan menjadi solusi perasaan yang paling alami.

Ya, itu akan segera datang. Lihat proposal di sini dan status implementasi di sini .

Ini terlihat seperti ini:

x ?? y

Contoh

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

Jika ||sebagai pengganti C # ??tidak cukup baik dalam kasus Anda, karena menelan string dan nol kosong, Anda selalu dapat menulis fungsi Anda sendiri:

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

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

Di sini tidak ada yang menyebutkan potensi NaN, yang - bagi saya - juga merupakan nilai nol-ish. Jadi, saya pikir saya akan menambahkan dua sen saya.

Untuk kode yang diberikan:

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

Jika Anda menggunakan ||operator, Anda mendapatkan nilai non-false pertama:

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

Jika Anda menggunakan metode penggabungan yang khas, seperti yang diposting di sini , Anda akan mendapatkannya c, yang memiliki nilai:NaN

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

Tak satu pun dari ini tampaknya benar bagi saya. Dalam dunia kecil saya sendiri dari logika bersatu, yang mungkin berbeda dari dunia Anda, saya menganggap tidak terdefinisi, null, dan NaN sebagai semuanya "null-ish". Jadi, saya berharap untuk mendapatkan kembali d(nol) dari metode penggabungan.

Jika otak siapa pun bekerja seperti otak saya, dan Anda ingin mengecualikan NaN, maka metode ini akan mencapai itu:

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;
}

Bagi mereka yang menginginkan kode sesingkat mungkin, dan tidak keberatan sedikit kejelasan, Anda juga dapat menggunakan ini seperti yang disarankan oleh @impinball. Ini mengambil keuntungan dari kenyataan bahwa NaN tidak pernah sama dengan NaN. Anda dapat membaca lebih lanjut tentang itu di sini: Mengapa NaN tidak sama dengan 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;
}

Waspadalah terhadap definisi spesifik JavaScript tentang null. ada dua definisi untuk "tidak ada nilai" dalam javascript. 1. Null: ketika suatu variabel adalah null, itu berarti tidak mengandung data di dalamnya, tetapi variabel sudah didefinisikan dalam kode. seperti ini:

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

dalam kasus seperti itu, tipe variabel Anda sebenarnya adalah Object. menguji.

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

2. Tidak terdefinisi: ketika suatu variabel belum didefinisikan sebelumnya dalam kode, dan seperti yang diharapkan, itu tidak mengandung nilai apa pun. seperti ini:

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

jika demikian, jenis variabel Anda 'tidak terdefinisi'.

perhatikan bahwa jika Anda menggunakan operator perbandingan konversi tipe (==), JavaScript akan bertindak sama untuk kedua nilai kosong ini. untuk membedakannya, selalu gunakan operator perbandingan ketat-tipe (===).

Setelah membaca klarifikasi Anda, jawaban @Ates Goral menyediakan cara melakukan operasi yang sama dengan yang Anda lakukan dalam C # dalam JavaScript.

@Gumbo jawaban menyediakan cara terbaik untuk memeriksa nol; namun, penting untuk mencatat perbedaan ==versus ===dalam JavaScript terutama ketika menyangkut masalah pemeriksaan undefineddan / atau null.

Ada artikel yang sangat bagus tentang perbedaan dua istilah di sini . Pada dasarnya, pahami bahwa jika Anda menggunakan ==alih-alih ===, JavaScript akan mencoba menyatukan nilai yang Anda bandingkan dan mengembalikan apa hasil perbandingan setelah penggabungan ini.

Perhatikan bahwa create-react-apprantai alat React mendukung penggabungan nol sejak versi 3.3.0 (dirilis 5.12.2019) . Dari catatan rilis:

Operator Pengawetan dan Nullish Opsional

Kami sekarang mendukung operator chaining dan nullish opsional!

// 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

Ini mengatakan, jika Anda menggunakan create-react-app3.3.0+ Anda dapat mulai menggunakan operator null-coalesce hari ini di aplikasi Bereaksi Anda.

Ya, dan usulannya adalah Tahap 4 sekarang. Ini berarti bahwa proposal tersebut siap untuk dimasukkan dalam standar formal ECMAScript. Anda sudah dapat menggunakannya di versi desktop Chrome, Edge dan Firefox baru-baru ini, tetapi kami harus menunggu sedikit lebih lama hingga fitur ini mencapai stabilitas lintas-browser.

Lihat contoh berikut untuk menunjukkan perilakunya:

// 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}`);

Contoh sebelumnya setara dengan:

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

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

Perhatikan bahwa nullish coalescing tidak akan mengancam nilai palsu seperti yang dilakukan ||operator (hanya memeriksa undefinedatau nullnilai), maka cuplikan berikut ini akan bertindak sebagai berikut:

// 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}`);

Untuk pengguna TypeScript, mulai dari TypeScript 3.7 , fitur ini juga tersedia sekarang.

Mudah-mudahan ini akan segera tersedia dalam Javascript, karena masih dalam tahap proposal pada April, 2020. Anda dapat memantau status di sini untuk kompatibilitas dan dukungan - https://developer.mozilla.org/en-US/docs/Web/ JavaScript / Referensi / Operator / Nullish_coalescing_operator

Untuk orang yang menggunakan TypeScript, Anda bisa menggunakan operator penggabungan nullish dari Typescript 3.7

Dari dokumen -

Anda dapat memikirkan fitur ini - the ?? operator - sebagai cara untuk "mundur" ke nilai default saat berhadapan dengan nullatau undefined. Ketika kita menulis kode suka

let x = foo ?? bar();

ini adalah cara baru untuk mengatakan bahwa nilai fooakan digunakan ketika "hadir"; tetapi ketika itu nullatau undefined, hitung bar()di tempatnya.

Ok jawaban yang tepat

Apakah ada di JavaScript? Ya, benar. TAPI. Saat ini pada 2020-02-06 di Tahap 3 dan belum didukung di mana-mana. Ikuti tautan di URL di bawah ini dan buka tajuk "Spesifikasi" dan "Kompatibilitas peramban" untuk info lebih lanjut tentang di mana ia berada.

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

Nullish coalescing operator (??) adalah operator logis yang mengembalikan operan di sisi kanan ketika operan di sisi kiri adalah null atau tidak terdefinisi, dan sebaliknya mengembalikan operan di sisi kiri.

Berlawanan dengan operator logis OR (||), operan kiri dikembalikan jika itu adalah nilai palsu yang bukan nol atau tidak terdefinisi. Dengan kata lain, jika Anda menggunakan || untuk memberikan beberapa nilai default ke variabel foo lain, Anda mungkin menemukan perilaku tak terduga jika Anda menganggap beberapa nilai falsy dapat digunakan (mis. '' atau 0). Lihat di bawah untuk contoh lebih lanjut.

Mau contoh? Ikuti tautan yang saya posting, semuanya ada.

Sekarang ia memiliki dukungan penuh dalam versi terbaru dari peramban utama seperti Chrome, Edge, Firefox, Safari dll. Berikut adalah perbandingan antara operator nol dan Operator Penggabungan Nullish

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