column

ITコラム

mv7713

プログラミングノウハウ

2026.07.30

JavaScript【trim】文字列の空白を削除

この記事の監修者
Kay Arai

プログラマカレッジ講師(元エンジニア)
未経験からプログラミングを学ぶ受講生の方を、数多くサポートしてきました。「プログラミングって難しそう・・」その気持ち、よく分かります。私自身、最初はエラーの意味も分からず心が折れそうになりました。だからこそ、つまずきやすいポイントを一つひとつ丁寧にご説明するよう心がけています。楽しみながら、一緒に「できた!」を増やしていきましょう。

JavaScriptのtrim()メソッドは、文字列の先頭と末尾にある空白を削除するメソッドです。今回はtrim()の基本的な使い方と、空白を削除する方法についてご紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

最終更新日:2026年7月30日

1.trim()メソッドとは

JavaScriptのtrim()メソッドは、文字列の先頭と末尾にある空白文字を削除するメソッドです。
たとえば、次のように使います。

let str = "  インターノウス株式会社  プログラマカレッジ  ";
let result = str.trim();

console.log(str);
console.log(result);

trim()を使っても、元の文字列strは変更されません。削除後の新しい文字列が返されるので、必要なら別の変数に入れて使います。

str … 元の文字列
result … 先頭と末尾の空白を削除した文字列

trim()で削除できるのは、主にスペースやタブ、改行などの「空白文字」と呼ばれるものです。削除の対象となる空白文字の一覧は、次の項目でご紹介します。

なお、文字列の途中にある空白は削除されない点に注意してください。今回の例では、先頭と末尾の空白は消えますが、「株式会社」と「プログラマ」の中間にある空白は残ります。

上のサンプルコードではコンソール上に結果を出力していますが、ブラウザ画面上にtrim()の処理前と処理後の文字列を出力すると、それぞれ右側の枠内のようになります。

trim()を使うことで、先頭と末尾の空白だけ削除されたのが確認できます。


HTMLの基本タグ入門|h1~h6、br、p、div、spanの使い方まとめ【プログラマカレッジ】

▲目次へ戻る

2. 空白文字とは

空白文字とは、スペースやタブ、改行など、文字列内の空きを表す文字です。
空白文字には、次のような種類があります。

“ “ 半角スペース
“ “ 全角スペース
\t タブ
\v 垂直タブ
\f フォーム フィード
\n ライン フィード (改行)
\r キャリッジ リターン

また正規表現では、「 \s 」という記号を使うと、空白文字をまとめて表すことができます。

次のコードは、文字列( A B\tC\nD )に含まれる空白文字を、すべて _ に置き換える処理です。

let str = "A B\tC\nD";
console.log(str.replace(/\s/g, "_"));

この文字列に含まれる空白文字は、スペース・タブ(\t)・改行(\n)の三種類です。
「g」は、見つかったすべてを対象にする正規表現です。詳しくは次の項目で解説します。

【!ポイント】
\s は「スペースそのもの」ではなく、空白文字全般を表す正規表現の記号です。JavaScriptの \s は、半角スペース・タブ・改行などに加えて、全角スペース(U+3000)も含んでいます。


HTMLの基本タグ入門|h1~h6、br、p、div、spanの使い方まとめ【プログラマカレッジ】

▲目次へ戻る

3.replaceメソッドと正規表現で空白を削除する

trim()では、文字列の先頭と末尾の空白しか削除できません。文字列の途中にある空白も含めて全部削除したい場合は、replace()を使います。
たとえば、次のように書けます。

let str = "  インターノウス株式会社  プログラマカレッジ  ";
let result = str.replace(/\s+/g, "");

console.log(result);

このコードでは、/\s+/g という正規表現を使っています。

\s 空白文字
+ 1文字以上連続している部分
g 見つかったすべてを対象にする

「 \s 」は 空白文字 を表しています。さらに、「 + 」を付けることで、1文字以上連続するすべての空白文字を置換対象としています。「 g 」は グローバルサーチという正規表現のフラグ(修飾子)で、これを付けることで、マッチした最初の箇所だけでなく全ての一致箇所が対象となります。
つまり全体で、すべての空白文字をまとめて削除するという意味になります。

■ 全角スペースについて

