How do I compare String and Boolean in JavaScript?

Front End TechnologyJavascriptWeb Development

In this tutorial, we will learn to compare a string to the Boolean in JavaScript. The JavaScript has an equality operator to compare one value with another value.

There are two types of equality operators in JavaScript; one is an equality operator (==), and another is a strict equality operator (===). The difference between both of them is they compare operands differently.

The equality operator compares the only values of both operands and returns the Boolean value.

The strict equality operators first compare the values of both operands, and if the values match, it compares the data type of both operands. In such a way, if both operands' value and data type are equal, then strict equality operators return true. Otherwise, it returns a false value.

In this tutorial, we will compare the string values with the Boolean using the equality operator and strict equality operator.

Actual value of True and False

Before we go ahead with the tutorial, we should know the values of the Boolean values, true and false. The actual value of the true is 1, and false is either 0 or an empty string which is ‘’.

true == 1;
false == 0;
false == "";

Now, users are ready to understand the outputs of the examples of the below methods.

Using the Equality Operator (==)

We will use the equality operator in this method to compare the string with the Boolean values. It is not too hard to use the equality operator as it is introduced in the first version of JavaScript, and most people are familiar with it.

Syntax

Users can follow the below syntax to use the equality operator to compare the string and Boolean values.

false == "0"; //true
true == "1"; //true
false == ""; //true
false == "false"; //false
true == "true"; //false

Example

In the below example, we have taken different string values to compare with the true and false boolean values and observed the results.

<html>
<head>
   <title> Comparing the string to Boolean.</title>
</head>
<body>
   <h2>Comparing the string to Boolean.</h2>
   <h4>Compare true with "1" string value:</h4>
   <p id="result1"></p>
   <h4>Compare false with "0" string value:</h4>
   <p id="result2"></p>
   <h4>Compare true with "hello" string value:</h4>
   <p id="result3"></p>
   <h4>Compare false with "hello" string value:</h4>
   <p id="result4"></p>
   <script>
      let result1 = document.getElementById("result1");
      let result2 = document.getElementById("result2");
      let result3 = document.getElementById("result3");
      let result4 = document.getElementById("result4");
      let booleanValue = true == "1";
      result1.innerHTML = booleanValue; // prints true
      booleanValue = false == "0";
      result2.innerHTML = booleanValue; // prints true
      booleanValue = true == "hello";
      result3.innerHTML = booleanValue; // prints false
      booleanValue = false == "hello";
      result4.innerHTML = booleanValue // prints false
   </script>
</body>
</html>

In the above output, users can see that when we compare the true with “1” and false with “0”, it returns true Boolean values. It is because the actual value of the true is 1, and the false is 0.

Using the Strict Equality Operator (===)

In this method, we will use the strict equality operator to compare strings to Boolean. The strict equality always returns false when we compare string and boolean values as it also checks for the data type of both operands.

Syntax

Users can follow the below syntax to use a strict equality operator with the string and Boolean operands.

true === "1" // returns false value
false === "" // returns false value

Try the following code snippet-

var data = true;
data === "true" //false
String(data) === "true" //true

Example

In this example, we will observe the output whole matching the string to Boolean using the strict equality operator.

<html>
<head>
   <title>Comparing the string to Boolean.</title>
</head>
<body>
   <h2>Comparing the string to Boolean.</h2>
   <h4>Compare true with "1" string value using strict equality operator:</h4>
   <p id="result1"></p>
   <h4> Compare false with "0" string value using strict equality operator:</h4>
   <p id="result2"></p>
   <h4>Compare true with "123" string value using strict equality operator:</h4>
   <p id="result3"></p>
   <script>
      let result1 = document.getElementById("result1");
      let result2 = document.getElementById("result2");
      let result3 = document.getElementById("result3");
      let booleanValue = true === "1";
      result1.innerHTML = booleanValue; // prints false
      booleanValue = false === "0";
      result2.innerHTML = booleanValue; // prints false
      booleanValue = true === "123";
      result3.innerHTML = booleanValue; // prints false
   </script>
</body>
</html>

In the above output, users can see that unlike it returns false for all comparisons of string and Boolean value.

Conclusion

When users use the strict equality operator to compare string and Boolean values, it always returns false. So, it doesn’t mean to use anywhere. Also, there is a very few situations where we need to compare the string and Boole, and users can use the equality operator in this situation.

raja
Updated on 20-Jul-2022 08:08:25

Advertisements