JIYIK CN >

To check if a string is empty in React, access its length property and check if it is equal to 0, e.g. if (str.length === 0) {}if the length of the string is equal to 0, then the string is empty, otherwise it is not empty.

import {useEffect, useState} from 'react';

export default function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    if (typeof message === 'string' && message.length === 0) {
      console.log('string is empty');
    } else {
      console.log('string is NOT empty');
    }

    // 👇️ trim leading and trailing whitespace
    if (typeof message === 'string' && message.trim().length === 0) {
      console.log('string is empty');
    } else {
      console.log('string is NOT empty');
    }
  }, [message]);

  return (
    <div>
      <h2>String: {message}</h2>

      <button onClick={() => setMessage('Hello world')}>Set state</button>
    </div>
  );
}

The first ifstatement checks whether the message variable stores a value of type string and whether the string is empty.

If we consider an empty string consisting of only spaces, we can use trim()the method to remove any leading or trailing spaces before checking whether the string is empty.

const str = '   ';

if (typeof str === 'string' && str.trim().length === 0) {
  console.log('string is empty');
} else {
  console.log('string is NOT empty');
}

trim()Method removes leading and trailing spaces from a string. If the string contains only spaces, trim()returns an empty string.

To check whether a string is real and contains one or more characters, add the string to ifa statement.

const str = 'hello world';

if (str) {
  // 如果此代码块运行
  // 👉️ str 不是 "", undefined, null, 0, false, NaN
  console.log('string is truthy');
}

If the str variable is set to an empty string , undefined , null , 0 , false , or NaN , the code in the if block does not run.

Specifically, we can check if a string is equal to the empty string.

const str = '';

if (typeof str === 'string' && str !== '') {
  // 如果此代码块运行
  // 👉️ 字符串不为空
}

ifThe statement checks whether the str variable stores a value of type string and its value is not equal to the empty string.

This approach does not work for “”strings that contain spaces. In this case, we have to strip the spaces before checking if the string is empty.

const str = '      ';

if (typeof str === 'string' && str.trim() !== '') {
  // 如果此代码块运行
  // 👉️ 字符串不为空
}

trim()Method removes leading and trailing spaces, so ifthe block runs only if the str variable contains at least 1 character.