JSで値がnullでも空の文字列でもないかどうかを確認する方法


86

Javascriptで値がnullでも空の文字列でもないかどうかのチェックはありますか?私は次のものを使用しています:

var data; //get its value from db 
if(data != null && data != '') {
   // do something
}

しかし、私は別のより良い解決策があるかどうか疑問に思っています。ありがとう。



1
私はこれを試しましたが、2つのケースのうちの1つでは機能しませんでした。
ivva 2017

みなさん、ありがとうございます、やってみます。私はそれがうまくいくことを願っています。
ivva 2017

undefinedは、ロジックによれば、トリガー// do somethingする必要があるがトリガーしない特殊なケースの1つです。
サルマンA

回答:


163

変数がnullでも空の文字列でもないことを本当に確認したい場合は、次のように記述します。

if(data !== null && data !== '') {
   // do something
}

型が等しいかどうかを確認するためにコードを変更したことに注意してください(!==| ===)。

ただし、コードが「合理的な」値に対してのみ実行されることを確認したい場合は、他の人がすでに述べているように、次のように書くことができます。

if (data) {
  // do something
}

javascriptでは、null値と空の文字列の両方がfalseに等しいため(つまりnull == false)。

コードのこれら2つの部分の違いは、最初の部分では、特にnullまたは空の文字列ではないすべての値がに入力されることifです。しかし、二つ目に、すべての真っぽい値が入力されますiffalse0nullundefined、空の文字列を、ではないだろう。


2
多くの場合、0は妥当な値です
Aequitas 2018年

3
そのため、合理的な単語は引用符で囲まれています:)
GershonPapi18年

@Adamそうでない場合は、空のままにしてelseを使用できます。それは常に期待どおりに反転します。
ネイト

これはデータであってはなりません!== null || &&?を使用する代わりにデータ!== ''
Imdad

@Imdad OPは、値がnullでも空の文字列でもないかどうかを確認するように求めたので、いいえ。
GershonPapi19年

18

nullJSでは、両方と空の文字列は偽の値です。したがって、

if (data) { ... }

完全に十分です。

ただし、注意点:コード内にさまざまな型で現れる可能性のある変数を含めることは避けます。データが最終的に文字列になる場合は、最初は空の文字列で変数を定義するので、次のことができます。

if (data !== '') { ... }

null(またはのような奇妙なものdata = "0")が邪魔になることなく。


11

使用する代わりに

if(data !== null && data !== ''  && data!==undefined) {

// do something
}

以下の簡単なコードを使用できます

if(Boolean(value)){ 
// do something 
}
  • 0、空の文字列、null、undefined、NaNなど、直感的に「空」の値はfalseになります
  • 他の値が真になる

6

私はしばしば真の値と文字列の空のスペースをテストします:

if(!(!data || data.trim().length === 0)) {
  // do something here
}

1つ以上の空のスペースで構成される文字列がある場合、それはtrueと評価されます。


4
if (data?.trim().length > 0) {
   //use data
}

?. 任意連鎖オペレータは、短絡および返されundefinedたデータがある場合nullishnull又はundefined)で偽に評価されるif式。


私は正直にこの演算子について知りませんでした..残念ながら、いくつかのAndroidブラウザはそれをサポートしていませんが、それ以外の点ではサポートはかなり良いです!
brandonmack

2

nullと空の両方を次のように検証できます。

<script>
function getName(){
    var myname = document.getElementById("Name").value;
    if(myname != '' && myname != null){
        alert("My name is "+myname);
    }else{
        alert("Please Enter Your Name");
    }       
}


1

試してみてください----------

function myFun(){
var inputVal=document.getElementById("inputId").value;
if(inputVal){
document.getElementById("result").innerHTML="<span style='color:green'>The value is "+inputVal+'</span>';
}
else{
document.getElementById("result").innerHTML="<span style='color:red'>Something error happen! the input May be empty.</span>";
}
}
<input type="text" id="inputId">
<input type="button" onclick="myFun()" value="View Result">
<h1 id="result"></h1>


1

本質的に空のコードを作成する場合、状況を考えると、次のいずれかを意味する可能性があります。

  • 数値のように0
  • フロート値のように0.0
  • 文字列値のように「0」
  • 文字列値のように「0.0」
  • Null値の場合と同様にnull、場合によっては未定義をキャプチャすることも、キャプチャしないこともあります
  • 未定義の値のように未定義
  • 偽の真実の値のように偽、偶然のように0も真実のようですが、偽をそのままキャプチャしたい場合はどうなりますか
  • ''空白やタブのない空のsting値
  • ''空白またはタブのみの文字列

OPが述べたように、実際の状況では、それらすべてをテストしたい場合もあれば、限られた条件のセットについてのみテストしたい場合もあります。

通常if(!a){return true;}、ほとんどの場合その目的を果たしますが、より広範な条件のセットをカバーすることはありません。

そのラウンドを行った別のハックは return (!value || value == undefined || value == "" || value.length == 0);

しかし、プロセス全体を制御する必要がある場合はどうでしょうか。

