JavaScriptのtrimメソッドの使い方！文字列の前後から空白を除去

JavaScriptのtrimメソッドは、文字列の先頭（左側）と末尾（右側）から空白文字（ホワイトスペース）を取り除くために使用されます。

ユーザー入力の整形、データの前処理、比較の前に余分な空白を除去するなど、文字列操作においてよく利用される便利なメソッドです。
この記事では、trimメソッドの基本的な使い方、対象となる空白文字の種類、trimStart / trimEnd との違い、そして使用する際の注意点について解説します。

trimメソッドの基本的な構文

trimメソッドは、文字列オブジェクトのメソッドとして呼び出します。

const newString = originalString.trim();
  • originalString: 空白文字を除去したい元の文字列です。
  • newString: 先頭と末尾の空白文字が除去された新しい文字列が返されます。

trim メソッドは元の文字列を変更せず、新しい文字列を返します。

trimメソッドを使ってみる

実際にtrimメソッドを使って、動作を確認してみます。

例1：基本的な空白の除去

const text1 = "   Hello World   ";
const trimmedText1 = text1.trim();

console.log(`元の文字列: "${text1}"`);
console.log(`整形後の文字列: "${trimmedText1}"`);
// 出力:
// 元の文字列: "   Hello World   "
// 整形後の文字列: "Hello World"

text1変数には、前後に空白のある文字列が格納されています。
そしてtrimメソッドを使うことで、文字列の先頭と末尾にあったスペースが除去されています。

また、文字列の途中のスペースが保持されていることが確認できます。

例2：改行やタブが含まれるとき

trimメソッドは、スペースだけでなく、改行(\n)やタブ(\t)などの空白文字も除去します。

const text2 = "\n\t  JavaScript Trim Example  \n";
const trimmedText2 = text2.trim();

console.log(`元の文字列: "${text2}"`);
console.log(`整形後の文字列: "${trimmedText2}"`);
// 出力:
// 元の文字列: "
//    JavaScript Trim Example  
// "
// 整形後の文字列: "JavaScript Trim Example"

text2変数には、改行とタブが含まれた文字列が格納されています。
trimメソッドを使うことで、改行やタブが削除されたことが確認できました。

例3：文字列の前後に空白がないとき

文字列の先頭や末尾に空白がない場合でも、trimを呼び出すことはできます。
その場合、元の文字列と同じ内容の新しい文字列が返されます。

const text3 = "Already Trimmed";
const trimmedText3 = text3.trim();

console.log(`元の文字列: "${text3}"`);
console.log(`整形後の文字列: "${trimmedText3}"`);
// 出力:
// 元の文字列: "Already Trimmed"
// 整形後の文字列: "Already Trimmed"

text3変数は前後に空白のない文字列です。
その場合にtrimメソッドを使うと、そのままの文字列が返ってきます。

trimメソッドが除去する空白文字の種類

trimメソッドは、以下のUnicodeの空白文字（WhiteSpace プロパティを持つ文字）をすべて除去します。

  • スペース ()
  • タブ (\t)
  • 改行 (\n)
  • キャリッジリターン (\r)
  • フォームフィード (\f)
  • 垂直タブ (\v)
  • ノーブレークスペース (\xA0)
  • 各種Unicodeスペース文字 (例: \u2000 から \u200A までの一般句読点スペース、\u202F (狭いノーブレークスペース), \u205F (ミディアム数学スペース), \u3000 (全角スペース) など)

trimStart/trimEndメソッドとの違い

ES2019 (ECMAScript 2019) から、文字列の片側だけから空白を除去するメソッドが追加されました。

  • trimStart (または trimLeft): 文字列の先頭（左側）からのみ空白文字を除去します。
  • trimEnd (または trimRight): 文字列の末尾（右側）からのみ空白文字を除去します。

これらのメソッドも trim と同様に、元の文字列を変更せず、新しい文字列を返します。

const text = "   Example Text   ";

console.log(`元の文字列: "${text}"`);
console.log(`trim(): "${text.trim()}"`);         // "Example Text"
console.log(`trimStart(): "${text.trimStart()}"`); // "Example Text   "
console.log(`trimEnd(): "${text.trimEnd()}"`);     // "   Example Text"

trimメソッドを使う際の注意点

trimメソッドを使う際の注意点です。

新しい文字列を返す

trim は元の文字列を変更しない非破壊的なメソッドです。
結果を使用するには、戻り値を新しい変数に代入する必要があります。

文字列の途中は変更しない

文字列の途中にある空白（単語間のスペースなど）は trim の対象外です。
これらを除去したい場合は、replace() メソッドと正規表現を組み合わせる必要があります。
（例: str.replace(/\s+/g, ' ').trim() で複数の文字列中のスペースを1つにし、前後も整形）

数値への変換

Number関数や単項プラス演算子 (+) で文字列を数値に変換する際、前後の空白は自動的に無視されますが、trimを先に適用することでより安全かつ意図を明確にできます。

まとめ

JavaScriptのtrimメソッドは、文字列の先頭と末尾からあらゆる種類の空白文字を効率的に除去するための非常に便利な機能です。
ユーザー入力の整形、データのクリーニング、文字列の比較など、Web開発の多くの場面で不可欠なメソッドと言えます。

元の文字列を変更しない非破壊的なメソッドであること、そして trimStart / trimEndとの使い分けを理解して、trimメソッドを効果的に活用しましょう。

コメント