JavaScript | 基礎構文：文字列操作 – トリミング

トリミングを一言でいうと

トリミングは、
「文字列の前後にくっついている、いらない空白（スペースや改行など）を取り除くこと」 です。

ユーザー入力やファイルから読んだ文字列には、よく

• 先頭にスペース
• 行末にスペース
• 最後に改行

などの“見えにくいゴミ”が紛れ込みます。

JavaScript では、それを消すために主に次のメソッドを使います。

• trim()：前後の空白を両方削る
• trimStart() / trimLeft()：先頭側だけ削る
• trimEnd() / trimRight()：末尾側だけ削る

ここが重要です。
トリミングは「文字列の中身を変える」操作ではなく、「前後の余計な空白をそぎ落として、本当に意味のある部分だけを残す」ための操作 です。
入力チェック・比較・保存の前処理として、かなり頻繁に使います。

trim の基本：前後の空白をまとめて削る

trim() の基本的な動き

trim() は、
文字列の先頭と末尾にある空白文字をすべて取り除いた“新しい文字列”を返します。

const raw = "   hello world   ";

const trimmed = raw.trim();

console.log("[" + raw + "]");     // "[   hello world   ]"
console.log("[" + trimmed + "]"); // "[hello world]"

const raw = "   hello world   ";

const trimmed = raw.trim();

console.log("[" + raw + "]");     // "[   hello world   ]"
console.log("[" + trimmed + "]"); // "[hello world]"

raw には、前にスペースが 3 個、後ろにスペースが 3 個付いています。
trim() をかけると、それらが全て削られます。

削られるのはスペースだけじゃない

trim() が削るのは、通常のスペース " " だけではありません。
タブ \t や改行 \n など、いわゆる「空白文字」「ホワイトスペース」と呼ばれるものが対象です。

const raw = "\n\t hello \t\n";

const trimmed = raw.trim();

console.log("[" + raw + "]");     // 見た目では分かりにくいが、前後に改行・タブがある
console.log("[" + trimmed + "]"); // "[hello]"

const raw = "\n\t hello \t\n";

const trimmed = raw.trim();

console.log("[" + raw + "]");     // 見た目では分かりにくいが、前後に改行・タブがある
console.log("[" + trimmed + "]"); // "[hello]"

文字列の中間にあるスペースや改行はそのまま残ります。
削られるのはあくまで「先頭」と「末尾」の空白だけです。

ここが重要です。
trim は「周囲を削ぎ落とす」イメージ。
真ん中の空白や改行には手を出さない。
だから、「文字列の形そのものは変えずに、余計な“くっつき”だけを落とせる」というわけです。

なぜトリミングが必要なのか：よくあるトラブル

目に見えない空白で一致比較に失敗する

例えば、ユーザーがフォームに "hello" と入力したつもりでも、
実際には "hello "（最後にスペース付き）になっていることがあります。

const input = "hello ";
const target = "hello";

console.log(input === target); // false

const input = "hello ";
const target = "hello";

console.log(input === target); // false

見た目では同じように見えるのに、
実際には 1 文字分違うので一致しません。

trim() してから比較すると、こうなります。

const input = "hello ";
const target = "hello";

console.log(input.trim() === target); // true

const input = "hello ";
const target = "hello";

console.log(input.trim() === target); // true

ファイルやコピー＆ペースト由来の改行・スペース

テキストファイルやコピー＆ペーストで取ってきた文字列は、
末尾に余計な改行やスペースが紛れ込んでいることが多いです。

ログの 1 行
コンマ区切りのデータ
メールアドレス

などを扱うとき、

「先頭・末尾に混ざった空白のせいで、見た目と値が一致しない」

というトラブルは非常によく起こります。

ここが重要です。
比較・保存・検索など、「文字列の“意味”だけを見たい場面」では、
まず trim() で前後のノイズを削り落としてから処理する、というのが基本パターンです。

trimStart / trimEnd：片側だけトリミングする

trimStart() / trimLeft()：先頭の空白だけ削る

trimStart() は、
文字列の「先頭側」の空白だけを削ります。

const raw = "   hello   ";

const leftTrimmed = raw.trimStart();

console.log("[" + leftTrimmed + "]"); // "[hello   ]"

const raw = "   hello   ";

const leftTrimmed = raw.trimStart();

console.log("[" + leftTrimmed + "]"); // "[hello   ]"

末尾のスペースはそのままです。

歴史的な理由で、trimLeft() という別名もありますが、
最近のコードでは trimStart() を使うのが主流です。

trimEnd() / trimRight()：末尾の空白だけ削る

trimEnd() は、
文字列の「末尾側」の空白だけを削ります。

const raw = "   hello   ";

const rightTrimmed = raw.trimEnd();

console.log("[" + rightTrimmed + "]"); // "[   hello]"

const raw = "   hello   ";

const rightTrimmed = raw.trimEnd();

console.log("[" + rightTrimmed + "]"); // "[   hello]"

先頭のスペースはそのままです。

こちらも、古い名前として trimRight() がありますが、
基本は trimEnd() を覚えておけば十分です。

どれをいつ使うかのイメージ

• どっちもいらない → trim()
• 先頭の空白だけ消したい → trimStart()
• 末尾の空白だけ消したい → trimEnd()

例えば、

「改行コード付きのログで、行末のスペースだけを消したい」
「先頭側にだけタブが入っているデータをきれいにしたい」

といったケースで、片側トリミングが活躍します。

