JavaScript文字列のトリムの基本と実践
文字列の前後にある余分な空白や改行を取り除くときは trim を使います。元の文字列は変えず、前後のホワイトスペースだけを除いた新しい文字列を返します。
構文と意味
const trimmed = s.trim(); // 前後の空白・改行などを除去
const left = s.trimStart(); // 先頭だけ除去（別名：trimLeft）
const right = s.trimEnd(); // 末尾だけ除去（別名：trimRight）
- 返り値: 前後のホワイトスペースを除いた新しい文字列。元の文字列はそのまま。
- 対象の文字: スペースやタブ、改行などのホワイトスペースが対象です。
すぐ使えるテンプレート集
基本：前後の空白を削る
const s = " Hello World ";
console.log(s.trim()); // "Hello World"
- ポイント: 先頭と末尾の空白だけが消えます。中間の空白は保持されます。
改行やタブを含む入力を整形
const s = "\n\t Aki \t\n";
console.log(s.trim()); // "Aki"
- ポイント: 改行やタブなどのホワイトスペースも対象です。
先頭だけ・末尾だけを削る
const s = " hello ";
console.log(s.trimStart()); // "hello "
console.log(s.trimEnd()); // " hello"
- ポイント: 必要に応じて片側だけ削るときに使います。
入力フォームのクリーニング（空判定込み）
const input = " Tokyo ";
const cleaned = input.trim();
const isEmpty = cleaned === "";
- ポイント: 余分な空白を除いてから空文字判定をすると安全です。
配列の各要素をトリムしてから結合
const parts = [" Aki", "Mao ", " Ren "];
const joined = parts.map(x => x.trim()).join(", ");
console.log(joined); // "Aki, Mao, Ren"
- ポイント: 文字列配列は map で要素ごとに整形してから使います。
正規表現で拡張（全角スペース対応など）
trim は全角スペース（例：全角空白 “ ”）を削らないことがあります。日本語テキストでは全角空白を明示的に扱うと安心です。
// 前後の半角・全角空白をまとめて削る
const s = " Hello ";
const trimmedJP = s.replace(/^[\s\u3000]+|[\s\u3000]+$/g, "");
console.log(trimmedJP); // "Hello"
- ポイント:
/\u3000/は全角スペース。前後いずれかの連続空白を除去します。
よくある落とし穴と対策
- 中間の空白は消えない: trim は「前後のみ」。中間の連続空白を整えたいなら置換を使います（例：
s.replace(/\s+/g, " ")）。 - null/undefinedに対して呼ぶとエラー: 文字列だけが対象。呼ぶ前に typeof チェックやデフォルト値で保護します。
- 全角スペースの見落とし: 日本語テキストでは全角空白が混じることがあるため、正規表現で全角も対象にするのが実務的です。
- 元の文字列は変わらない: 新しい文字列が返るので、変数へ代入して使います。
実務で便利なパターン
入力の一括整形ユーティリティ
function sanitizeInput(s) {
if (typeof s !== "string") return "";
// 半角/全角の前後空白を除去し、連続空白を1つに
return s
.replace(/^[\s\u3000]+|[\s\u3000]+$/g, "")
.replace(/\s+/g, " ");
}
- ポイント: 前後の空白を削ってから、内部の連続空白も1つにまとめると検索や比較に強くなります。
CSVセルの軽い整形（厳密なCSVは専用パーサ推奨）
const row = " Aki , 22 , Tokyo ";
const cols = row.split(",").map(c => c.trim());
console.log(cols); // ["Aki", "22", "Tokyo"]
- ポイント: 列ごとに trim して余分な空白を除去。厳密なクォート対応は専用パーサを使います。
練習問題（手を動かして覚える）
- 前後の空白と改行を除去:
const s = " \n Hello \t ";
console.log(s.trim()); // "Hello"
- 配列の文字列をトリムして結合:
const names = [" Aki", "Mao ", " Ren "];
console.log(names.map(n => n.trim()).join(" / ")); // "Aki / Mao / Ren"
- 全角スペースも含めてトリム:
const jp = " Tokyo ";
console.log(jp.replace(/^[\s\u3000]+|[\s\u3000]+$/g, "")); // "Tokyo"
直感的な指針
- 前後だけ削るなら: trim / trimStart / trimEnd。
- 日本語テキストで全角空白も削りたい: 正規表現で
\u3000を含める。 - 配列やCSVなどは: 分割後に map で個々の要素へ trim。