JavaScriptのtrim()メソッド徹底解説：文字列の空白を削除する方法

JavaScriptのtrim()メソッドは、文字列の先頭と末尾にある空白文字を取り除きます。また、trimLeft()とtrimStart()は文字列の先頭の空白のみを、trimRight()とtrimEnd()は末尾の空白のみを削除します。

---

文字列の先頭や末尾から、スペース、タブ、改行などの不要な空白を削除したい場面はよくあります。たとえば、顧客名のリストを扱う場合、各名前の末尾に余計なスペースが入っていないか確認したいことがあるでしょう。

そんなときに役立つのがJavaScriptのtrim()関数です。trim()関数を使えば、文字列の先頭と末尾の空白文字を簡単に取り除けます。

trim()に関連するメソッドとして、以下の4つがあります。

• trimLeft()
• trimStart()
• trimRight()
• trimEnd()

この記事では、JavaScriptのtrim()関数の仕組みを解説し、trim()の代わりに、あるいは併用して使える4つの関連メソッドについても紹介します。

JavaScript trim()メソッドの基本

JavaScriptのtrim()メソッドは、文字列の先頭と末尾からすべての空白を削除します。trim()メソッドは新しい文字列を生成し、引数を受け取りません。このメソッドは、文字列の末尾にドット（.）で連結して呼び出します。

trim()メソッドの構文は次のとおりです。

var ourString = "Test    ";
ourString.trim();

このコードは、文字列の先頭と末尾からすべての空白を取り除きます。この例では空白が末尾にしか存在しないため、削除されるのは末尾の空白だけです。trim()が新しい文字列を返すのは、JavaScriptの文字列がイミュータブル（不変）であり、元の文字列を直接変更できないためです。

文字列の先頭や末尾に不要な空白文字が含まれるケースはよく見られます。空白文字には、スペース、タブ、改行などが含まれます。

文字列のトリミングは、さまざまな場面で活躍します。たとえば、フォーマット済みのテキストに余分なスペースが含まれている場合、コードを意図どおりに動作させるには、それらのスペースを事前に削除しておく必要があるかもしれません。

trim()の使用例

ここで、JavaScriptのtrim()関数の実際の動作を見てみましょう。

var studentName = "Benjamin     ";
console.log(studentName.trim());

変数「studentName」に代入された値には、末尾に複数のスペースが含まれています。trim()関数を使うことで、これらのスペースを削除できます。

trim()メソッドは、コンソールに次のような新しい文字列を返します。

"Benjamin"

trim()メソッドによって、文字列末尾の空白文字が削除されました。ただし、trim()は元の文字列を変更しない点に注意してください。トリミング後の文字列を保持したい場合は、新しい変数を作成して格納する必要があります。

var studentName = "Benjamin     ";
var trimmedStudentName = studentName.trim();
console.log(trimmedStudentName);

このコードは「Benjamin」を出力します。これで、トリミングされた学生名が変数trimmedStudentNameに保存されました。プログラム内のどこからでも、この変数を通じてトリミング済みの文字列を参照できます。

文字列の片側だけをトリムする関連メソッド

重要なポイントとして、trim()関数は文字列の先頭と末尾の両方から空白を削除します。

そのため、文字列の先頭または末尾のどちらか一方からのみ空白を削除したい場合は、trim()関数は使わず、目的に合った専用のメソッドを使用しましょう。

文字列の先頭から空白文字を削除したい場合はtrimStart()またはtrimLeft()を、末尾から空白文字を削除したい場合はtrimEnd()またはtrimRight()を使用します。

JavaScript trimStart()とtrimLeft()

文字列の先頭から空白文字を削除したいケースを考えてみましょう。名前のデータから先頭の空白を取り除きたい場合、trimStart()とtrimLeft()を次のように使えます。

var studentName = "     Benjamin     ";
console.log(studentName.trimStart());
console.log(studentName.trimLeft());

このコードの出力結果は次のとおりです。

"     Benjamin"
"     Benjamin"

trimStart()とtrimLeft()を使用したため、コードは文字列の先頭のスペースのみを削除しました。末尾のスペースはそのまま残っています。

JavaScript trimEnd()とtrimRight()

同様に、文字列の末尾から空白を削除したい場合は、trimEnd()またはtrimRight()メソッドを使用します。

var studentName = "     Benjamin     ";
console.log(studentName.trimEnd());
console.log(studentName.trimRight());

このコードの出力結果は次のとおりです。

"Benjamin     "
"Benjamin     "

文字列の末尾の空白は正常に削除されましたが、先頭の空白はそのまま残っています。

まとめ

JavaScriptのtrim()関数は、文字列の先頭と末尾から空白を削除します。trim()は文字列に対してドット記法で呼び出し、引数を受け取りません。

また、trimStart()、trimLeft()、trimEnd()、trimRight()の各メソッドを使えば、文字列の特定の側（先頭または末尾）からのみ空白を削除できます。

JavaScriptの学習をさらに進めたい方は、MDN Web Docsなどの公式ドキュメントやオンライン学習リソースも活用するとよいでしょう。実際にコードを書きながら、文字列操作に関するさまざまなメソッドを試してみてください。