JavaScriptにおけるString.prototype.trim()メソッドの使い方と注意点7選

JavaScriptのString.prototype.trimメソッドを使って文字列の空白を削除する方法JS
この記事は約16分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptのtrim()とは？ 空白削除に役立つメソッド

JavaScriptを使ったWeb開発で、文字列manipulationはとても重要な役割を果たします。

その中でも、文字列の前後にある空白を削除するのは非常によくある処理ですよね。

でも、その空白削除を簡単に行えるのがJavaScriptのString.prototype.trim()メソッドなんです。

trim()メソッドは、文字列の両端にある空白文字を取り除いてくれる強力なメソッドです。

空白文字といっても、スペース、タブ、改行など様々ありますが、trim()ならそれらをまとめて削除してくれるんですよ。

Webフォームからユーザー入力を受け取ったり、APIからのレスポンスを処理したりする際に、trim()はとても役立ちます。

不要な空白を取り除くことで、データの整合性を保ち、正確な比較やバリデーションが可能になります。

○trim()の基本的な使い方

では、trim()メソッドの基本的な使い方を見ていきましょう。

使い方自体はとてもシンプルです。対象となる文字列に対して、trim()を呼び出すだけ。

例えばこんな感じですね。

let str = "   Hello, World!   ";
console.log(str.trim()); // 出力結果: "Hello, World!"

○サンプルコード1：文字列の前後の空白を削除する

実際に、文字列の前後にある空白を削除するサンプルコードを見てみましょう。

let username = "   John Doe   ";
console.log("トリム前: " + username); // 出力結果: "   John Doe   "
console.log("文字数: " + username.length); // 出力結果: 13

let trimmedUsername = username.trim();
console.log("トリム後: " + trimmedUsername); // 出力結果: "John Doe"
console.log("文字数: " + trimmedUsername.length); // 出力結果: 8

実行結果を見ると、trim()メソッドが文字列の前後にある空白を見事に取り除いてくれていることがわかりますね。

文字数も13文字から8文字に減っています。

これで、無駄な空白に悩まされることなく、意図したデータを扱うことができます。

●trim()の注意点1：全角スペースは削除されない

trim()メソッドは強力な空白削除ツールですが、実は全角スペースには対応していないんです。

そう、trim()で取り除けるのは半角スペースやタブ、改行などの空白文字だけ。

全角スペースは、そのまま残ってしまいます。

これ、結構落とし穴だったりします。

特に、日本語の文章を扱う際には注意が必要ですね。

ユーザーが全角スペースを使って入力したデータをそのままtrim()に渡すと、期待した結果が得られないことがあります。

○サンプルコード2：全角スペースを含む文字列をtrim()で処理する

実際に、全角スペースを含む文字列をtrim()で処理するとどうなるか、サンプルコードで確認してみましょう。

let message = "　こんにちは　";
console.log("トリム前: " + message); // 出力結果: "　こんにちは　"
console.log("トリム後: " + message.trim()); // 出力結果: "　こんにちは　"

実行結果を見ると、trim()を使っても全角スペースが取り除かれていないことがわかります。

そのまま残ってしまっているんですね。

これでは、全角スペースを考慮したデータの整形ができません。

でも、ご安心を。全角スペースを取り除く方法がないわけではありません。

ここでは、正規表現を使った解決策を紹介しましょう。

○サンプルコード3：正規表現を使って全角スペースを削除する

正規表現を使えば、全角スペースも含めてあらゆる空白文字を取り除くことができます。

replace()メソッドと組み合わせることで、trim()の代わりとして利用できますよ。

let message = "　こんにちは　";
console.log("トリム前: " + message); // 出力結果: "　こんにちは　"

// 正規表現で全角スペースを含む空白文字を削除
let trimmedMessage = message.replace(/^[\s　]+|[\s　]+$/g, "");
console.log("トリム後: " + trimmedMessage); // 出力結果: "こんにちは"

