JavaScriptで全角スペースをtrimする方法10選

●JavaScriptのtrimメソッドとは

JavaScriptを使った開発をしていると、文字列からスペースや改行などの不要な文字を取り除きたい場面によく遭遇します。

そんな時に力を発揮してくれるのが、trimメソッドです。

trimメソッドは文字列の前後にある空白文字を削除してくれる便利な機能です。

スペースだけでなく、タブや改行なども空白文字として扱われます。

trimを使えば、ユーザーの入力ミスなどで紛れ込んだ余計な文字をサッと取り除くことができるのです。

○trimメソッドの基本的な使い方

trimメソッドの使い方は至ってシンプルです。

文字列の後ろに.trimと付けるだけで、前後の空白文字が削除されます。

例えば、次のようなコードを見てみましょう。

const str = "  Hello, World!  ";
console.log(str.trim()); // "Hello, World!" と出力される

文字列strの前後には複数のスペースがありますが、trim()を呼び出すことでそれらが取り除かれ、”Hello, World!”だけが残ります。

なんと簡単なんでしょう。

○サンプルコード1：文字列の前後のスペースを削除

それでは実際に、ユーザーからの入力を受け取って、前後の空白を削除する処理を書いてみましょう。

function submitForm() {
  const nameInput = document.getElementById("name");
  const name = nameInput.value.trim();
  if (name === "") {
    alert("名前を入力してください");
    return;
  }
  // 入力値を使った処理...
}

このコードでは、HTMLのinput要素から名前の入力値を取得し、trimメソッドで前後の空白を取り除いています。

もしtrim()をつけ忘れると、「 」のように見えない空白文字が残ったまま比較されてしまい、意図しない動作になってしまうかもしれません。

trimを使うことで、ユーザーが誤って入力した空白を自動的に取り除き、正しいデータを扱うことができるようになります。

●trimメソッドで全角スペースを削除

さて、ここまででtrimメソッドの基本的な使い方は理解できたと思います。

でも、実は落とし穴があるんです。

trimは文字列の前後にある半角スペースしか削除してくれません。

もし文字列に全角スペースが含まれていたら、そのままでは取り除けないのです。

例えば、こんなコードを見てみましょう。

const str = "　Hello,　World!　";
console.log(str.trim()); // "　Hello,　World!　" と出力される

残念ながら、trimを呼び出しても、全角スペースは削除されずに残ってしまいました。

でも大丈夫、ちょっとした工夫でこの問題は解決できます。

○サンプルコード2：全角スペースを含む文字列をtrim

全角スペースを取り除くには、trimの前にreplaceメソッドを使って、全角スペースを半角スペースに置き換えてしまうのが一番手っ取り早いです。

const str = "　Hello,　World!　";
const trimmedStr = str.replace(/　/g, " ").trim();
console.log(trimmedStr); // "Hello, World!" と出力される

ポイントは、replaceメソッドの第一引数に正規表現/　/gを渡していること。

これは「文字列全体から全角スペースを探して、半角スペースに置換しなさい」という命令になります。

正規表現の/g は「global」の頭文字で、マッチするすべての部分を置換するオプションです。

これを使わないと、最初の1つしか置換されません。

そして、replaceの後にtrimを呼び出すことで、半角スペースに変換された空白文字を削除できるというわけです。

○サンプルコード3：trimとreplaceで完璧に空白削除

応用編として、半角と全角の両方が混ざったスペースにも対応できるコードを書いてみましょう。

const str = " 　Hello, 　World!　 ";
const trimmedStr = str.replace(/ |　/g, "");
console.log(trimmedStr); // "Hello,World!" と出力される

正規表現のパイプ| は「または」という意味です。

/ か　にマッチする部分を””(空文字)に置換することで、スペースを完全に削除しています。

行儀が悪いと言われるかもしれませんが、このコードなら絶対に誤魔化されることはありません。

トリッキーな空白文字が紛れ込んでいても、容赦なく排除してくれるでしょう。

trimとreplaceをうまく組み合わせることで、スペースを徹底的に削り、シンプルで扱いやすい文字列に整えることができます。

複雑になりがちな文字列処理も、これでかなりスッキリするはずです。

●改行コードの削除にもtrimは使える

さて、ここまでスペースの削除については詳しく見てきましたが、実はtrimの力はそれだけではありません。