ネイティブコアJavaScriptには、採用する必要のある単純なむち打ち症の解決策はありません。フラストレーションから生まれたソリューションの下で、レガシーIE11のサポートを終了することを考えると(正直なところ、Windowsでもそうすべきです)、すべての最新のブラウザーで機能します。

 function empty (a,b=[])
 {if(!Array.isArray(b)) return; 
 var conditions=[null,'0','0.0',false,undefined,''].filter(x => !b.includes(x));
 if(conditions.includes(a)|| (typeof a === 'string' && conditions.includes(a.toString().trim())))
 {return true;};
 return false;};`

ソリューションの背後にあるロジックは、関数に2つのパラメーターabがあることです。があり、aはチェックする必要のある値、bは上記の事前定義された条件から除外する必要のある条件が設定された配列です。bのデフォルト値は空の配列[]に設定されています。

関数の最初の実行は、bが配列であるかどうかを確認することです。そうでない場合は、関数を早期に終了します。

次のステップは[null,'0','0.0',false,undefined,'']、配列bとの間の配列の差を計算することです。bが空の配列の場合、事前定義された条件が有効になります。それ以外の場合は、一致する値が削除されます。

条件= [事前定義されたセット]-[除外されるセット] フィルター関数は、それを利用して正確に実行します。配列に条件が設定されたので、必要なのは値が条件配列にあるかどうかを確認することだけです。 include関数は、JSエンジンに手間のかかる作業を行わせるために、独自の厄介なループを作成する必要がないことを正確実行します。

ガッチャは、 私たちが、比較のために、文字列に変換しているならば、0と0.0がnullとundefinedがエラーによってスクリプト全体を遮断するだろう罰金実行します。エッジケースソリューションが必要です。以下の簡単な|| 最初の条件が満たされない場合、エッジケースをカバーします。インクルードを介して別の早期チェックを実行すると、満たされない場合は早期終了します。

if(conditions.includes(a)||  (['string', 'number'].includes(typeof a) && conditions.includes(a.toString().trim())))

trim()関数は、より広い空白とタブのみの値をカバーし、エッジケースのシナリオでのみ機能します。

遊び場

function empty (a,b=[]){
if(!Array.isArray(b)) return;
conditions=[null,'0','0.0',false,undefined,''].filter(x => !b.includes(x));
if(conditions.includes(a)|| 
(['string', 'number'].includes(typeof a) && conditions.includes(a.toString().trim()))){
 return true;
} 
return false;
}

console.log('1 '+empty());
console.log('2 '+empty(''));
console.log('3 '+empty('      '));
console.log('4 '+empty(0));
console.log('5 '+empty('0'));
console.log('6 '+empty(0.0));
console.log('7 '+empty('0.0'));
console.log('8 '+empty(false));
console.log('9 '+empty(null));
console.log('10 '+empty(null,[null]));
console.log('11 dont check 0 as number '+empty(0,['0']));
console.log('12 dont check 0 as string '+empty('0',['0']));
console.log('13 as number for false as value'+empty(false,[false]));

複雑にしましょう。比較する値が配列自体であり、可能な限り深くネストできる場合はどうでしょうか。配列内の値が空であるかどうかを確認する場合は、エッジビジネスケースになる可能性があります。

function empty (a,b=[]){
    if(!Array.isArray(b)) return;

    conditions=[null,'0','0.0',false,undefined,''].filter(x => !b.includes(x));
    if(Array.isArray(a) && a.length > 0){
    for (i = 0; i < a.length; i++) { if (empty(a[i],b))return true;} 
    } 
    
    if(conditions.includes(a)|| 
    (['string', 'number'].includes(typeof a) && conditions.includes(a.toString().trim()))){
     return true;
    } 
    return false;
    }

console.log('checking for all values '+empty([1,[0]]));
console.log('excluding for 0 from condition '+empty([1,[0]], ['0']));

フレームワークで採用したシンプルで幅広いユースケース関数。

  • 特定の状況での空の定義が正確に何であるかを制御できます
  • 空の状態を再定義するための制御を提供します
  • 文字列、数値、浮動小数点数、真実、null、未定義、および深い配列から、ほぼすべてのものを比較できます
  • ソリューションは、再利用可能性と柔軟性を念頭に置いて作成されます。他のすべての回答は、単純な1つまたは2つのケースを処理する場合に適しています。ただし、上記のスニペットのコーディング中に空の変更を定義すると、その場合は問題なく機能する場合が常にあります。

0

特にnullと空の文字列をチェックすることにうんざりしていたので、今では通常、小さな関数を記述して呼び出すだけでそれを実行できます。

/**
 * Test if the given value equals null or the empty string.
 * 
 * @param {string} value
**/
const isEmpty = (value) => value === null || value === '';

// Test:
isEmpty('');        // true
isEmpty(null);      // true
isEmpty(1);         // false
isEmpty(0);         // false
isEmpty(undefined); // false

0

function validateAttrs(arg1, arg2, arg3,arg4){
    var args = Object.values(arguments);
    return (args.filter(x=> x===null || !x)).length<=0
}
console.log(validateAttrs('1',2, 3, 4));
console.log(validateAttrs('1',2, 3, null));
console.log(validateAttrs('1',undefined, 3, 4));
console.log(validateAttrs('1',2, '', 4));
console.log(validateAttrs('1',2, 3, null));

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.