JavaScriptの文字列の空白を削除する方法を解説！trim・trimStart・trimEndの使い方
生徒
「先生！文字列の前や後ろに空白が入ってしまうことがあるんですが、きれいに消す方法ってありますか？」
先生
「ありますよ。JavaScriptでは、trim()やtrimStart()、trimEnd()というメソッドを使うと簡単に空白を削除できます。」
生徒
「どのメソッドを使えばいいのか迷いそうですね…。どう違うんですか？」
先生
「それぞれの違いをわかりやすく解説していきますね！」
1. trimメソッドとは？
JavaScriptのtrim()メソッドは、文字列の前後にある空白（スペース）を削除するためのメソッドです。文章の両端に余分な空白が入ってしまうことはよくあるため、特にフォーム入力やデータ処理などでよく使われます。
基本的な使い方
const text = " JavaScript ";
const result = text.trim();
console.log(result);
このプログラムを実行すると、文字列の前後の空白が削除されて次のように表示されます。
JavaScript
trim()は、前と後のどちらの空白も削除するのがポイントです。文字列の途中にある空白は削除されないので注意しましょう。
2. trimStartメソッドとは？
trimStart()メソッドは、文字列の先頭の空白だけを削除します。名前の通り、「開始（Start）」の部分にある空白を取り除く機能です。
使い方の例
const message = " Hello World!";
const result = message.trimStart();
console.log(result);
実行結果は次のようになります。
Hello World!
先頭の空白が削除され、後ろの空白はそのまま残っていることが分かります。trimStart()は、左側の余分なスペースを整えたいときに便利です。
3. trimEndメソッドとは？
trimEnd()メソッドは、文字列の末尾の空白を削除します。つまり、「終わり（End）」にある空白を取り除きたいときに使います。
使い方の例
const word = "Hello World! ";
const result = word.trimEnd();
console.log(result);
実行すると、次のように後ろの空白だけが削除されます。
Hello World!
このように、trimEnd()は右側のスペースだけを取り除く場合に役立ちます。
4. trim・trimStart・trimEndの違いを比較
3つのメソッドの違いを一覧でまとめてみましょう。
| メソッド名 | 削除する空白の位置 | 主な用途 |
|---|---|---|
trim() |
前後の空白 | 全体をきれいに整えるとき |
trimStart() |
先頭（左側）の空白 | 文字列の前側だけ整えたいとき |
trimEnd() |
末尾（右側）の空白 | 後ろの余分なスペースを消したいとき |
どのメソッドも「空白を削除する」という目的は同じですが、削除する位置が異なります。場面に応じて使い分けるのがポイントです。
5. trimメソッドを使う実践例
たとえば、ユーザーがフォームに名前を入力する場面を考えてみましょう。もし名前の前後に空白があると、そのまま保存するとデータが不自然になります。
そんなときは、trim()を使ってきれいに整えられます。
let nameInput = " 山田太郎 ";
let cleanName = nameInput.trim();
console.log("入力された名前:", cleanName);
入力された名前: 山田太郎
このように、trim()を使えば、入力ミスなどで空白が入ってしまっても安心です。
6. 文字列の途中の空白は削除できない点に注意
trim()メソッドは前後の空白だけを削除します。文字列の途中にある空白（たとえば単語の間のスペース）はそのまま残ります。
const text = " Hello World ";
console.log(text.trim());
Hello World
もし文章の中の空白も削除したい場合は、replace()メソッドなど別の方法を使う必要があります。
7. まとめ：文字列の見た目を整えるのに必須のメソッド
trim()、trimStart()、trimEnd()は、文字列を整えるときにとても便利な基本メソッドです。特にユーザー入力やデータの前処理でよく使われます。
JavaScriptで文字列を扱うときは、これらのメソッドをうまく使って、不要な空白を取り除きましょう。
