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

JavaScript

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

・trim
・trimStart
・trimEnd
・trimLeft
・trimRight

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

PR

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」
PR

trimStartメソッドで、先頭の空白を削除する

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

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

console.log(text) // 「apple  」

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

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

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

trimEndメソッドを使って、末尾の空白を削除する

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

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

console.log(text) // 「  apple」

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

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

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

trimLeftメソッドを使って。先頭の空白を削除する

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

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

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

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

trimRightメソッドを使って、末尾の空白を削除する

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

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

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

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

trim系メソッドのまとめ

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

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

コメント

Ads Blocker Image Powered by Code Help Pro

広告ブロッカーが検出されました。

ブラウザの拡張機能を使用して広告ブロックをしていることが確認できました。 ブラウザの広告ブロッカー機能を無効にしていただくか、codelikes.comをホワイトリストに追加し、更新をクリックしてください。 お手数ですが、よろしくお願いします🙇‍♂️
タイトルとURLをコピーしました