JavaScriptのtrim
メソッドは、文字列の先頭(左側)と末尾(右側)から空白文字(ホワイトスペース)を取り除くために使用されます。
ユーザー入力の整形、データの前処理、比較の前に余分な空白を除去するなど、文字列操作においてよく利用される便利なメソッドです。
この記事では、trim
メソッドの基本的な使い方、対象となる空白文字の種類、trimStart
/ trimEnd
との違い、そして使用する際の注意点について解説します。
trimメソッドの基本的な構文
trim
メソッドは、文字列オブジェクトのメソッドとして呼び出します。
const newString = originalString.trim();
originalString
: 空白文字を除去したい元の文字列です。newString
: 先頭と末尾の空白文字が除去された新しい文字列が返されます。
trim
メソッドは元の文字列を変更せず、新しい文字列を返します。
trimメソッドを使ってみる
実際にtrim
メソッドを使って、動作を確認してみます。
例1:基本的な空白の除去
const text1 = " Hello World ";
const trimmedText1 = text1.trim();
console.log(`元の文字列: "${text1}"`);
console.log(`整形後の文字列: "${trimmedText1}"`);
// 出力:
// 元の文字列: " Hello World "
// 整形後の文字列: "Hello World"
text1
変数には、前後に空白のある文字列が格納されています。
そしてtrim
メソッドを使うことで、文字列の先頭と末尾にあったスペースが除去されています。
また、文字列の途中のスペースが保持されていることが確認できます。
例2:改行やタブが含まれるとき
trim
メソッドは、スペースだけでなく、改行(\n
)やタブ(\t
)などの空白文字も除去します。
const text2 = "\n\t JavaScript Trim Example \n";
const trimmedText2 = text2.trim();
console.log(`元の文字列: "${text2}"`);
console.log(`整形後の文字列: "${trimmedText2}"`);
// 出力:
// 元の文字列: "
// JavaScript Trim Example
// "
// 整形後の文字列: "JavaScript Trim Example"
text2
変数には、改行とタブが含まれた文字列が格納されています。
trim
メソッドを使うことで、改行やタブが削除されたことが確認できました。
例3:文字列の前後に空白がないとき
文字列の先頭や末尾に空白がない場合でも、trim
を呼び出すことはできます。
その場合、元の文字列と同じ内容の新しい文字列が返されます。
const text3 = "Already Trimmed";
const trimmedText3 = text3.trim();
console.log(`元の文字列: "${text3}"`);
console.log(`整形後の文字列: "${trimmedText3}"`);
// 出力:
// 元の文字列: "Already Trimmed"
// 整形後の文字列: "Already Trimmed"
text3
変数は前後に空白のない文字列です。
その場合にtrim
メソッドを使うと、そのままの文字列が返ってきます。
trimメソッドが除去する空白文字の種類
trim
メソッドは、以下のUnicodeの空白文字(WhiteSpace プロパティを持つ文字)をすべて除去します。
- スペース (
)
- タブ (
\t
) - 改行 (
\n
) - キャリッジリターン (
\r
) - フォームフィード (
\f
) - 垂直タブ (
\v
) - ノーブレークスペース (
\xA0
) - 各種Unicodeスペース文字 (例:
\u2000
から\u200A
までの一般句読点スペース、\u202F
(狭いノーブレークスペース),\u205F
(ミディアム数学スペース),\u3000
(全角スペース) など)
trimStart/trimEndメソッドとの違い
ES2019 (ECMAScript 2019) から、文字列の片側だけから空白を除去するメソッドが追加されました。
trimStart
(またはtrimLeft
): 文字列の先頭(左側)からのみ空白文字を除去します。trimEnd
(またはtrimRight
): 文字列の末尾(右側)からのみ空白文字を除去します。
これらのメソッドも trim
と同様に、元の文字列を変更せず、新しい文字列を返します。
const text = " Example Text ";
console.log(`元の文字列: "${text}"`);
console.log(`trim(): "${text.trim()}"`); // "Example Text"
console.log(`trimStart(): "${text.trimStart()}"`); // "Example Text "
console.log(`trimEnd(): "${text.trimEnd()}"`); // " Example Text"
trimメソッドを使う際の注意点
trimメソッドを使う際の注意点です。
新しい文字列を返す
trim
は元の文字列を変更しない非破壊的なメソッドです。
結果を使用するには、戻り値を新しい変数に代入する必要があります。
文字列の途中は変更しない
文字列の途中にある空白(単語間のスペースなど)は trim
の対象外です。
これらを除去したい場合は、replace()
メソッドと正規表現を組み合わせる必要があります。
(例: str.replace(/\s+/g, ' ').trim()
で複数の文字列中のスペースを1つにし、前後も整形)
数値への変換
Number
関数や単項プラス演算子 (+
) で文字列を数値に変換する際、前後の空白は自動的に無視されますが、trim
を先に適用することでより安全かつ意図を明確にできます。
まとめ
JavaScriptのtrim
メソッドは、文字列の先頭と末尾からあらゆる種類の空白文字を効率的に除去するための非常に便利な機能です。
ユーザー入力の整形、データのクリーニング、文字列の比較など、Web開発の多くの場面で不可欠なメソッドと言えます。
元の文字列を変更しない非破壊的なメソッドであること、そして trimStart
/ trimEnd
との使い分けを理解して、trim
メソッドを効果的に活用しましょう。
コメント