JavaScript Tips | 文字列ユーティリティ：整形 － trim

JavaScript JavaScript
スポンサーリンク

trim は「余計な空白をきれいに落とす」道具

まずイメージからいきましょう。
ユーザーがフォームにこう入力したとします。

" 山田太郎 "（前後にスペース付き）

見た目は同じ「山田太郎」でも、実際の文字列としては別物です。
このまま比較すると、

"山田太郎" === " 山田太郎 " は false

になってしまいます。

ここで使うのが trim です。
「文字列の前後にくっついている空白（スペースや改行）を削る」
それが trim の役割です。

JavaScript 標準の String.prototype.trim の基本

いちばんシンプルな使い方

JavaScript には、最初から trim メソッドが用意されています。

const raw = "   Hello World   ";
const trimmed = raw.trim();

console.log(raw);     // "   Hello World   "
console.log(trimmed); // "Hello World"
JavaScript

ポイントはとてもシンプルです。

文字列の「先頭」と「末尾」にある空白文字を削る
「途中の空白」はそのまま残す

という動きをします。

"  A  B  C  ".trim(); // "A  B  C"
JavaScript

真ん中のスペースは消えません。
「前後だけ」というのが大事なところです。

どんな「空白」が対象になるのか

半角スペースだけじゃない

trim が削ってくれるのは、半角スペース " " だけではありません。

タブ \t
改行 \n
復帰 \r
その他、Unicode で「空白」とされるもの

など、「空白っぽいもの」全般が対象です。

例えばこんな文字列でも：

const s = "\n\t  山田太郎  \r\n";
console.log(s.trim()); // "山田太郎"
JavaScript

前後の改行・タブ・スペースが全部きれいに落ちます。

業務でありがちなのは、

CSV や TSV を読み込んだときに、値の前後に謎の空白がついている
コピー＆ペーストした値に改行が混ざっている

といったケースです。
trim を一発かけるだけで、かなりの「変な入力」がまともになります。

業務でよくある trim の使いどころ

フォーム入力の前処理

ユーザーが入力した値をそのまま保存・比較すると、
「スペースの有無」で意図しない差が出ます。

const input = "  yamada@example.com  ";

if (input === "yamada@example.com") {
  // ここには来ない
}
JavaScript

これを避けるために、
「まず trim してから扱う」というのを習慣にします。

const rawEmail = "  yamada@example.com  ";
const email = rawEmail.trim();

if (email === "yamada@example.com") {
  // ここに来る
}
JavaScript

ログイン ID、メールアドレス、名前、検索キーワードなど、
「前後の空白に意味がない」入力は、基本的に全部 trim してから使うと安全です。

比較・バリデーションの前に必ず trim

例えば、「必須入力チェック」をするときも、
trim してから判定しないと危険です。

const name = "   "; // スペースだけ

if (name === "") {
  console.log("未入力と判定されない…");
}
JavaScript

これをこう変えます。

const name = "   ";
const trimmedName = name.trim();

if (trimmedName === "") {
  console.log("未入力として扱える");
}
JavaScript

「空白だけの入力を“未入力”として扱う」
これは業務システムではほぼ必須の振る舞いです。
trim を使うと、これが簡単に実現できます。

自前ユーティリティとして wrap する意味

直接 trim を呼ぶのではなく、一段かませる

そのまま str.trim() を使ってもいいのですが、
業務コードでは小さなユーティリティにしておくと後々楽です。

function trimString(value) {
  if (value == null) {
    return "";
  }
  return String(value).trim();
}
JavaScript

このユーティリティのポイントは、

null や undefined が来ても落ちない
数値などが来ても文字列に変換してから trim する

という「防御的な動き」を一箇所に閉じ込めていることです。

使い方はこうです。

trimString("  abc  ");   // "abc"
trimString(null);        // ""
trimString(123);         // "123"
trimString(undefined);   // ""
JavaScript

フォームの値や API のレスポンスなど、
「型がちょっと怪しい」ものに対しても安心して使えます。

trim の「やりすぎ注意ポイント」

何でもかんでも trim すればいいわけではない

便利だからといって、
全ての文字列に無条件で trim をかけるのは危険な場合もあります。

例えば：

パスワード（前後のスペースも含めて意味がある場合がある）
意図的に前後にスペースを含めた文字列（プレーンテキストのレイアウトなど）

こういったものは、勝手に trim すると意味が変わってしまいます。

なので、設計としてはこう考えるとバランスが良いです。

ユーザー入力で「前後の空白に意味がないもの」 → 積極的に trim
システム内部で意味を持つ文字列 → むやみに trim しない

「どの値に trim をかけるか」を明確に決める
これも業務コードでは大事な設計の一部です。

小さな練習で感覚をつかむ

コンソールでいくつか試してみてください。

"  山田  ".trim()
"\n\nabc\t  ".trim()
" A  B  C ".trim()
"   ".trim()
JavaScript

それぞれがどう変わるかを目で見て確認すると、
「前後だけ」「空白だけの文字列は空になる」という感覚がつかめます。

そのうえで、自分のプロジェクトに

export function trimString(value) { ... }
JavaScript

のようなユーティリティを一つ置いて、
「文字列を扱う前に“ここ”を通す」というルールにしてみてください。

それができた瞬間、あなたの文字列処理は
「なんとなく動いている」から
「意図を持って整形している」状態に一段レベルアップします。

スポンサーリンク
タイトルとURLをコピーしました