【JavaScript】空文字列の判定方法｜length・真偽値・厳密比較・trim()・TypeScript型ガードまで完全解説

この記事で学べること

• 空文字列とは何か（""、''、``）
• length === 0 での判定方法
• 真偽値判定（if (!str)）の仕組みと注意点
• === "" での厳密比較
• null / undefined との違いと安全な判定
• trim()で空白文字だけの文字列を判定する方法
• Optional Chaining（?.length）を使った安全なアクセス
• 各判定方法の比較テーブル
• ユーティリティ関数（isEmpty / isBlank）の実装
• TypeScriptでの型ガード
• フォームバリデーションでの実践活用
• Falsy値一覧とよくある落とし穴

// ダブルクォート
const str1 = "";

// シングルクォート
const str2 = '';

// テンプレートリテラル（バッククォート）
const str3 = ``;

// すべて同じ空文字列
console.log(str1 === str2); // true
console.log(str2 === str3); // true
console.log(str1.length);   // 0
console.log(typeof str1);   // "string"

実行結果

true
true
0
string

ポイント：どの引用符で作成しても同じ空文字列です。typeof は "string" を返し、length は 0 です。空文字列は null や undefined とはまったく異なるデータです。

const str = "";

// 空文字列の判定
if (str.length === 0) {
  console.log("文字列は空です");
}

// 空でないことの確認
const name = "JavaScript";
if (name.length > 0) {
  console.log("文字列は空ではありません");
}

// 具体的な長さのチェックにも応用可能
const password = "abc";
if (password.length >= 8) {
  console.log("パスワードの長さはOKです");
} else {
  console.log("パスワードは8文字以上にしてください");
}

実行結果

文字列は空です
文字列は空ではありません
パスワードは8文字以上にしてください

注意：lengthプロパティは文字列が確実に存在する場合に使いましょう。nullやundefinedに対して.lengthを呼ぶとTypeErrorが発生します。

const str = "";

// NOT演算子で空文字列を判定
if (!str) {
  console.log("文字列は空（またはfalsy）です");
}

// 文字列が存在するかチェック
const name = "JavaScript";
if (name) {
  console.log(`名前は ${name} です`);
}

// Boolean() で明示的に変換
console.log(Boolean(""));        // false
console.log(Boolean("hello"));   // true
console.log(Boolean(" "));      // true（スペース1つでもtrue！）

実行結果

文字列は空（またはfalsy）です
名前は JavaScript です
false
true
true

注意：!str は空文字列だけでなく、null、undefined、0、NaN、false もすべてtrueになります。空文字列だけを判定したい場合は厳密比較（=== ""）を使いましょう。

const empty = "";
const space = " ";
const text  = "hello";
const zero  = 0;
const nul   = null;

// 厳密比較 ===
console.log(empty === "");  // true
console.log(space === "");  // false（スペースは空文字列ではない）
console.log(text === "");   // false
console.log(zero === "");   // false（型が違う）
console.log(nul === "");    // false（型が違う）

// 緩い比較 == との違い（非推奨）
console.log(zero == "");    // true! 型変換が起きる
console.log(false == "");   // true! 型変換が起きる
console.log(nul == "");     // false（null は特別）

実行結果

true
false
false
false
false
true
true
false

ポイント：緩い比較 == では 0 == "" や false == "" が true になってしまいます。空文字列の判定では必ず ===（厳密比較）を使いましょう。

const empty     = "";
const nullVal   = null;
let   undefVal;  // undefined

// typeof の違い
console.log(typeof empty);    // "string"
console.log(typeof nullVal);  // "object" （JavaScriptの歴史的バグ）
console.log(typeof undefVal); // "undefined"

// 厳密比較（型も含めて比較）
console.log(empty === null);      // false
console.log(empty === undefined); // false
console.log(null === undefined);  // false

// 緩い比較
console.log(empty == null);      // false
console.log(null == undefined);   // true （この2つだけ緩い比較でtrue）

// 真偽値判定ではすべてfalsy
console.log(!empty);    // true
console.log(!nullVal);  // true
console.log(!undefVal); // true

実行結果

string
object
undefined
false
false
false
false
true
true
true
true

const spaceOnly = "   ";     // スペースだけ
const tabOnly   = "\t\t";    // タブだけ
const mixed     = " \n \t ";  // 空白文字のみ
const withText  = "  hello  ";

// trim() で前後の空白を除去してから判定
console.log(spaceOnly.trim() === "");  // true
console.log(tabOnly.trim() === "");    // true
console.log(mixed.trim() === "");      // true
console.log(withText.trim() === "");   // false

// trim() + length の組み合わせ
console.log(spaceOnly.trim().length === 0); // true

// trim() + 真偽値判定
if (!spaceOnly.trim()) {
  console.log("空白のみです");
}

実行結果

