【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

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

こんにちは、ryohei(@ityryohei)です!

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

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

文字列の前後にある空白とか改行を削除したいんだけど、どうすればいいの?

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

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

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

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

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

String.prototype.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で文字列の前後にある空白文字(スペース、改行、タブ)を除去する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