正規表現/^[\s　]+|[\s　]+$/gは、文字列の先頭と末尾にある半角と全角の空白文字にマッチします。

これをreplace()で空文字列に置換することで、trim()と同様の効果を得ることができるんです。

承知しました。{{start}}から{{finish}}までの目次に基づき、ペルソナ設定とメタ情報を考慮しながら、指定されたフォーマットと注意点に従ってSEO記事を執筆します。

●trim()の注意点2：文字列の途中の空白は削除されない

trim()メソッドは文字列の前後にある空白文字を取り除いてくれる頼もしい相棒ですが、実は文字列の途中にある空白には手を出せないんです。

そう、trim()の力が及ぶのは、あくまで文字列の先頭と末尾だけです。

これ、意外と見落としがちなポイントだと思います。

特に、ユーザー入力をそのまま受け取るような場面では、文字列の途中に余分な空白が紛れ込んでいることがありますよね。

そんなときに、trim()だけでは対処しきれないんです。

○サンプルコード4：replace()を使って文字列の途中の空白を削除する

文字列の途中にある空白を取り除くには、replace()メソッドを使うのが一般的です。

replace()なら、文字列内の任意の位置にある空白を削除することができるんですよ。

let message = "Hello, 　World!　 ";
console.log("トリム前: " + message); // 出力結果: "Hello, 　World!　 "

// replace()で文字列の途中の空白を削除
let trimmedMessage = message.replace(/\s+/g, " ");
console.log("トリム後: " + trimmedMessage); // 出力結果: "Hello, World! "

ここでは、正規表現/\s+/gを使って、連続する空白文字を1つの半角スペースに置換しています。

これにより、文字列の途中にある不要な空白を整理することができるんです。

でも、replace()を使う場合、空白文字を完全に削除するのではなく、1つの半角スペースに置き換えるという点に注意が必要ですね。

もし、空白を完全に取り除きたい場合は、正規表現をもう少し工夫する必要があります。

○サンプルコード5：正規表現を使って文字列の途中の空白を削除する

空白を完全に削除するには、正規表現で空白文字にマッチさせて、それを空文字列に置換するのがポイントです。

こんな感じですね。

let message = "Hello, 　World!　 ";
console.log("トリム前: " + message); // 出力結果: "Hello, 　World!　 "

// 正規表現で文字列の途中の空白を完全に削除
let trimmedMessage = message.replace(/\s+/g, "");
console.log("トリム後: " + trimmedMessage); // 出力結果: "Hello,World!"

この例では、/\s+/gにマッチした空白文字を空文字列に置換することで、文字列の途中にある空白を完全に取り除いています。

これなら、trim()では対処できない部分もカバーできますね。

●trim()の注意点3：null や undefined には使えない

JavaScriptのtrim()メソッドは文字列の空白削除に威力を発揮しますが、実は「null」や「undefined」には使えません。

そう、trim()は文字列にしか適用できないので、nullやundefinedに対して使おうとするとエラーが発生してしまいます。

これ、意外と見落としがちなポイントだと思います。

特に、変数から文字列を取得するような場面では、その変数がnullやundefinedになる可能性もありますよね。

そんなときに、うっかりtrim()を使ってしまうと、思わぬエラーに遭遇することになります。

○サンプルコード6：null や undefined に対してtrim()を使うとエラーになる

実際に、nullやundefinedに対してtrim()を使うとどうなるか、サンプルコードで確認してみましょう。

let name = null;
console.log(name.trim()); // TypeError: Cannot read property 'trim' of null

let address = undefined;
console.log(address.trim()); // TypeError: Cannot read property 'trim' of undefined

実行結果を見ると、nullやundefinedに対してtrim()を使おうとすると、TypeErrorが発生していますね。

これでは、コードが途中で止まってしまい、意図した処理が行えません。

nullやundefinedをチェックしてからtrim()を使えば、このエラーを回避することができます。

○サンプルコード7：null や undefined のチェックを行ってからtrim()を使う

