JavaScriptで文字列の空白を削除する5つのメソッド！

JavaScriptで文字列の空白(スペース)を削除する方法について解説します。
文字列の空白を取り除くときには、文字列から下記の5つのメソッドを使用することができます。

・trim
・trimStart
・trimEnd
・trimLeft
・trimRight

それでは、実際に使い方を確認していきましょう。

trimメソッドで空白を削除する

文字列からtrimメソッドを呼ぶことで、文字列の前後の空白を削除することができます。
例えば、このように使います。

let apple = "  apple  "
let text = apple.trim()

console.log(text) // 「apple」

最初に、apple変数に「 apple 」という文字列を代入しています。
その次の行で、trimメソッドを使っています。

このように文字列からtrimメソッドを呼ぶことができます。(apple.trim())
呼び出すと、前後に入っている空白を取り除いてくれます。

そのため、text変数には前後の空白が取り除かれた「apple」が代入されます。
console.logで出力すると、「apple」が表示されて、前後の空白が削除されていることが確認できました。

全角の空白もtrimメソッドを使うことで削除されます。
下記は先ほどと同じプログラムですが、apple変数に全角文字列と半角文字列の空白を入れました。(ぱっと見わからないですが😅）

let apple = " 　　　apple 　　 　"
let text = apple.trim()

console.log(text) // 「apple」

apple変数に全角・半角の空白を含めた文字列の「　　　apple 　　　」が入っています。
trimメソッドを使うことで、先ほどと同じように、前後の空白が削除された「apple」が返ってきます。

trimメソッドですが、文字列の間に入った空白を消すことはできません。
apple変数に、下記のように空白が途中に入った文字列を入れました。

let apple = "a　p　p l e"
let text = apple.trim()

console.log(text) // 「a　p　p l e」

全角空白と半角の空白を混ぜて入れています。
trimメソッドを呼んで、出力してみると「a　p　p l e」が出力されました。

このように間の空白は消えません、消したいときには、replaceを使うと良いかと思います。

"a　p　p l e".replace(/\s/g,"") // 「apple」

replaceメソッドについては、こちらに書いてあるので確認してみてください。

trimStartメソッドは、文字列の先頭の空白のみを削除します。

let apple = "  apple  "
let text = apple.trimStart()

console.log(text) // 「apple  」

先ほどと同様に、apple変数に「 apple 」という文字列を代入しています。
次の行で、trimStartメソッドを呼んでいます。

文字列の先頭の空白のみが削除されます。
出力すると、結果は「apple 」になりました。

こちらも全角の空白も削除されます。
文字列の間に入っている空白は消えません。

trimEndメソッドは、文字列の末尾の空白のみを削除します。

let apple = "  apple  "
let text = apple.trimEnd()

console.log(text) // 「  apple」

先ほどと同様に、apple変数に「 apple 」という文字列を代入しています。
次の行で、trimEndメソッドを呼んでいます。

文字列の末尾の空白のみが削除されます。
出力すると、結果は「 apple」になりました。

こちらもtrimと同じで、全角の空白も削除されます。
そして、文字列の間に入っている空白は消えません。

trimLeftメソッドはtrimStartメソッドと同じで、先頭の文字列を削除してくれます。
MDNに書いてありますが、このメソッドはtrimStartメソッドのエイリアス(別名)となっています。

let text = "  orange  ".trimLeft()
console.log(text) // 「orange  」

半角空白を含めた文字列の「 orange 」からtrimLeftメソッドを呼びました。
trimStartメソッドと同じように動作します。

出力すると「orange 」になりました。

trimRightメソッドはtrimEndメソッドと同じで、末尾の文字列を削除してくれます。
こちらは、trimEndメソッドのエイリアスです。

let text = "  orange  ".trimRight()
console.log(text) // 「  orange」

半角空白を含めた文字列の「 orange 」からtrimLeftメソッドを呼びました。
trimEndメソッドと同じように動作します。

出力すると「 orange」になりました。

最後に、今回紹介した空白を削除するtrim系のメソッドを表にまとめました。

メソッド	動作
trim	前後の空白文字列(全角空白含む)を削除できる
trimStart	先頭の空白文字列(全角空白含む)のみ削除できる
trimEnd	末尾の空白文字列(全角空白含む)のみ削除できる
trimLeft	trimStartのエイリアス、先頭の空白文字列(全角空白含む)のみ削除できる
trimRight	trimEndのエイリアス、末尾の文字列(全角空白含む)のみ削除できる