文字列から厄介な改行コードを取り除くこともできるんです。

例えば、ユーザーがテキストエリアに複数行の文章を入力したとします。

その文字列を処理する際、思わぬ改行が紛れ込んでいると厄介ですよね。

ただ、trimならその改行もきれいに削除してくれます。

○サンプルコード4：文字列から改行コードを取り除く

const str = `Hello,
World!`;
console.log(str.trim()); // "Hello,World!" と出力される

trimは文字列の前後だけでなく、最初と最後の改行も削除してくれるので、このコードではHello,とWorld!の間の改行が取り除かれています。

ただ、これだと改行が1つしかない場合はうまくいきますが、もし複数の改行があったらどうでしょうか。

const str = `

Hello,

World!

`;
console.log(str.trim()); // "Hello,World!" と出力される

このように、文字列の前後に複数の改行があっても、trimは最初と最後の改行だけを削除します。

間の改行はそのまま残ってしまうのです。

でも大丈夫、ここで再び正規表現の出番です。

○サンプルコード5：正規表現で改行を削除

const str = `

Hello,

World!

`;
console.log(str.replace(/\n/g, "")); // "Hello,World!" と出力される

\nは改行を表す特殊文字です。これにマッチする部分をグローバル(g)に空文字に置換することで、文字列内のすべての改行を削除できました。

改行コードをきれいに取り除くことで、その後の文字列比較や検索がしやすくなります。

思わぬバグを防ぐためにも、ユーザー入力をトリミングする習慣は大切だと思います。

●任意の文字をtrimで削除する応用テクニック

ここまで、trimメソッドを使った空白文字や改行の削除方法を見てきました。

でも、trimの応用はそれだけではありません。

実は、任意の文字を削除することもできます。

そう、trimは文字列の前後から空白文字を除去するメソッドですが、ES2019からtrimStartとtrimEndという2つの仲間が登場しました。

これを使えば、もっと柔軟な文字列の加工ができるようになります。

○サンプルコード6：trimStartとtrimEndの活用

trimStartは文字列の先頭から、trimEndは末尾から空白文字を削除します。

これだけでも便利ですが、実はもう一つ、引数を取ることができるんです。

const str = "Hello, World!";
console.log(str.trimStart("Hel")); // "lo, World!" と出力される
console.log(str.trimEnd("!")); // "Hello, World" と出力される

trimStartに”Hel”を渡すと、文字列の先頭から”Hel”に一致する部分が削除されました。

同様に、trimEndに”!”を渡すと、末尾の”!”が取り除かれています。

これを応用すれば、文字列の前後から任意の文字を削除できます。

でも正直なところ、任意の文字を削除するならreplaceAllを使った方がスマートですね。

○サンプルコード7：replaceAllを使った任意の文字削除

const str = "Hello, World!";
console.log(str.replaceAll("l", "")); // "Heo, Word!" と出力される

replaceAllは文字列内の指定された部分をすべて置換します。

この例では、”l”を空文字に置換することで、”l”を文字列から完全に削除しています。

○サンプルコード8：正規表現で複数パターンの文字を削除

さらに、replaceAllと正規表現を組み合わせれば、もっと複雑な削除もできます。

const str = "Hello, World! Hello, Universe!";
console.log(str.replaceAll(/Hello|World/g, "")); // ", ! , Universe!" と出力される

正規表現の/Hello|World/gは、”Hello”または”World”にマッチする部分をグローバルに検索します。

これを空文字に置換することで、”Hello”と”World”をすべて削除しました。

●trimを使う際のよくあるエラーと対処法

trimは便利なメソッドですが、使い方を間違えるとエラーに遭遇することがあります。

こでは、trimを使う際によく出くわすエラーとその対処法を見ていきましょう。

○trimは文字列のメソッド、undefinedにご用心

よくある間違いが、文字列でない値にtrimを使ってしまうこと。

例えば、次のようなコードはエラーになります。

let name;
console.log(name.trim()); // TypeError: Cannot read property 'trim' of undefined

変数nameは未定義(undefined)なので、trim()を呼び出すとエラーが発生します。

このエラーを避けるには、trimを使う前に、その値が確かに文字列であることを確認する必要があります。

let name;
if (typeof name === "string") {
  console.log(name.trim());
} else {
  console.log("nameは文字列ではありません");
}