現在、JavaScriptの正規表現における「 \s 」は、全角スペース(U+3000)も含んでいます。そのため、上記のコードで全角スペースも問題なく削除できます(他の言語や環境では「 \s 」が全角スペースを含まない場合があります)。
古いブラウザとの互換性を考慮する必要があるケースでは、 次のように \u3000 を使う例もありますが、現在普通に使われるブラウザでは、動作は上記のコードと同じになります。

let str = "  インターノウス株式会社  プログラマカレッジ  ";
let result = str.replace(/[\s\u3000]+/g, "");

console.log(result);

次の入力欄に空白入りの文字列を入力して、空白削除ボタンをクリックしてみて下さい。すべての空白が削除される事が確認できます。

■ 入力


■ 結果

正規表現の記述については、正規表現をご参照下さい。

replace メソッドについては、以下のページもご参照下さい。


HTMLの基本タグ入門|h1~h6、br、p、div、spanの使い方まとめ【プログラマカレッジ】

▲目次へ戻る

4. 左トリム

文字列の先頭だけの空白を削除したい場合は、trimStart()を使います。

let str = "  インターノウス株式会社  プログラマカレッジ  ";
let result = str.trimStart();

console.log(result);

これで先頭(左側)の空白だけが削除され、途中や末尾の空白はそのまま残ります。

trimStart()の処理前と処理後、それぞれの文字列を画面上に出力すると、次のようになります。

trimStart()の結果として、先頭(左側)の空白だけが削除されていることが確認できます。

なお、同じ内容を、次のようにreplace()を使って書くことも可能です。

let str = "  インターノウス株式会社  プログラマカレッジ  ";
let result = str.replace(/^\s+/, "");

console.log(result);

このコードでも同様に機能はしますが、「先頭の空白だけを削除する」という目的がはっきりしている場合、trimStart()を使う方が可読性が高く、推奨されています。


HTMLの基本タグ入門|h1~h6、br、p、div、spanの使い方まとめ【プログラマカレッジ】

▲目次へ戻る

5. 右トリム

文字列の末尾の空白だけを削除したい場合は、trimEnd()を使います。

let str = "  インターノウス株式会社  プログラマカレッジ  ";
let result = str.trimEnd();

console.log(result);

これで末尾(右側)の空白だけが削除され、先頭や途中の空白は残ります。以下は、trimEnd()の処理前と処理後の文字列をブラウザ画面に出力した結果です。

末尾の空白だけが削除されたことがわかります。

参考までに、以前からあるreplace()を使った書き方は次の通りです。

let str = "  インターノウス株式会社  プログラマカレッジ  ";
let result = str.replace(/\s+$/, "");

console.log(result);


▲目次へ戻る

6. JavaScriptのtrim()メソッドについて、よくある質問

Q1.trim()を使うと、元の文字列も変更されますか?

【A】いいえ。元の文字列は変更されず、新しい文字列を返します。


Q2.trim()は空白だけでなく、改行やタブも削除できますか?

【A】はい。先頭と末尾にある改行やタブも削除できます。


Q3.trim()で文字列の途中の空白も削除できますか?

【A】いいえ、trim()では、文字列の途中の空白は削除されません。途中の空白も削除したい場合は、replace()と正規表現を使います。


Q4. フォームで入力された値に対して、trim()を使うべきですか?

【A】はい。ユーザーが入力欄の前後に余分な空白をいれてしまうことはよくあるため、入力された値を利用・保存する前にtrim()で整えることが望ましいです。


HTMLの基本タグ入門|h1~h6、br、p、div、spanの使い方まとめ【プログラマカレッジ】

▲目次へ戻る

7. まとめ

JavaScriptのtrim()メソッドについて、いかがでしたでしょうか。

「HTMLから始めていつかプログラマーになりたいけど、独力では限界がある!」と感じている方には、「プログラマカレッジ」もおすすめです。
プログラマカレッジは、本気でプログラマーを目指す方のための就職支援付き、受講料無料のプログラミングスクールです。今回ご紹介したHTMLを含む豊富なカリキュラムで、IT初心者からプログラマーとして就職するまで、プロが完全にサポートします。

本気でプログラマーとして就職・転職したいという方は、ぜひ一度のぞいてみて下さいね。
→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る

無料説明会
適正診断

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