スライドショー

【JavaScript入門】trimで前後の空白スペースを削除する方法

こんにちは!エンジニアの中沢です

JavaScriptには文字列の前後の空白を削除するための「trimメソッド」があります。代わりにreplaceメソッドを使えば空白以外の任意の文字を削除できるので、上手く活用してください。

この記事では、

  • trimとは
  • trimの使い方

という基本的な内容から

  • trimの代わりにreplaceメソッドと正規表現を使う方法
  • 空白以外の文字を削除する方法

などの応用的な使い方に関しても解説していきます。今回はこれらの方法を覚えるために、trimメソッドのさまざまな使い方をわかりやすく解説します!

trimとは

そもそもtrimとは、JavaScriptのメソッド(関数)の一つで、削除したい対象文字列の前後の空白を削除する機能を持っています。また"空白"とは、スペースやタブ、改行などが対象となります。基本的な構文は以下の通りです。

"空白を除去したい文字列".trim()

trimの使い方

次にtrimメソッドの基本的な使い方を解説します。まずはtrimメソッドを使うときのサンプルコードを見てみましょう。

// 文字列の前後に空白が入っている
var address = " 東京都新宿区新宿1-1-1  ";
 
console.log(address.trim());

実行結果

東京都新宿区新宿1-1-1

「東京都新宿区新宿1-1-1」の前後にあった空白が除去されていることが確認できます。他にもタブや改行を削除するサンプルも併せて確認しておきましょう。

// タブ
var address = " 東京都新宿区新宿1-1-1       ";

// 改行
var question = "在庫があるか確認させてください。"
        + "2010年に出版された本です。"
        + "連絡手段はメールを希望します。";

console.log(address.trim());
console.log(question.trim());

実行結果

東京都新宿区新宿1-1-1
在庫があるか確認させてください。2010年に出版された本です。連絡手段はメールを希望します。

trimの代わりにreplaceメソッドと正規表現を使う方法

trimは実はブラウザ環境(IEやChrome、Firefoxなど)によって使えない場合があります。例えばInternet Explorer9未満のバージョンではtrimに対応していませんので、別の方法を採用する必要があります。

その別の方法とは、以下のように、replaceメソッドと正規表現を使う方法です。

str = “    東京都新宿区新宿1-1-1     “;
 
str = str.replace(/^\s+|\s+$/g,'');

正規表現を使うことで「先頭(^)に続く空白(\s)」と「末尾($)の空白(\s)」を空文字('')で置換しています。「+」は直前の文字の1回以上の繰り返しを表します。正規表現やreplaceメソッドについて詳しく確認しておきたい方は以下の記事が参考になります。

【JavaScript入門】replaceの文字列置換・正規表現の使い方まとめ!
更新日 : 2020年5月8日
【JavaScript入門】RegExp(正規表現)の使い方と活用事例!
更新日 : 2019年2月12日

空白以外の文字を削除する方法

ではここからは、削除対象の文字の種類を広げてtrimメソッドでは対応できない場合の代用方法を解説します。

全角の空白を削除する方法

削除したい文字列は半角だけでなく、全角の場合もあるかと思います。基本的に全角空白もtrimメソッドを使うことはできます。

var str = ”  東京都新宿区新宿1-1-1  ”; //前後に全角空白2つ

console.log(str.trim());

実行結果

東京都新宿区新宿1-1-1

「東京都新宿区新宿1-1-1」の先頭と末尾にあった全角空白が除去されているのが分かります。しかしながら、前述の通りブラウザによってはtrimメソッドの機能が制限され、半角空白のみを対象にしてるブラウザ環境があるので注意が必要です。

そこで、このような場合には「半角 / 全角」の空白除去に対応した正規表現を使うのが良いでしょう。

var str = ”  Hello , JavaScript   ”; //半角と全角の空白が入った文字列

console.log(str.replace(/^[\s| ]+|[\s| ]+$/g,'');

出力結果

Hello,JavaScript

文字列の先頭にある「半角・全角空白」と、末尾の「半角・全角空白」が置換されているのが分かります。正規表現内にある「|」は「または」を意味しており、上記サンプルの場合だと半角空白または全角空白を「|」でつないでいます。

任意の文字を削除する方法

空白文字だけでなく、任意の文字を削除する方法もご紹介します。これは文字列の先頭か末尾に特定の文字が付加されている場合、その文字をまとめて除去したいときに役立ちます。

以下、サンプルコードです。

function trimAnyChar(str, anyChar) {

    return str.replace(new RegExp("^" + anyChar + "+|" + anyChar + "+$", "g"),'');

};

この関数は、引数として「置換前の文字列(str)」、「trimしたい文字(anyChar)」の2つを受け取ります。メソッドの中ではreplaceメソッドと正規表現を使います。RegExpは文字列のパターンマッチングを行うときに使う「正規表現オブジェクト」です。

「先頭(^)にあるanyChar、または末尾($)にあるanyChar」というパターンを発見したらその任意の文字を削除しています。以下、使用例です。

console.log(trimAnyChar("111Hello, JavaScript111", "1"));

実行結果

Hello, JavaScript

先頭に続く「111」と末尾にある「111」を削除しています。このように、文字列の先頭か末尾に任意の文字がある場合に有効な手段として使えるので、ぜひ参考にしてみてください。

文字列の使い方総まとめ

文字列の様々な使い方はこちらの記事で詳しく解説しているので、ぜひ確認してください。

JavaScriptの文字列操作(置換・連結・検索・比較など)を徹底解説!
更新日 : 2019年4月7日

まとめ

いかがでしたか?今回はtrimメソッドで空白を削除する方法を解説しました。trimメソッドは文字の間の空白や、全角スペースは削除しないので注意してくださいね。もしtrimメソッドの使い方を忘れてしまったらこの記事を確認してください!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

中沢 丈

中沢 丈

フリーランスエンジニア。
システム開発からコンテンツ作成まで幅広く対応します。

連絡先はこちらです。
[email protected]