true
true
true
false
true
空白のみです

trim() の仲間

• trim() – 前後の空白を除去
• trimStart() / trimLeft() – 先頭の空白のみ除去
• trimEnd() / trimRight() – 末尾の空白のみ除去

function checkLength(str) {
  // str が null/undefined でもエラーにならない
  console.log(str?.length);
}

checkLength("hello");    // 5
checkLength("");         // 0
checkLength(null);       // undefined（エラーにならない！）
checkLength(undefined);  // undefined

// 実用的なパターン：Optional Chaining + 厳密比較
function isEmpty(str) {
  return str?.length === 0;
}

console.log(isEmpty(""));        // true
console.log(isEmpty("hello"));   // false
console.log(isEmpty(null));      // false（undefined === 0 は false）
console.log(isEmpty(undefined)); // false

// Optional Chaining + trim()
function isBlankSafe(str) {
  return !str?.trim();
}

console.log(isBlankSafe(""));      // true
console.log(isBlankSafe("  "));    // true
console.log(isBlankSafe(null));    // true
console.log(isBlankSafe("hello")); // false

実行結果

5
0
undefined
undefined
true
false
false
false
true
true
true
false

注意：.length や .trim() は文字列にのみ使えるメソッドです。null、undefined、数値、真偽値に直接使うとTypeErrorになります。Optional Chaining（?.）を使えば安全にアクセスできます。

/**
 * 値が空文字列かどうかを判定する
 * null/undefined は false を返す（空文字列ではない）
 * @param {*} value - 判定する値
 * @returns {boolean}
 */
function isEmpty(value) {
  return value === "";
}

// テスト
console.log(isEmpty(""));        // true
console.log(isEmpty(" "));       // false（スペースは空文字列ではない）
console.log(isEmpty("hello"));   // false
console.log(isEmpty(null));      // false
console.log(isEmpty(undefined)); // false
console.log(isEmpty(0));         // false

/**
 * 値が「実質的に空」かどうかを判定する
 * null, undefined, 空文字列, 空白のみの文字列 → true
 * @param {*} value - 判定する値
 * @returns {boolean}
 */
function isBlank(value) {
  return value == null || String(value).trim() === "";
}

// テスト
console.log(isBlank(""));        // true
console.log(isBlank("  "));      // true
console.log(isBlank("\t\n"));    // true
console.log(isBlank(null));      // true
console.log(isBlank(undefined)); // true
console.log(isBlank("hello"));   // false
console.log(isBlank(0));         // false（"0" は空白ではない）

実行結果

true
false
false
false
false
false
---
true
true
true
true
true
false
false

// 否定版も用意しておくと読みやすい
function isNotEmpty(value) {
  return typeof value === "string" && value.length > 0;
}

function isNotBlank(value) {
  return typeof value === "string" && value.trim().length > 0;
}

// 使用例
const users = ["Alice", "", "  ", "Bob", null];

// 空でない名前だけフィルタリング
const validNames = users.filter(isNotBlank);
console.log(validNames); // ["Alice", "Bob"]

実行結果

["Alice", "Bob"]

// Branded Type で「空でない文字列」を型として表現
type NonEmptyString = string & { readonly __brand: "NonEmptyString" };

// 型ガード関数
function isNonEmpty(value: string | null | undefined): value is NonEmptyString {
  return typeof value === "string" && value.length > 0;
}

// 使用例
function greet(name: string | null) {
  if (isNonEmpty(name)) {
    // ここでは name は NonEmptyString 型
    console.log(`Hello, ${name}!`);
  } else {
    console.log("名前が入力されていません");
  }
}

greet("Alice"); // Hello, Alice!
greet("");      // 名前が入力されていません
greet(null);    // 名前が入力されていません

// 空白文字を含めた判定の型ガード
function isNotBlank(value: string | null | undefined): value is string {
  return typeof value === "string" && value.trim().length > 0;
}

// 配列から空文字列やnullを除外
const inputs: (string | null)[] = ["Alice", "", null, "  ", "Bob"];

// filter + 型ガードで string[] 型が得られる
const validNames: string[] = inputs.filter(isNotBlank);
console.log(validNames); // ["Alice", "Bob"]

実行結果

Hello, Alice!
名前が入力されていません
名前が入力されていません
---
["Alice", "Bob"]

ポイント：TypeScriptの型ガードを使うと、filterの結果が (string | null)[] ではなく string[] として正しく推論されます。型安全なコードを書くために積極的に活用しましょう。

/**
 * フォームの入力値をバリデーションする
 * @param {Object} formData - フォームデータ
 * @returns {Object} { isValid, errors }
 */