typeof演算子で変数の型をチェックし、文字列の場合だけtrimを使うようにしました。

このようなガード節を設けることで、エラーを未然に防ぐことができます。

○trimは破壊的メソッドではない

trimは文字列の前後からスペースを削除した新しい文字列を返します。

元の文字列は変更されません。

これを知らないと、意図しない動作になることがあります。

let str = "  Hello, World!  ";
str.trim();
console.log(str); // "  Hello, World!  " と出力される

trimの結果を変数に代入していないので、元の文字列strは変更されずにそのまま残ってしまいました。

正しくは、次のようにtrimの戻り値を変数に代入する必要があります。

let str = "  Hello, World!  ";
str = str.trim();
console.log(str); // "Hello, World!" と出力される

○replaceAllはES2021で登場した比較的新しいメソッド

これまでreplaceAllメソッドを使った例を見てきましたが、実はこのメソッドはES2021で導入された比較的新しい機能です。

古いブラウザや古いバージョンのNode.jsでは使えない可能性があるので注意が必要です。

replaceAllが使えない環境では、正規表現の/g(グローバルマッチ)フラグを使ったreplaceで代用できます。

let str = "Hello, World! Hello, Universe!";
console.log(str.replace(/Hello/g, "")); // ", World! , Universe!" と出力される

trimやreplaceAllを使う際は、これらの点に気をつけることで、エラーに悩まされることなく文字列操作ができるようになるでしょう。

●JavaScriptの文字列削除応用例

さて、ここまででtrimやreplaceを使った文字列の加工方法を詳しく見てきました。

でも、具体的にどんな場面で使えるのか、まだピンとこないかもしれません。

そこで最後に、実際の開発でよく出くわしそうな文字列処理の例を2つ紹介します。

これを見れば、きっとtrimの使いどころがわかるはずです。

○サンプルコード9：ユーザー入力の空白を自動削除

Webアプリケーションでユーザーからテキスト入力を受け付ける際、うっかり前後にスペースを入れてしまうことがよくあります。

こんな時、trimを使えば簡単に空白を取り除けます。

const inputName = "   Yamada Taro   ";
const name = inputName.trim();
console.log(name); // "Yamada Taro" と出力される

ユーザーが入力した文字列inputNameの前後にある空白をtrimで削除し、新しい変数nameに代入しています。

こうしておけば、余計なスペースが紛れ込む心配がなくなります。

データベースに保存する前や、入力内容を検証する前に、trimを使ってクリーニングするのがおすすめです。

○サンプルコード10：CSVデータの整形処理

次は、CSVファイルを読み込んで、データを整形する例です。

CSVファイルの各行は「,」で区切られていますが、空白が混ざっていると正しく処理できないことがあります。

そんな時は、trimとsplitを組み合わせるのが効果的です。

const csvData = `
  Yamada,  Taro,  30
  Suzuki,  Hanako,  25
  Tanaka,  Ichiro,  40
`;

const rows = csvData.trim().split("\n");
const data = rows.map(row => {
  const [lastName, firstName, age] = row.split(",").map(value => value.trim());
  return { lastName, firstName, age };
});

console.log(data);
// [
//   { lastName: "Yamada", firstName: "Taro", age: "30" },
//   { lastName: "Suzuki", firstName: "Hanako", age: "25" },
//   { lastName: "Tanaka", firstName: "Ichiro", age: "40" }
// ] と出力される

まず、csvDataの前後にある改行を取り除いたあと、split(“\n”)で各行に分割しています。

次に、rows.map()でそれぞれの行を処理しています。

row.split(“,”)で各行をカンマで分割し、そこにもう一度map()を適用することで、各要素の前後にあるスペースをtrimで削除しています。

最後に、分割された値を分割代入でlastName、firstName、ageに代入し、オブジェクトとして返しています。

こうすることで、空白の入り混じったCSVデータをきれいなJavaScriptのオブジェクトの配列に変換することができました。

まとめ

JavaScriptのtrimメソッドは、一見すると地味な存在かもしれません。

でも、実際の開発現場では、とても重宝するメソッドなんです。

この記事を通して、trimの使い方がわかっていただけたでしょうか。

空白や不要な文字を削除することで、データをクリーンに保ち、バグを防ぐことができます。

これからの開発では、ぜひtrimを積極的に活用してみてください。