How can I convert a string to boolean in JavaScript?

Front End Technology Javascript Web Development

This tutorial teaches us to convert the string to the boolean in JavaScript. Suppose that while developing the application, we have stored the boolean value in the database or local storage in the string format. Now, based on the stored string value, we want to convert it to a boolean value and perform a particular operation for the application user; the question arises how can we convert a string to a boolean?

There can be many possible ways to solve the above problem. We will learn some useful methods in this tutorial.

Using the Comparison (==) and Ternary operator (? :)
Using the Boolean class
Using the Double Not (!!) Operator

Using the Comparison (==) and Ternary operator (? :)

One of the easiest ways to convert the string to the boolean is to use the comparison (‘==’) operator with the ternary (? :) operator. However, users can use only the comparison operator also.

Syntax

string_var == 'true' ? true : false;
string_var == 'false' ? false : true;
string_var.toLowerCase() == 'true' ? true : false; //case sensitive approach

The comparison operator returns the true and false value based on the comparison between string_var and either with ‘true’ or ‘false’ value. The ternary operator returns the first and second values based on whether the given condition of comparison is true or false.

Parameters

string_var − It could be any string that you want to convert into the boolean.

Example 1

In the following example, we convert a string (let string_var = “True”) to Boolean using comparison and ternary operator.

<html>
<head>
   <title> Convert String to boolean </title>
</head>
<body>
   <h2>Converting String to boolean in JavaScript.</h2>
   <h4> String after converting to boolean. </h4>
   <p id="contentDiv"></p>
   <script type="text/javascript">
      // function to convert string to boolean
      function stringToBoolean() {
         let string_var = "True";
         let boolean_Value = string_var.toLowerCase() == 'true' ? true : false;
         contentDiv.innerHTML = "The value of <i> boolean_Value </i> is " + boolean_Value + ". The data type of boolean_Value variable is " + typeof boolean_Value;
      }
      stringToBoolean();
   </script>
</body>
</html>

In the output, users can see that datatype of the boolean_Value variable is boolean, which means our string successfully converted to the boolean.

Using the Boolean class

In JavaScript, the Boolean class takes a string or any value as an argument and returns the Boolean values based on their truthness. We have six falsy values in JavaScript, and the Boolean class returns true for all string values rather than six falsy values.

The six falsy values are as follows.

false
0
nan
“” //empty string
null
Undefined

Users can follow the below syntax to use the Boolean class.

Syntax

let bool1 = Boolean(string);

Parameters

sting − You can add any string value as a string parameter that you want to convert into the boolean.

Example 2

In the example below, we convert string to Boolean using Boolean class. We convert "False" and "" to Boolean.

<!DOCTYPE html>
<html>
<head>
   <title> Convert String to boolean. </title>
</head>
<body>
   <h2>Converting String to boolean in JavaScript.</h2>
   <h4> String after converting to boolean. </h4>
   <p id="contentDiv"></p>
   <script type="text/javascript">
      // function to convert string to boolean
      function stringToBoolean() {
         let bool1 = Boolean("false");
         let bool2 = Boolean("");
         contentDiv.innerHTML = " <p> The value of <i> bool1 </i> is " + bool1 + ".</p><p> The value of <i> bool2 </i> is " + bool2 + ".</p> <p> The data type of bool1 variable is " + typeof bool1 + " </p> ";
      }
      stringToBoolean();
   </script>
</body>
</html>

In the output, values of bool1 variable is true because “false” is not empty string. The Boolean class return false only for six falsy values. Note the below difference-

Boolean(false); //false
Boolean("false"); //true

Using the Double Not (!!) Operator

When we apply the Not (!) operator to any string value, it returns false for all strings rather than empty strings as it is the falsy value in JavaScript. Applying the double Not (!!) operator converges the value we get from the single Not operator.

However, the single Not operator also converts a string to a boolean, returning the opposite value. So, we need to apply the double Not operator to get the proper value.

Syntax

let bool = !!string_val

Parameters

string_val − Users can add any string to this operand to convert it into the boolean.

Example 3

<!DOCTYPE html>
<html>
<head>
   <title> Convert String to boolean.</title>
</head>
<body>
   <h2>Converting String to boolean in JavaScript.</h2>
   <h4> String after converting to boolean. </h4>
   <p id="contentDiv"></p>
   <script type="text/javascript">
      // function to convert string to boolean
      function stringToBoolean() {
         let string_var = "tutorialsPoint";
         let singleNotBool = !string_var; // false value
         let doubleNotBool = !!string_var; // true value
         contentDiv.innerHTML = "<p> The value of <i> singleNotBool </i> is " + singleNotBool + ".</p> <p> The value of <i> doubleNotBool </i> is " + doubleNotBool + ".</p> <p> The data type of doubleNotBool variable is " + typeof doubleNotBool + "</p>";
      }
      stringToBoolean();
   </script>
</body>
</html>

In the output, users can observe that when we apply a single Not operator to the string which is not empty, it returns false, and if we use a double Not operator, it returns a true value.

Conclusion

In this tutorial, we have learned three different ways to convert the string to a boolean. The first approach using the comparison and ternary operators is the most straightforward approach to solve our problem. The third approach might be confusing for beginners. So they can go for the first and second approaches.