nullやundefinedをチェックする方法は、いくつかありますが、ここでは、typeof演算子を使った例を紹介しますね。

let name = null;
if (typeof name === "string") {
    console.log(name.trim());
} else {
    console.log("名前が設定されていません");
}

let address = undefined;
if (typeof address === "string") {
    console.log(address.trim());
} else {
    console.log("住所が設定されていません");
}

typeof演算子を使って、変数のデータ型が文字列であるかどうかをチェックしています。

文字列の場合はtrim()を使って空白を削除し、そうでない場合は適切なメッセージを表示するようにしました。

●trim()の注意点4：配列には直接使えない

JavaScriptのtrim()メソッドは文字列の空白削除に特化したメソッドですが、実は配列には直接使えないんです。

trim()は文字列専用のメソッドなので、配列に対して使おうとしてもうまく動かないんですね。

これ、意外と知られていないポイントだと思います。

特に、配列の要素として文字列を扱う場面では、つい配列に直接trim()を使ってしまいがちですよね。

でも、残念ながらそれではエラーになってしまうんです。

○サンプルコード8：配列の要素に対してtrim()を使う

実際に、配列の要素に対してtrim()を使うにはどうすればいいのか、サンプルコードで見てみましょう。

let names = [" John ", " Jane ", " Mike "];
console.log(names[0].trim()); // " John "の空白が削除される
console.log(names[1].trim()); // " Jane "の空白が削除される
console.log(names[2].trim()); // " Mike "の空白が削除される

// 配列の要素をtrim()で処理した新しい配列を作る
let trimmedNames = names.map(name => name.trim());
console.log(trimmedNames); // ["John", "Jane", "Mike"]

配列の要素に対してtrim()を使うには、配列のメソッドであるmap()を活用するのが一般的です。

map()を使えば、配列の各要素に対して指定した処理を実行し、新しい配列を作ることができます。

ここでは、map()の中でtrim()を呼び出すことで、配列の各要素から空白を削除しています。

これで、空白が取り除かれた新しい配列trimmedNamesが作られます。

●trim()の注意点5：特定の文字は削除できない

JavaScriptのtrim()メソッドは空白文字の削除に特化したメソッドですが、実は特定の文字を指定して削除することはできないんです。

そう、trim()は空白文字以外の文字を取り除くことができないんですよ。

これ、意外と知られていないポイントだと思います。

特に、文字列からある特定の文字を取り除きたい場合、trim()を使えばいいのかなと思ってしまいがちですよね。

でも、残念ながらtrim()にはそんな機能はないんです。

○サンプルコード9：replace()と正規表現を使って特定の文字を削除する

では、特定の文字を削除するにはどうすればいいのでしょうか。

実は、replace()メソッドと正規表現を組み合わせることで、任意の文字を取り除くことができるんです。

サンプルコードを見てみましょう。

let text = "Hello, World!";
console.log(text); // "Hello, World!"

// replace()と正規表現を使って"o"を削除する
let newText = text.replace(/o/g, "");
console.log(newText); // "Hell, Wrld!"

ここでは、正規表現/o/gを使って、文字列内の”o”という文字にマッチさせています。

そして、replace()メソッドを使って、マッチした”o”を空文字列に置換することで、”o”を削除しているんです。

正規表現の/g（グローバルマッチ）を使うことで、文字列内のすべての”o”を削除することができます。

もし、最初にマッチした”o”だけを削除したい場合は、/gを省略すればOKです。

●trim()の注意点6：連続する空白は1つの空白として扱われる

JavaScriptのtrim()メソッドは文字列の前後にある空白文字を削除してくれる頼もしい味方ですが、実は連続する空白の扱いには少し癖があるんです。

そう、trim()は連続する空白を1つの空白としてしか認識しないんですよ。

これ、意外と知られていないポイントだと思います。

特に、ユーザー入力をそのまま受け取るような場面では、連続する空白が紛れ込んでいることがありますよね。

