JavaScriptのtrim()の使い方と注意点

JavaScriptで文字列の前後にある余分な空白を取り除きたい場面は多くあります。その際に使用するのがtrim()です。フォーム入力の整形やデータ処理において、基本かつ重要なメソッドのひとつです。

本記事では、trim()の基本から具体的な使い方、注意点までを体系的に解説します。初学者でも実務レベルで使えるように、実行可能なコード例を交えて説明します。

trim()とは

trim()は、文字列の先頭と末尾の空白（スペース・改行・タブなど）を削除するメソッドです。

元の文字列を変更せず、新しい文字列を返す点も重要な特徴です。

基本構文

const newStr = str.trim();

trim()の基本的な使い方

前後の空白を削除する

const str = "  Hello World  ";
const result = str.trim();

console.log(result); // "Hello World"

このように、文字列の前後にある空白が削除されます。

trim()は単なるスペースだけでなく、以下のような空白も削除対象です。

• 半角スペース
• タブ（\t）
• 改行（\n）
• 全角スペース（一部環境依存あり）

const str = "\n\t  Hello World  \t\n";
const result = str.trim();

console.log(result); // "Hello World"

trim()は元の文字列を変更しない

JavaScriptの文字列は**イミュータブル（変更不可）**です。
そのため、trim()は元の文字列を直接変更せず、新しい文字列を返します。

const str = "  Hello  ";
str.trim();

console.log(str); // "  Hello  "

必要に応じて変数に再代入する必要があります。

let str = "  Hello  ";
str = str.trim();

console.log(str); // "Hello"

trimStart() / trimEnd()との違い

trim()は前後の空白を削除しますが、用途によっては片側だけ削除したい場合もあります。

trimStart()

const str = "  Hello  ";
console.log(str.trimStart()); // "Hello  "

trimEnd()

const str = "  Hello  ";
console.log(str.trimEnd()); // "  Hello"

trim()のよくある使用例

フォーム入力の整形

ユーザー入力の前後に不要な空白が含まれるケースは多いため、送信前に整形することが一般的です。

const input = "  sample@example.com  ";
const normalized = input.trim();

console.log(normalized); // "sample@example.com"

空文字チェックと組み合わせる

trim()はバリデーションと組み合わせて使われることも多いです。

const input = "   ";

if (input.trim() === "") {
  console.log("未入力です");
} else {
  console.log("入力があります");
}

trim()の注意点

文字列の途中の空白は削除されない

trim()は前後の空白のみ削除します。
文字列内部の空白はそのまま残ります。

const str = "  Hello   World  ";
const result = str.trim();

console.log(result); // "Hello   World"

内部の空白も削除したい場合は、replace()などを使用します。

const str = "  Hello   World  ";
const result = str.replace(/\s+/g, "");

console.log(result); // "HelloWorld"

※ 正規表現の詳細は
「JavaScriptの正規表現の基本と使い方」で解説しています。

nullやundefinedには使えない

trim()は文字列専用メソッドのため、nullやundefinedに対して使用するとエラーになります。

const value = null;

// value.trim(); // エラー

安全に処理するには、型チェックを行います。

const value = null;

const result = typeof value === "string" ? value.trim() : "";

console.log(result); // ""

数値には使えない

数値に対して直接trim()を使うことはできません。

const num = 123;

// num.trim(); // エラー

文字列に変換してから使用します。

const num = 123;
const result = String(num).trim();

console.log(result); // "123"

他の文字列メソッドとの組み合わせ

trim()は他の文字列操作と組み合わせることで、より柔軟な処理が可能になります。

split()との組み合わせ

const str = "  apple, banana, orange  ";
const result = str.trim().split(",");

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

さらに各要素の空白を削除する場合は、map()と組み合わせます。

const str = "  apple, banana, orange  ";
const result = str
  .trim()
  .split(",")
  .map(item => item.trim());

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

※ split()の詳細は
「JavaScriptのsplit()の使い方と活用方法」で解説しています。

まとめ

• trim()は文字列の前後の空白を削除するメソッド
• 元の文字列は変更されず、新しい文字列が返される
• trimStart()・trimEnd()で片側のみの削除も可能
• フォーム入力やデータ整形で頻出
• 文字列以外には使えないため型チェックが重要

関連記事

• JavaScriptの文字列とは？基本と使い方を解説
• JavaScriptのreplace()の使い方と活用方法
• JavaScriptの正規表現の基本と使い方
• JavaScriptのsplit()の使い方と活用方法