JS에서 값이 null이 아니고 빈 문자열이 아닌지 확인하는 방법


83

Javascript에서 값이 null이 아니고 빈 문자열이 아닌지 확인합니까? 다음 중 하나를 사용하고 있습니다.

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

그러나 더 나은 해결책이 있는지 궁금합니다. 감사.


6
if(data)이 말한대로 충분 여기
CIsForCookies

1
나는 이것을 시도했지만 두 가지 경우 중 하나에서 작동하지 않았습니다.
ivva 2017

여러분 감사합니다. 시도해 볼게요. 나는 그것이 효과가 있기를 바랍니다.
ivva 2017

undefined논리에 따르면 트리거해야 // do something하지만 트리거 하지 않는 특수한 경우 중 하나입니다 .
Salman A

답변:


157

변수가 null이 아니고 특별히 빈 문자열이 아닌지 확인하려면 다음과 같이 작성합니다.

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

유형이 같은지 확인하기 위해 코드를 변경했습니다 ( !==| ===).

그러나 코드가 "합리적인"값에 대해서만 실행되도록하려면 다른 사람들이 이미 언급했듯이 다음과 같이 작성할 수 있습니다.

if (data) {
  // do something
}

자바 스크립트에서 null 값과 빈 문자열은 모두 false (예 :)와 같습니다 null == false.

코드의이 두 부분의 차이점은 첫 번째 부분의 경우 특별히 null 또는 빈 문자열이 아닌 모든 값이 if. 그러나, 두 번째에, 모든 사실 틱 값이 들어갑니다 if: false, 0, null, undefined및 빈 문자열을하지 않을 것입니다.


2
0은 많은 경우에 합리적인 값
Aequitas

3
합리적인 단어 : 따옴표와 함께 포장되는 이유의
게르손 파피

@Adam 그렇지 않은 경우 비워두고 else를 사용할 수 있습니다. 그것은 항상 예상대로 반전됩니다.
The Nate

이건 데이터가 아니야! == null || data! == ''대신 &&?
Imdad

@Imdad OP는 값이 null이 아니고 빈 문자열이 아닌지 확인하도록 요청했습니다.
Gershon Papi

18

둘 다 null및 빈 문자열은 JS에서 잘못된 값입니다. 따라서,

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
}

하나 이상의 빈 공간으로 구성된 문자열이 있으면 true로 평가됩니다.


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

?. 선택적 체인 연산자는 단락 및 반환 undefined데이터가있는 경우 nullish( nullundefined)를 거짓으로 평가되는 if식이다.


솔직히이 연산자에 대해 몰랐습니다. 안타깝게도 일부 Android 브라우저는이를 지원하지 않지만 그렇지 않으면 지원이 꽤 좋습니다!
brandonmack

2

null 및 empty 모두 다음과 같이 유효성을 검사 할 수 있습니다.

<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 또한 진실이지만 거짓을 그대로 캡처하려면 어떻게해야합니까?
  • ''공백이나 탭이없는 빈 스팅 값
  • 공백 또는 탭만있는 ''문자열

OP가 말했듯이 실제 상황에서 우리는 그것들을 모두 테스트하고 싶을 수도 있고 때때로 제한된 조건 세트에 대해서만 테스트하기를 원할 수도 있습니다.

일반적으로 if(!a){return true;}대부분의 경우 목적에 부합하지만 더 광범위한 조건을 다루지는 않습니다.

그 라운드를 만든 또 다른 해킹은 return (!value || value == undefined || value == "" || value.length == 0);

하지만 전체 프로세스에 대한 제어가 필요하다면 어떨까요?

기본 핵심 JavaScript에는 채택해야하는 간단한 whiplash 솔루션이 없습니다. 우리가 레거시 IE11에 대한 지원을 중단하는 것을 고려하면 (솔직히 말해서 윈도우도 그래야합니다) 모든 최신 브라우저에서 좌절감으로 태어난 솔루션 아래에 있습니다.

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

용액 뒤에 논리 함수는 두 개의 파라미터 갖는다 및 B를 A는 우리가 확인해야 값, b는 위에서 열거 된 미리 조건으로부터 제외해야 설정된 조건을 가진 어레이이다. b의 기본값은 빈 배열 []로 설정됩니다.

함수의 첫 번째 실행은 b가 배열인지 아닌지 확인하고 그렇지 않은 경우 함수를 일찍 종료하는 것입니다.

다음 단계는 [null,'0','0.0',false,undefined,'']배열 b 와의 배열 차이를 계산하는 것 입니다. b가 빈 배열이면 사전 정의 된 조건이 유지되고 그렇지 않으면 일치하는 값이 제거됩니다.

조건 = [미리 정의 된 세트]-[제외 된 세트] 필터 기능은 그것을 사용하는 것과 정확히 일치합니다. 이제 배열 세트에 조건이 있으므로 값이 조건 배열에 있는지 확인하기 만하면됩니다. 포함 함수는 JS 엔진이 무거운 작업을 수행하도록 자신의 불쾌한 루프를 작성할 필요가 없습니다.

잡았다는 우리가 비교를 위해 문자열로 변환 할 경우 다음 0 0.0 그러나 널과 정의되지 않은 오류를 통해 전체 스크립트를 차단하는 것 잘 실행됩니다. 엣지 케이스 솔루션이 필요합니다. 간단하다 || 첫 번째 조건이 충족되지 않으면 가장자리 케이스를 다룹니다. include를 통해 또 다른 조기 점검을 실행하면 충족되지 않으면 조기 종료됩니다.

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']));

내 프레임 워크에서 채택한 것은 간단하고 광범위한 사용 사례 기능입니다.

  • 주어진 상황에서 빈의 정의가 정확히 무엇인지 제어 할 수 있습니다.
  • 빈 상태를 재정의하는 제어 권한을 부여합니다.
  • string, number, float, truthy, null, undefined 및 deep 배열의 거의 모든 항목을 비교할 수 있습니다.
  • 솔루션은 재사용 가능성과 유연성을 염두에두고 그려집니다. 다른 모든 답변은 간단한 한두 가지 경우를 처리해야하는 경우에 적합합니다. 그러나 위의 스 니펫을 코딩하는 동안 빈 변경 사항의 정의가이 경우에 완벽하게 작동하는 경우가 항상 있습니다.

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.