Check if String is Empty JavaScript

To check if string is empty use the length property.

The length property returns the length of the string, if the string is empty, it will return 0.

let str = "";

if(str.length == 0) {
  console.log("String is empty");
}
else {
  console.log("String is not empty");
}

Table Of Contents

1. Checking for an Empty String
   1. Using the length Property
   2. Using the trim() Method
   3. Using Regular Expressions
2. Dealing with Whitespace Characters
   1. Removing Leading and Trailing Whitespace
   2. Removing All Whitespace
3. Best Practices for Checking Empty Strings
   1. Considering Null and Undefined Values
   2. Handling Different Data Types
4. Common Mistakes to Avoid
   1. Comparing to an Empty String Literally
   2. Forgetting to Account for Whitespace

1. Checking for an Empty String

When developing a JavaScript application, you may need to check if a string is empty or not.

There are several ways to check if a string is empty in JavaScript. The most common way is to use the length property, but there are other ways as well.

Let's take a look at them one by one.

1.1. Using the length Property

One of the simplest ways to check if a string is empty is to use the length property.

The length property returns the number of characters in a string. If the string is empty, it will return 0.

let str = "Hello, World!";

if(str.length == 0) {
  console.log("String is empty");
} else {
  console.log("String is not empty");
}

1.2. Using the trim() Method

The trim() method removes any leading and trailing whitespace from a string.

By using the trim() in conjunction with the length property, we can check if a string is empty or not even if it contains only whitespace characters.

const str = '   ';

if (str.trim().length === 0) {
    console.log('The string is empty.');
} else {
    console.log('The string is not empty.');
}

1.3. Using Regular Expressions

Regular expressions are a powerful tool for matching patterns in strings.

By using a regular expression, we can check if a string is empty by using a pattern that matches any character in the string.

const str = 'Hello, World!';

if (/^.*$/.test(str)) {
    console.log('The string is not empty.');
} else {
    console.log('The string is empty.');
}

2. Dealing with Whitespace Characters

Whitespace characters are characters that are used to separate words in a string.

Whitespace characters include spaces, tabs, and newlines.

When checking if a string is empty, it is important to account for whitespace characters.

For example, if a string contains only whitespace characters, it should be considered empty.

2.1. Removing Leading and Trailing Whitespace

When a user input is received, it is often necessary to remove any leading and trailing whitespace and check if the string is empty.

This ensures that the user input is valid and does not contain any whitespace characters.

The trim() method can be used to remove leading and trailing whitespace from a string.

After removing the whitespace, we can check if the string is empty using the length property.

const userInput = '   Hello, World!   ';

const trimmedInput = userInput.trim();

if (trimmedInput.length === 0) {
    console.log('The string is empty.');
} else {
    console.log('The string is not empty.');
}

2.2. Removing All Whitespace

In some special need you may want to remove all whitespace characters from a string.

This can be done by using the replace() method with a regular expression.

The regular expression /\s/g matches all whitespace characters in a string.

const str = 'Hello,   World!';

const stringWithoutWhitespace = str.replace(/\s/g, '');

if (stringWithoutWhitespace.length === 0) {
    console.log('The string is empty.');
} else {
    console.log('The string is not empty.');
}

3. Best Practice

When checking for empty strings in JavaScript, it's important to follow some best practices to ensure accurate results and maintain code reliability.

3.1. Considering Null and Undefined Values

In addition to empty strings, it's important to handle null and undefined values. These values are distinct from empty strings and may require separate checks.

// Check if a string is empty, null, or undefined
let str = null;

if (str === null || str === undefined || str.trim().length === 0) {
    console.log('The string is empty, null, or undefined.');
} else {
    console.log('The string is not empty, null, or undefined.');
}

3.2. Considering Non-String Values

When checking for empty strings, it's important to consider non-string values. These values are distinct from empty strings and may require separate checks.

For example, the toString() method can be used to convert a non-string value to a string.

4. Common Mistakes

When checking for empty strings, it's essential to avoid common mistakes that can lead to incorrect results. Here are two common pitfalls to watch out for: