【JavaScript】trim()で文字列の前後の空白スペースを取り除く!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2022年10月13日に投稿されました。)

JavaScriptで空白スペースを取り除く方法として、trim()があります。

trim()とは文字列を指定した文字列の前後の空白を取り除くメソッドになります。

空白を取り除くことから、空白を取り除いた後の文字列を返り値として返すようになります。

そして、空白は全角半角のどちらでも取り除くことができ、空白だけでなくタブや改行も取り除くことが可能です。

しかし、前か後ろかのどちらかだけの空白を取り除くというようなことはできませんので注意してください。

もし、どちらかだけの空白を取り除きたい場合は、trimStart()やtrimEnd()を使用しましょう。

今回はJavaScriptのtrim()で文字列の前後の空白スペースを取り除く方法について紹介していきます。

この記事はこんな方におすすめ
・指定した文字列の前後の空白を削除したい場合

trim()とは

trim()とは文字列の前後の空白を取り除くメソッドになります。

空白が連続で並んでいたとしても、文字列の前後であるならば全て取り除くことができます。

trim()の書き方

trim()の書き方は下記のようになります。

対象の文字列の後ろにtirm()を指定することで、対象の文字列の前後の空白を取り除くことができます。

trim()のパラメータ

trim()にパラメータはありません。

trim()の返り値

trim()の返り値は「空白を取り除いた後の文字列」となります。

trim()で前後の空白スペースを取り除くサンプルコード

trim()で前後の空白スペースを取り除くサンプルコードについてご紹介します。

ここでは、下記の2つのパターンでtrim()を使用してみます。

  1. 半角の空白スペースを取り除く場合
  2. 全角の空白スペースを取り除く場合
Sossy

今回は空白があるのかどうか分かりやすいように、空白がある場合はreplace()で「空白」と表示するようにします。

半角の空白スペースを取り除く場合

半角のスぺースを取り除く場合にtrim()を使用してみます。

⚫︎ Main.js

実行結果

trim()で半角の空白スペースを取り除いた結果

「処理後空白チェック」を見ると「空白」がないことから、trim()によって半角の空白スペースが取り除かれています。

そのため、「マサラタウン」のみの文字列が表示されています。

もし、「処理後空白チェック」で
使用したreplace()について詳しく知りたい場合は下記の記事をご参考下さい。

全角の空白スペースを取り除く場合

全角スぺースを取り除く場合にtrim()を使用してみます。

⚫︎ Main.js

実行結果

trim()で全角の空白スペースを取り除いた結果

「処理後空白チェック」を見ると「空白」がないことから、trim()によって半角の空白スペースが取り除かれています。

そのため、「ニビシティ」のみの文字列が表示されています。

trim()で空白スペース以外の文字を取り除く場合

trim()で空白スペース以外の文字を取り除いてみます。

ここでは、下記の2つの文字に対してtrim()を使用してみます。

  1. タブの場合
  2. 改行の場合
Sossy

こちらもタブや改行があるのかどうか分かりやすいように、タブがある場合はreplace()で「タブ」、改行がある場合は「改行」と表示するようにします。

タブの場合

trim()でタブを取り除いてみます。

⚫︎ Main.js

実行結果

trim()でタブを取り除いた結果

「処理後タブチェック」を見ると「タブ」がないことから、trim()によってタブが取り除かれています。

そのため、「ハナダシティ」のみの文字列が表示されています。

改行の場合

trim()で改行を取り除いてみます。

⚫︎ Main.js

実行結果

trim()で改行を取り除いた結果

「処理後改行チェック」を見ると「改行」がないことから、trim()によって改行が取り除かれています。

そのため、「タマムシティ」のみの文字列が表示されています。

前の空白スペースだけ取り除く場合

前の空白スペースだけ取り除く場合は、trimStart()を使用します。

trimStart()とは、指定した文字列の前にある空白を取り除くメソッドになります。

trim()と同ようなメソッドになりますので、空白だけでなく、タブや改行も取り除くことができます。

⚫︎ Main.js

実行結果

trimStart()で前の空白スペースだけ取り除いた結果

「処理後空白チェック」を見ると文字列の前だけ「空白」がないことから、trimStart()によって指定した文字列の前の空白スペースが取り除かれています。

そのため、「コガネシティ 」の文字列が表示されています。

後ろの空白スペースだけ取り除く場合

後ろの空白スペースだけ取り除く場合は、trimEnd()を使用します。

trimEnd()とは、指定した文字列の後ろにある空白を取り除くメソッドになります。

こちらも、空白だけでなく、タブや改行も取り除くことができます。

⚫︎ Main.js

実行結果

trimEnd()で後ろの空白スペースだけ取り除いた結果

「処理後空白チェック」を見ると文字列の後ろだけ「空白」がないことから、trimEnd()によって指定した文字列の後ろの空白スペースが取り除かれています。

そのため、「 アサギシティ」の文字列が表示されています。

文字列内にあるすべての空白スペースを取り除く場合

文字列内にあるすべての空白スペースを取り除く場合は、replaceAll()を使用します。

replaceAll()とは、指定した全ての文字列を別の文字列に置換するメソッドになります。

そのため、空白スペースを空文字に置換することで、文字列内にあるすべての空白スペースを取り除くことができます。

⚫︎ Main.js

実行結果

replaceAll()で文字列内にあるすべての空白スペースを取り除いた結果

replaceAll()によって、文字列内にあるすべての空白スペースを取り除かれています。

そのため、「グレンタウンワカバタウンヒワダタウン」の文字列が表示されています。

まとめ

⚫︎ trim()とは、指定した文字列の前後の空白スペースを取り除くメソッドである

⚫︎ trim()は、全角や半角の空白スペースを取り除くことができる

⚫︎ trim()は、空白スペースだけでなく、タブや改行も取り除くことができる

⚫︎ 文字列の前の空白スペースだけ取り除く場合は、trimStart()を使用する

⚫︎ 文字列の後ろの空白スペースのみ取り除く場合は、trimEnd()を使用する

⚫︎ 文字列内にあるすべての空白スペースを取り除く場合は、replaceAll()を使用する

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA