【JavaScript】文字列の前後にある空白(スペース、改行、タブ)を削除する【trim】

こんにちは、Ryohei（@ityryohei）です！

本記事では、文字列の前後にある空白（スペース、改行、タブ）を削除する方法をご紹介しています。

文字列を比較する際に前後にある不要な空白を削除したい場合に有効な方法となります。

こういった疑問にお答えできればと思います。

では、解説していきます。

文字列の前後にある空白の削除はtrim()で実現できる

文字列の前後にある空白はJavaScriptにはtrim()というメソッドを使用することで削除することができます。正規表現で一から条件を指定したりする必要なく、簡単に削除できます。

trim()メソッドの使い方は簡単です。文字列に対してtrim()メソッドを実行するだけで文字列の前後にある空白を削除することが可能です。

str.trim();

では、実際にtrim()メソッドで空白を削除してみましょう。

trim()で文字列の前後にある空白を削除する

検証のため、変数に改行コードやスペース、タブ文字を持たせます。文字列の間にもスペースを入れておきましょう。

//半角スペース、全角スペース、タブ、改行が入った文字列
const str = "\n 　Hello World!!    \n";

検証用の変数が用意できたところで、まずはtrim()メソッドを実行せずにコンソールに値を出力してみます。

console.log(str);

//実行結果:
"
 　Hello World!!    
"

改行コードやスペースがそのまま出力されていますね。変数に代入した通りの文字列が出力されています。

では続いてtrim()を指定して実行してみます。

console.log(str.trim());

//実行結果:
"Hello World!!"

文字列の前後にある空白（スペース、タブ、改行）が削除されて出力されています。文字列の間にあるスペースは維持されているので、文字列の前後にある空白文字だけが削除されたことがわかるかと思います。

trim()の注意点

trim()はモダンブラウザ（Web標準に準拠したブラウザ）には対応していますが、IEは9～のサポートとなります。社内システムなどを構築する際に古いIEを使用しているユーザー層は一定数いますので、要件は確認するようにしましょう。現状ではほとんど気にする必要はないと思いますが、ご注意ください。

最後に

空白文字はユーザーの環境で意図せずに挿入される場合がありますので、比較等の処理を実行する前に削除しておくことが望ましいです。trim()メソッドでは文字列の前後にあるスペースを簡単に削除することができますので、コーディング時にどんどん活用しましょう。

以上、JavaScriptで文字列の前後にある空白文字（スペース、改行、タブ）を除去する方法のご紹介でした！