function validateForm(formData) {
  const errors = {};

  // 名前：空白のみは不可
  if (!formData.name?.trim()) {
    errors.name = "名前を入力してください";
  }

  // メール：空でないこと + 形式チェック
  if (!formData.email?.trim()) {
    errors.email = "メールアドレスを入力してください";
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
    errors.email = "正しいメールアドレスを入力してください";
  }

  // パスワード：空チェック + 最低文字数
  if (formData.password === "" || formData.password == null) {
    errors.password = "パスワードを入力してください";
  } else if (formData.password.length < 8) {
    errors.password = "パスワードは8文字以上にしてください";
  }

  return {
    isValid: Object.keys(errors).length === 0,
    errors
  };
}

// テスト
const result1 = validateForm({
  name: "田中太郎",
  email: "tanaka@example.com",
  password: "mypassword123"
});
console.log(result1);
// { isValid: true, errors: {} }

const result2 = validateForm({
  name: "  ",
  email: "",
  password: "abc"
});
console.log(result2.errors);

実行結果

{ isValid: true, errors: {} }
{
  name: "名前を入力してください",
  email: "メールアドレスを入力してください",
  password: "パスワードは8文字以上にしてください"
}

// 空文字列にデフォルト値を設定するパターン

// 論理OR演算子（空文字列もfalsyなので置き換わる）
const name1 = "" || "ゲスト";
console.log(name1); // "ゲスト"

// Null合体演算子（空文字列はそのまま、null/undefinedだけ置き換え）
const name2 = "" ?? "ゲスト";
console.log(name2); // ""（空文字列はnullishではない）

const name3 = null ?? "ゲスト";
console.log(name3); // "ゲスト"

// 使い分け: 空文字列を有効値として扱いたいなら ??、置き換えたいなら ||

実行結果

ゲスト

ゲスト

// すべてのfalsy値を確認
const falsyValues = [false, 0, -0, 0n, "", null, undefined, NaN];

falsyValues.forEach(value => {
  console.log(`${String(value).padEnd(12)} → Boolean: ${Boolean(value)}`);
});

// 注意：以下はfalsyに見えるがtruthy
console.log(Boolean("0"));       // true!（文字列の"0"はtruthy）
console.log(Boolean("false"));   // true!（文字列の"false"はtruthy）
console.log(Boolean(" "));       // true!（スペースだけでもtruthy）
console.log(Boolean([]));        // true!（空配列はtruthy）
console.log(Boolean({}));        // true!（空オブジェクトはtruthy）

実行結果

false        → Boolean: false
0            → Boolean: false
0            → Boolean: false
0            → Boolean: false
             → Boolean: false
null         → Boolean: false
undefined    → Boolean: false
NaN          → Boolean: false
---
true
true
true
true
true

const userInput = "   "; // ユーザーがスペースだけ入力

// NG: 空文字列とは判定されない
if (userInput === "") {
  console.log("空です");     // 実行されない！
}

// OK: trim() で空白を除去してから判定
if (userInput.trim() === "") {
  console.log("空です");     // 実行される
}

// 緩い比較 == の罠
console.log(0 == "");      // true（数値0と空文字列が等しいと判定！）
console.log(false == "");  // true（falseと空文字列が等しいと判定！）
console.log(null == "");   // false（nullだけは例外）

// 厳密比較 === を使えば安全
console.log(0 === "");     // false
console.log(false === ""); // false

let value = null;

// NG: TypeError: Cannot read properties of null
// if (value.length === 0) { ... }

// OK: Optional Chaining を使う
if (value?.length === 0) {
  console.log("空です");
}

// OK: typeof で事前チェック
if (typeof value === "string" && value.length === 0) {
  console.log("空です");
}

// ユーザーが意図的に空文字列を設定した場合
const config = { title: "" };

// || は空文字列をfalsyとして扱い、デフォルト値に置き換える
const title1 = config.title || "デフォルトタイトル";
console.log(title1); // "デフォルトタイトル"（意図しない動作かも）

// ?? は null/undefined のみ置き換える（空文字列はそのまま）
const title2 = config.title ?? "デフォルトタイトル";
console.log(title2); // ""（空文字列がそのまま使われる）

実行結果

デフォルトタイトル

この記事のまとめ

• 空文字列 "" は長さ0の文字列であり、null/undefinedとは異なる
• === "" は空文字列だけを正確に判定する最もシンプルな方法
• !str は簡潔だが、null、undefined、0、falseもtrueになる
• str.length === 0 は明示的で、長さベースの条件分岐に発展できる
• trim()で空白文字だけの文字列も空として判定できる
• Optional Chaining（?.）でnull/undefinedでも安全にアクセス
• 実務ではisEmpty/isBlankのようなユーティリティ関数にまとめると保守性が上がる
• TypeScriptでは型ガードを使ってチェック後の型を自動的に絞り込める
• ||と??の違いを理解し、デフォルト値の設定で使い分ける
• フォームバリデーションではtrim()を必ず組み合わせる