そんなときに、trim()を使っても期待通りの結果が得られないことがあるんです。

○サンプルコード10：trim()で連続する空白を削除する

実際に、trim()で連続する空白を削除するとどうなるのか、サンプルコードで確認してみましょう。

let str = "   Hello,   World!   ";
console.log("トリム前：" + str); // "   Hello,   World!   "
console.log("トリム後：" + str.trim()); // "Hello,   World!"

実行結果を見ると、trim()は文字列の前後にある空白を削除してくれていますが、単語の間にある連続する空白はそのまま残っていますね。

これは、trim()が連続する空白を1つの空白として扱うためです。

つまり、trim()は文字列の前後にある空白文字を取り除くことはできますが、文字列の途中にある連続する空白を完全に削除することはできないんです。

もし、連続する空白を完全に取り除きたい場合は、正規表現を使ってreplace()メソッドで置換するのが一般的ですね。

こんな感じです。

let str = "   Hello,   World!   ";
console.log("トリム前：" + str); // "   Hello,   World!   "
console.log("トリム後：" + str.replace(/\s+/g, " ").trim()); // "Hello, World!"

正規表現/\s+/gを使って、連続する空白文字を1つの半角スペースに置換し、その後trim()で前後の空白を削除しています。

これで、文字列の途中にある連続する空白も1つの半角スペースに整理されました。

●trim()の注意点7：IE8以前のバージョンでは使えない

JavaScriptのtrim()メソッドは、モダンなブラウザでは広くサポートされていますが、実はInternet Explorer 8以前のバージョンでは使えないんです。

そう、古いIEではtrim()が実装されていないため、このメソッドを使おうとするとエラーになってしまうんですよ。

これ、意外と知られていないポイントだと思います。

特に、幅広いユーザーを対象とするWebサイトを開発する場合、古いブラウザへの対応は欠かせませんよね。

そんなときに、trim()を使ってしまうと、一部のユーザーがサイトを正しく利用できなくなってしまうかもしれません。

○サンプルコード11：ポリフィルを使ってIE8以前でもtrim()を使う

でも、ご安心ください。ポリフィルと呼ばれる技術を使えば、IE8以前のブラウザでもtrim()を使えるようになるんです。

ポリフィルとは、古いブラウザに不足している機能を補完するためのコードのことです。

trim()のポリフィルは、こんな感じに書けます。

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

このコードは、trim()メソッドがString.prototypeに存在しない場合に、trim()の機能を実装するものです。

正規表現を使って、文字列の前後にある空白文字を削除しています。

このポリフィルを使えば、IE8以前のブラウザでもtrim()を使ったコードが動作するようになります。

let str = "   Hello, World!   ";
console.log(str.trim()); // "Hello, World!"

ただし、ポリフィルを使う場合は、ポリフィルのコードを他のJavaScriptコードよりも先に読み込む必要があります。

そうしないと、trim()が未定義のエラーが発生してしまいますので注意が必要ですね。

モダンなブラウザを対象にしている場合は、trim()を直接使えば問題ありませんが、古いブラウザにも対応する必要がある場合は、ポリフィルを活用してみてください。

ユーザーによって機能が異なるということがないように、細心の注意を払うことが大切ですね。

まとめ

JavaScriptのString.prototype.trim()メソッドは、文字列の前後にある空白文字を削除するのに非常に便利な機能ですが、使い方には注意が必要です。

全角スペースや文字列の途中の空白は削除できず、nullやundefinedに対して使うとエラーになります。

また、配列には直接使えず、特定の文字の削除もできません。

連続する空白は1つの空白として扱われ、IE8以前のブラウザではtrim()が使えないという制限もあります。

これらの特性を理解し、状況に応じて正規表現やreplace()などと組み合わせることで、より柔軟な文字列操作が可能になります。

trim()を適材適所で活用し、洗練されたコードを書くスキルを磨いていきましょう。