JavaScriptのtrimメソッド | 前後の空白文字を削除して文字列を整形する使い方まとめ

JavaScriptには、文字列の前後にある空白文字を削除して整形するためのtrimメソッドがあります。

フォームなどでユーザー入力を受け付ける際に、余分なスペースを除去したい場面で役立ちます。

この記事では、trimメソッドの基本的な使い方から、削除対象となる空白文字の種類、使えない環境での代替案、応用的な使い方まで幅広く解説します。

コードサンプルを交えて丁寧に説明するので、JavaScriptの初心者の方も分かりやすいかと思います！

この記事を書いた人

• 未経験からWebエンジニアとして転職成功（年収 30% アップ）
• 現役のフルスタックエンジニアとして活躍中
• 開発チームリーダーとして複数プロジェクトをリード
• 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ

trimメソッドとは

trimメソッドは、文字列の先頭と末尾にある空白文字を取り除いた新しい文字列を返すJavaScriptのメソッドです。元の文字列は変更せず、空白文字を削除した文字列を新しく生成します。使い方は単純で、次のように文字列に対してtrimメソッドを呼び出すだけです。

const originalStr = "   abc   ";
const trimmedStr = originalStr.trim();
console.log(trimmedStr); // "abc"

このコードでは、originalStr変数には前後にスペースが含まれた文字列が代入されています。これに対してtrimメソッドを呼び出すことで、前後のスペースが除去され、trimmedStrには”abc”という文字列が代入されます。

ユーザーの入力値を処理する際などに、誤って空白文字が含まれていてもtrimメソッドで取り除けるので、データの整形や正規化に活用できます。

trimメソッドの削除対象となる空白文字

ここで、trimメソッドが取り除く“空白文字”には、どのようなものが含まれるのか確認しておきましょう。

ECMAScriptの仕様によると、trimメソッドが削除対象とする空白文字は次の4つのカテゴリに分類されます。

よく使われるスペースや改行だけでなく、ゼロ幅スペースなどの特殊な空白文字もトリムの対象となります。

そのため、目視では空白に見えない文字もtrimメソッドできれいに取り除くことができるのです。

ブラウザ環境によってはtrimメソッドが使えない場合がある

trimメソッドは比較的新しく追加されたメソッドで、古いブラウザ、特にInternet Explorer 9未満ではサポートされていません。

そのため、幅広いブラウザ対応が必要な場合は注意が必要です。

trimメソッドが使えない環境では、正規表現とreplaceメソッドを組み合わせることで同等の処理を実現できます。

const originalStr = "   abc   ";
const trimmedStr = originalStr.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
console.log(trimmedStr); // "abc"

この正規表現は、文字列の先頭（^）または末尾（$）にマッチする空白文字やゼロ幅スペース、改行などを空文字で置換することでトリム処理を実現しています。

全角スペースもtrimメソッドの削除対象

trimメソッドは、半角スペースだけでなく全角スペースの削除にも対応しています。

const originalStr = "　　abc　　";
const trimmedStr = originalStr.trim();
console.log(trimmedStr); // "abc"

ただし、ブラウザによっては全角スペースの削除に対応していない場合もあるため注意が必要です。幅広い環境で動作させたい場合は、先ほどの正規表現による方法を検討しましょう。

応用：任意の文字をトリムする

trimメソッドをベースに、任意の文字を先頭や末尾から削除する汎用的な関数を作ることもできます。

function trimAnyChar(str, char) {
  const pattern = new RegExp("^["+char+"]+|["+char+"]+$", "g")
  return str.replace(pattern, "");
}

const originalStr = "///abc///";
const trimmedStr = trimAnyChar(originalStr, "/");
console.log(trimmedStr); // "abc"

この関数では、第2引数で受け取った任意の文字をもとに動的に正規表現パターンを生成し、先頭と末尾からその文字を削除しています。特定の記号などを除去したい場合に応用できるでしょう。

まとめ

JavaScriptのtrimメソッドについて、次のポイントを中心に解説しました。

trimメソッドを使いこなすことで、ユーザー入力の空白文字を簡単に整形でき、アプリケーションの利便性を高められます。ぜひ活用してみてください。

trimStart()とtrimEnd()メソッド

ECMAScript 2019で導入されたtrimStart()メソッドとtrimEnd()メソッドを使うと、文字列の片側だけ（先頭または末尾）の空白文字を削除することができます。

trimStart()は文字列の先頭にある空白文字のみを削除し、trimEnd()は文字列の末尾にある空白文字のみを削除します。使い方は次の通りです。

const originalStr = "   abc   ";
console.log(originalStr.trimStart()); // "abc   "
console.log(originalStr.trimEnd());   // "   abc"

これらのメソッドを使うことで、必要に応じて文字列の片側だけをトリムできるので便利です。
ただし、対応ブラウザに制限があるため、利用時は要注意です。

ブラウザや実行環境によるtrimメソッドの挙動の違い

基本的にはECMAScriptの仕様通りにtrimメソッドは動作しますが、実行環境によって挙動が異なる場合があることは覚えておきましょう。

ExecutionEnvironmentによってtrimメソッドの挙動に違いがある点には注意が必要ですが、基本的にはECMAScriptの仕様に準拠して実装されているので、学習内容をそのまま活かせます。

終わりに

この記事ではJavaScriptのtrimメソッドについて、初心者向けにポイントを絞って解説しました。

trimメソッドを使いこなすことで、空白文字を簡単に取り除けるのでフォームのユーザー入力のバリデーションなどに役立ちます。
コードの品質や保守性を高めるためにも、積極的に使っていきたいメソッドの一つです。

基本的な使い方とともに、ブラウザ対応の注意点、応用的な使い方も紹介しました。
ぜひ実際のコードに取り入れて、理解を深めていってください。

JavaScript を効率よく勉強するなら

この記事を読んでいる方は JavaScript の勉強を頑張っていることと思います！

しかし、JavaScript は学習範囲が広く、知識不足で苦労している方もいるかもしれませんね。

そんなときは本やプログラミングスクールを活用し、体系的な学習を検討してみてはいかがでしょうか？

Muscle Coding

【2024年5月】JavaScriptのおすすめプログラミングスクール7選！現役エンジニアが解説 | Muscle Coding JavaScriptを学べるプログラミングスクールの中でも特におすすめのスクールを現役エンジニアが詳しく解説します。料金、給付金、受講期間、サポート、チーム開発、など、各…

Muscle Coding

【2024年】JavaScript学習のおすすめ本 4 選を比較！教材のプロがレベル別に厳選 | Muscle Coding JavaScript学習に最適な本を徹底比較！初心者から上級者まで対応した教材をレベル別、新しさ、口コミなど選ぶポイントも解説。自分に合ったJavaScriptの教材を見つけましょ…