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

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

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

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

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

この記事を書いた人

• 現役のフルスタックエンジニアとして活躍中
• 開発チームリーダーとして複数プロジェクトをリード
• 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
• プログラミングスクールのカリキュラム執筆経験あり

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 を身に付けてエンジニアになるには何をすればいい？
• 何から勉強すればいいんだろう？
• 効率よく勉強するには？

JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？

Muscle Coding

【初心者向け】JavaScriptの勉強法3選を現役エンジニアが比較・解説！ | Muscle Coding JavaScriptの効果的な学習方法を現役エンジニアが解説！本、動画教材（Udemy）、プログラミングスクールの特徴を比較し、最適な方法を提案します。初心者でも理解しやすい…