Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do I compare String and Boolean in JavaScript?
In JavaScript, comparing strings and booleans can produce unexpected results due to type coercion. This tutorial explains how equality operators handle these comparisons.
JavaScript provides two equality operators: the equality operator (==) performs type coercion before comparison, while the strict equality operator (===) compares both value and type without coercion.
Boolean Type Coercion
When using the equality operator (==), JavaScript converts booleans to numbers before comparison:
<!DOCTYPE html>
<html>
<body>
<h3>Boolean to Number Conversion:</h3>
<p id="conversion"></p>
<script>
let results = [];
results.push("true converts to: " + Number(true));
results.push("false converts to: " + Number(false));
document.getElementById("conversion").innerHTML = results.join("<br>");
</script>
</body>
</html>
true converts to: 1 false converts to: 0
Using Equality Operator (==)
The equality operator performs type coercion, converting operands to the same type before comparison:
<!DOCTYPE html>
<html>
<body>
<h3>String to Boolean Comparison with ==:</h3>
<p id="equality-results"></p>
<script>
let results = [];
// true converts to 1
results.push('true == "1": ' + (true == "1"));
// false converts to 0
results.push('false == "0": ' + (false == "0"));
// Empty string converts to 0
results.push('false == "": ' + (false == ""));
// String "false" doesn't convert to boolean false
results.push('false == "false": ' + (false == "false"));
// String "true" doesn't convert to boolean true
results.push('true == "true": ' + (true == "true"));
document.getElementById("equality-results").innerHTML = results.join("<br>");
</script>
</body>
</html>
true == "1": true false == "0": true false == "": true false == "false": false true == "true": false
Using Strict Equality Operator (===)
The strict equality operator compares both value and type without any coercion:
<!DOCTYPE html>
<html>
<body>
<h3>String to Boolean Comparison with ===:</h3>
<p id="strict-results"></p>
<script>
let results = [];
// No type conversion - different types always false
results.push('true === "1": ' + (true === "1"));
results.push('false === "0": ' + (false === "0"));
results.push('false === "": ' + (false === ""));
results.push('true === "true": ' + (true === "true"));
// To compare, convert boolean to string first
let boolValue = true;
results.push('String(true) === "true": ' + (String(boolValue) === "true"));
document.getElementById("strict-results").innerHTML = results.join("<br>");
</script>
</body>
</html>
true === "1": false false === "0": false false === "": false true === "true": false String(true) === "true": true
Comparison Table
| Comparison | Equality (==) | Strict Equality (===) | Explanation |
|---|---|---|---|
| true == "1" | true | false | true converts to 1, "1" converts to 1 |
| false == "0" | true | false | false converts to 0, "0" converts to 0 |
| false == "" | true | false | Both convert to 0 |
| true == "true" | false | false | true converts to 1, "true" converts to NaN |
Best Practices
For reliable string-to-boolean comparisons, explicitly convert types:
<!DOCTYPE html>
<html>
<body>
<h3>Recommended Approaches:</h3>
<p id="best-practices"></p>
<script>
let results = [];
let boolValue = true;
let stringValue = "true";
// Convert boolean to string
results.push('String(true) === "true": ' + (String(boolValue) === stringValue));
// Convert string to boolean
results.push('"true" === String(true): ' + (stringValue === String(true)));
// Using Boolean constructor for string-to-boolean
results.push('Boolean("true"): ' + Boolean("true"));
results.push('Boolean(""): ' + Boolean(""));
document.getElementById("best-practices").innerHTML = results.join("<br>");
</script>
</body>
</html>
String(true) === "true": true
"true" === String(true): true
Boolean("true"): true
Boolean(""): false
Conclusion
Use strict equality (===) to avoid unexpected type coercion when comparing strings and booleans. For intentional comparisons, explicitly convert types using String() or Boolean() constructors for predictable results.
5K+ Views
