자바스크립트에서 문자열을 불리언(Boolean) 값으로 변환해야 하는 경우가 종종 있습니다. 특히 사용자 입력이나 서버 응답으로 받은 문자열 "true"를 실제 불리언 값과 비교해야 할 때 유용합니다. 아래 예제는 입력 필드에 입력된 문자열을 == 연산자와 === 연산자로 각각 비교한 결과를 화면에 출력합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Converting string to boolean</h1>
<button class="Btn">CLICK HERE</button>
<input class="str" type="text" />
<p class="sample"></p>
<h3>Click the above button to convert the string to boolean value</h3>
<script>
let sampleEle = document.querySelector(".sample");
let inputEle = document.querySelector(".str");
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.innerHTML += "Using == " + (inputEle.value == "true") + "<br>";
sampleEle.innerHTML += "Using === " + (inputEle.value === "true") + "<br>";
});
</script>
</body>
</html>
실행 결과
입력 필드에 'true'를 입력하고 버튼을 클릭하면 다음과 같은 결과가 출력됩니다.
반면, 'true'가 아닌 다른 문자열을 입력한 후 버튼을 클릭하면 −
두 연산자 모두 false를 반환하는 것을 확인할 수 있습니다. 이 예제에서는 두 연산자의 결과가 동일하지만, 자료형까지 엄격하게 검사하는 === 연산자를 사용하는 것이 일반적으로 더 안전합니다.
참고: Boolean() 함수 사용 시 주의점
Boolean() 함수나 !!(이중 논리 부정) 연산자로도 문자열을 불리언으로 변환할 수 있습니다. 다만 이 방식은 빈 문자열("")만 false로 변환되며, 그 외의 모든 문자열은 심지어 "false"라도 true로 변환됩니다. 따라서 문자열의 실제 내용을 기준으로 판단해야 한다면 위 예제처럼 value === "true" 형태의 명시적인 비교가 가장 확실한 방법입니다.