ここが重要です。
「左右どちらを削るか」を選べることで、
「意味のある空白（たとえば末尾のインデント）を壊したくない」ような繊細な処理が書ける。
まずは trim() を基本にしつつ、「片側だけ削る選択肢もある」と覚えておくと応用が利きます。

文字列はイミュータブル：トリミング結果は「新しい文字列」

元の文字列は変わらない

trim / trimStart / trimEnd はすべて、
元の文字列をその場で書き換えません。

let text = "  hello  ";

const trimmed = text.trim();

console.log("[" + text + "]");    // "[  hello  ]"（元のまま）
console.log("[" + trimmed + "]"); // "[hello]"

let text = "  hello  ";

const trimmed = text.trim();

console.log("[" + text + "]");    // "[  hello  ]"（元のまま）
console.log("[" + trimmed + "]"); // "[hello]"

「text がトリミングされた」のではなく、
「text からトリミング済みの新しい文字列が返ってきた」 だけです。

上書きしたいなら、自分で代入しなおす

「この変数は、もうトリミング済みの値だけ持てばいい」
という場合は、こう書きます。

let input = "  hello  ";

input = input.trim();

console.log("[" + input + "]"); // "[hello]"

let input = "  hello  ";

input = input.trim();

console.log("[" + input + "]"); // "[hello]"

input が、新しい文字列を指すようになりました。

ここが重要です。
トリミング系メソッドは“文字列を「変える」”のではなく、「変えた結果を新しい文字列として返す」。
戻り値をちゃんと受け取らないと、「trim したつもりで何も変わっていない」というバグが起きます。

実用的なパターンでトリミングを使ってみる

入力チェック：空白だけの入力を「空」とみなす

ユーザーがスペースだけ入力して送信してくることがあります。

const rawInput = "   ";

if (rawInput.trim().length === 0) {
  console.log("実質的には何も入力されていません");
}

const rawInput = "   ";

if (rawInput.trim().length === 0) {
  console.log("実質的には何も入力されていません");
}

trim() で前後の空白を削ると、""（空文字）になり、length が 0 になります。

メールアドレスの前後の空白を無視する

const rawEmail = "  user@example.com  ";

const email = rawEmail.trim();

console.log("[" + email + "]"); // "[user@example.com]"

const rawEmail = "  user@example.com  ";

const email = rawEmail.trim();

console.log("[" + email + "]"); // "[user@example.com]"

保存や比較に使うのは email のほうにすべきです。

if (email === "user@example.com") {
  console.log("一致！");
}

if (email === "user@example.com") {
  console.log("一致！");
}

複数行のデータを行ごとにトリミングする

const text = `
  apple  
  banana 
  orange
`;

const lines = text.split("\n");
const cleaned = [];

for (const line of lines) {
  const trimmed = line.trim();
  if (trimmed.length > 0) {
    cleaned.push(trimmed);
  }
}

console.log(cleaned); // ["apple", "banana", "orange"]

const text = `
  apple  
  banana 
  orange
`;

const lines = text.split("\n");
const cleaned = [];

for (const line of lines) {
  const trimmed = line.trim();
  if (trimmed.length > 0) {
    cleaned.push(trimmed);
  }
}

console.log(cleaned); // ["apple", "banana", "orange"]

ここでは、

• split("\n") で行ごとに分ける
• 各行を trim() で前後トリミング
• 空行（中身が空の行）は捨てる

という処理をしています。

ここが重要です。
トリミングは、「入力を正規化する最初の一手」として非常に役立ちます。
空白の有無に左右されずに、純粋に“中身”だけを見れるようにするための前処理だと捉えてください。

初心者として本当に押さえてほしいポイント

trim() は「先頭と末尾の空白文字（スペース・改行など）を全部削った新しい文字列」を返す。
trimStart() / trimEnd() は、それぞれ片側だけを削る。

元の文字列は変わらないので、結果を変数に代入し直すか、その場で使う必要がある。

トリミングは、入力チェック（空白だけの入力を弾く）や比較（前後の空白の違いを無視したい）などで頻繁に使う。

空白を含む文字列を扱うときは、
「この空白は意味があるのか？ それとも単なるノイズか？」を考え、
ノイズなら最初に trim() してしまうとロジックがシンプルになる。

ここが重要です。
トリミングは地味ですが、「現実世界の“雑な文字列”を、プログラムで扱いやすい“きれいな文字列”に変えるための第一歩」です。
“比較や保存の前にとりあえず trim()” という習慣をつけるだけで、
「なんで一致しないの？」という文字列バグのかなりの部分を、未然に防げるようになります。

もし練習してみたくなったら、次のようなコードで遊んでみてください。

const inputs = [
  "hello",
  "  hello",
  "hello  ",
  "  hello  ",
  "   ",
];

for (const s of inputs) {
  console.log(
    "raw   : [" + s + "] (" + s.length + ")",
    "trim  : [" + s.trim() + "] (" + s.trim().length + ")"
  );
}

const inputs = [
  "hello",
  "  hello",
  "hello  ",
  "  hello  ",
  "   ",
];

for (const s of inputs) {
  console.log(
    "raw   : [" + s + "] (" + s.length + ")",
    "trim  : [" + s.trim() + "] (" + s.trim().length + ")"
  );
}

raw と trim の違い、length の変化を見ていくと、
「どこにどんな空白があって、それが trim でどう処理されるのか」がかなり感覚的に分かってくるはずです。