In JavaScript, "" represents an empty string, and we can use the null keyword to initialize the string to a null value. If we don't assign a value to any variable, it defaults to undefined.
Sometimes, when processing strings, we need to check whether the string is empty, undefined or has a null value. For example, we are getting details from the user through an HTML form, and the user can add an empty string in the input field; we need to validate the input field and display an error message to the user.
In this tutorial, we will learn three methods to check whether a string is empty, null or undefined.
The string.trim() method allows us to remove spaces from the beginning of the string. So we can remove the string from the beginning of the string. After that, we can check if the length of the string is zero, which means the string can be empty, null, or undefined.
Users can use the string.trim() method and string.length() property according to the following syntax to check for empty, undefined or null strings.
let string1 = " ";
string1 = string1.trim();
if (string1.length == 0) {
// string is empty
}
In the example below, we create two different strings. One is empty and the other contains only spaces. The user can see in the output that our logic shows that both strings are empty since the second string only contains spaces.
<html>
<body>
<h3> Using the<i> string.trim() method and string.length() </i> property to check whether a string is null, undefined, or empty. </h3>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let string1 = "";
let string2 = " ";
string1 = string1.trim();
string2 = string2.trim();
if (string1.length == 0) {
output.innerHTML += "The string1 is empty! </br>";
}
if (string2.length == 0) {
output.innerHTML += "The string2 is empty! </br>";
}
</script>
</body>
</html>
We can convert a string to a Boolean value using the Boolean constructor or the double negation operator (!!). When we convert any variable to boolean, it maps all false values to false and other values to true. In JavaScript, empty string, null and undefined are all false values, so when we convert it to a boolean value, the Boolean() constructor always returns false.
In the following syntax, we have used the Boolean() constructor to convert the string to a Boolean value and check if it is empty.
let string3 = undefined;
if (Boolean(string3) == false) {
// string3 is either null, empty, or undefined
}
We have converted three strings containing null, null and undefined values in the example below. Additionally, we have created the isValid() function which takes a string as parameter and converts the string into a boolean value. We then check whether the value of the string returned from the Boolean() constructor is true or false.
<html>
<body>
<h3> Converting the<i> string to boolean </i> to check whether a string is null, undefined, or empty. </h3>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
let str1 = "";
let str2 = null;
let str3 = undefined;
function isValid(str) {
if (Boolean(str)) {
output.innerHTML += "The " + str + " is valid <br/>";
} else {
output.innerHTML += "The " + str + " is not valid <br/>";
}
}
isValid(str1);
isValid(str2);
isValid(str3);
isValid("Hello");
</script>
</body>
</html>
In the above output, the user can observe that the Boolean constructor returns false for empty, null and undefined strings, and returns true for the string "Hello".
The strict equality operator allows us to compare the values of two variables and also compare the types of the variables. Here we will compare our string with "", null and undefined. Furthermore, we will use these three conditions together in a single if condition using the OR operator.
If any of these three conditions becomes true, it means that the string is invalid.
Users can use the strict equality operator according to the following syntax to check whether a string is empty, null or undefined.
if (str === "" || str === null || str === undefined) {
// string is not valid
} else {
// string is valid
}
In the following example, the isValid() function contains an if-else statement to check whether the string is valid. As discussed in the syntax, we have used the OR operator in the condition of the if statement to check the three conditions of empty string, null and undefined string simultaneously.
<html>
<body>
<h3> Using the<i> strict equality operator </i> to check whether string is null, undefined or empty.</h3>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
function isValid(str) {
if (str === "" || str === null || str === undefined) {
output.innerHTML += "The " + str + " is not valid <br/>";
} else {
output.innerHTML += "The " + str + " is valid <br/>";
}
}
isValid(null);
isValid(undefined);
isValid("TutorialsPoint");
</script>
</body>
</html>
Users learned three ways to check if a string is empty, undefined, or has a null value. From these three methods, the best method is the second method, which uses the Boolean() constructor.
However, users can use the Doble, Not(!!) operator, which provides simple syntax but is not suitable for beginners.
The above is the detailed content of How to check for null/undefined/empty string in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
