【JavaScript】trim の使い方｜文字列の空白を除去・trimStart / trimEnd・全角スペース対応・フォーム入力の正規化まで解説

const result = str.trim();
// 戻り値: 先頭と末尾の空白を除去した新しい文字列
// 元の文字列は変更されない

const str = "   Hello World   ";

console.log(str.trim());      // "Hello World"
console.log(str);             // "   Hello World   "（元は変わらない）

// タブ・改行も除去される
console.log("\t\n Hello \n\t".trim()); // "Hello"

const str = "   Hello   ";

console.log(str.trimStart()); // "Hello   "（先頭のみ除去）
console.log(str.trimEnd());   // "   Hello"（末尾のみ除去）
console.log(str.trim());      // "Hello"（両端除去）

const str = "\u3000Hello\u3000";
console.log(str.trim()); // "Hello"（全角スペースも除去される）

const str = "\u200BHello\u200B";

console.log(str.trim());        // "\u200BHello\u200B"（除去されない）
console.log(str.trim().length); // 7（見た目5文字だが7文字）

// 正規表現で除去
const cleaned = str.replace(/[\u200B-\u200D\uFEFF]/g, "").trim();
console.log(cleaned);        // "Hello"
console.log(cleaned.length); // 5

const str = "Hello    World   JavaScript";

const normalized = str.replace(/\s+/g, " ").trim();
console.log(normalized); // "Hello World JavaScript"

const str = " H e l l o ";

console.log(str.replace(/\s/g, "")); // "Hello"

const str = "Hello\u3000World\u3000JavaScript";

const unified = str.replace(/[\s\u3000]+/g, " ").trim();
console.log(unified); // "Hello World JavaScript"

const form = document.getElementById("myForm");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const name = form.querySelector("[name=username]").value.trim();
  const email = form.querySelector("[name=email]").value.trim().toLowerCase();

  if (!name) {
    alert("名前を入力してください");
    return;
  }

  // trim 済みの値でバリデーション・送信
  console.log({ name, email });
});

function isBlank(str) {
  return !str?.trim();
}

console.log(isBlank(""));       // true
console.log(isBlank("   "));    // true（スペースのみ）
console.log(isBlank("\t\n"));   // true（タブ+改行のみ）
console.log(isBlank(null));     // true
console.log(isBlank("Hello"));  // false

const csvRow = " apple , banana , cherry ";

// 分割して各要素を trim
const items = csvRow.split(",").map(item => item.trim());
console.log(items); // ["apple", "banana", "cherry"]

const text = "  line1  \n  line2  \n  line3  ";

const trimmedLines = text
  .split("\n")
  .map(line => line.trim())
  .filter(Boolean)  // 空行を除去
  .join("\n");

console.log(trimmedLines);
// "line1\nline2\nline3"

function normalizeSearchQuery(query) {
  return query
    .trim()                    // 前後の空白を除去
    .replace(/\s+/g, " ")     // 連続スペースを1つに
    .toLowerCase();            // 小文字に統一
}

console.log(normalizeSearchQuery("  JavaScript   Tutorial  "));
// "javascript tutorial"