【JavaScirpt】trim()メソッドで文字列の空白を削除する方法

JavaScirptで文字列の空白を削除したいんだけどどうやってやるんだろう。やり方を詳しく知りたいな。

本記事は上記のようなお悩みに役立つ記事となっております。

JavaScriptで文字列の両端の空白を削除するには、trim()というメソッドを使用します。

trim()メソッドを使うことで元の文字列に変更を加えることなく、変更結果を出力することができます(これを非破壊メソッドと呼ます)。

今回はJavaScirptのtrim()メソッドを使って文字列の空白を削除する方法を見て行きましょう。

trim()メソッドの使い方

では早速ですが、trim()の使い方についてです。

trim()を使うことで文字列の空白を削除することができます。

ここで言う空白とはスペースやタブのこと。

以下が使い方です。

//空白を削除したい文字列.trim();

簡単ですね。

空白を削除したい文字列の後ろに.trim()とつけるだけです。

以下のように変数に代入することも可能です。

let string2 =string1.trim();

では実際に空白を削除してみます。

//空白の字列が前後に入っている
const string ='はじめまして　'  はじめまして、しのです。　';
const trimString =string.trim();
console.log(trimString);

//結果：はじめまして、しのです。

上記のコードでは、「string」という変数に文字列を代入し、stringという変数に対してtrim()メソッドを使用している形となります。

const string ='はじめまして　'  はじめまして、しのです。　';

上記の段階では前後に空白が見られますが、結果では空白が削除されています。

これがtrim()メソッドの基本的な使い方となります。

削除する文字列が半角だけではなく、全角の場合も時にはあると思います。

基本的に全角でもtrim()メソッドを使うことはできますが、ブラウザによってはtrim()メソッドの機能が限定的になっている場合があり、半角空白のみを対象にしているブラウザもあるので注意が必要です。

そのような場合は、以下の文字列を含んだコードを「空白を削除したい文字列の前」に書くと解決出来ます。

if(!String.prototype.trim(){
  String.prototype.trim =function(){
    return this.replace(/^[\s\uFEFF\xA0]+[\s\uFEFF\xA0]+$/g,'');
  };
}

上記は正規表現が含まれているため少しわかりづらいですが、MDNでも推奨されている書き方になります。

必ず、「空白を削除したい文字列の前」に書くようにしてくださいね。

この正規表現を使うことで「半角/全角」の両方を空白除去出来るようになります。

いかがでしたでしょうか。

今回はJavaScriptのtrim()メソッドで空白を削除する方法を紹介しました。

もしtrim()メソッドの使い方を忘れてしまった、知らなかったという方は是非参考にしてみてください。

リンク