trimで文章中の空白も消える？JavaScriptで両端と途中を分けて試そう

入力した名前の前後に空白が入ってしまった。JavaScriptのtrim()で整えられるよ。でも、文章の中にある空白まで全部消す機能ではないんだ。

このページでは、両端の空白と途中の空白を区別し、trimの結果を受け取れるようになることを目指す。必要なのはブラウザだけ。ページ内の作例にある架空の短い文字列で試そう。登録や外部への送信はないよ。

文字列の先頭と末尾を見よう

文字列は、プログラムで文章や記号をまとめて扱うための値。' red blue 'なら、redの前、redとblueの間、blueの後にそれぞれ半角空白が二つある。

const text = '  red  blue  ';
const result = text.trim();
console.log(result); // redとblueの間の空白二つは残る

trimは先頭側と末尾側にある空白を取り除いた文字列を返す。この例の結果は'red blue'。redとblueの間の二つの空白は、途中にあるので残るよ。

空白が見えづらいときは、作例の「JSON表示」を見よう。JSONはデータを文字で表す形式の一つ。今回は引用符の内側に何が残るかを見やすくするために使っている。

元の値を勝手に書き換えるわけではない

const original = '  red  blue  ';
original.trim();
console.log(original); // 前後の空白がある元の値

const cleaned = original.trim();
console.log(cleaned);  // 'red  blue'

trimは結果を返し、元の文字列を変更しない。呼んだだけで元の変数や入力欄が書き換わる、と考えないでね。後で整えた値を使うなら、cleanedのような変数で結果を受け取ろう。

画面の入力欄へ反映したい場合は、たとえばinput.value = input.value.trim()のように、返された値を代入する処理が必要になる。ただし今回の作例は元と結果を比べるため、入力欄自体を書き換えていないよ。

空白は半角のスペースだけではない

JavaScriptの仕様で空白や行の区切りとして扱う文字が対象になる。両端のタブや改行も取り除かれる。一方、途中の改行は残るよ。

const text = '\tred\nblue\t\n';
console.log(JSON.stringify(text.trim()));
// "red\nblue"

コード中の\tはタブ、\nは改行を表す書き方。JSON表示では、それぞれこの記号として見えるので、見えない文字がどこにあるかを調べやすい。

全角の空白も対象になる例があるけれど、「見えない文字なら何でも消える」とは考えないでね。対象文字は仕様で決まっていて、意味のある区切りや独自の記号まで一律に取り除く機能ではないんだ。

作例で比べる小さな手順

1. 最初の入力は変えず、「trimで比べる」を押す。
2. 元のJSON表示では両端に空白があり、結果では両端だけがなくなったことを見る。
3. redとblueの間には空白が二つ残ることを確認する。
4. 「改行・タブの例を入れる」を押し、結果にredとblueの間の改行が残ることを見る。
5. 「最初から試す」で最初の文字列と未実行の表示へ戻す。

空白だけを入力した場合は空の文字列になる。結果のJSON表示は""で、文字列の中身がない状態だよ。数値の0や、文字列以外のnullへ変わるわけではない。

期待した結果にならないとき

文章中の空白が残るのは、この作例では正しい結果。すべての空白を削除する処理へすぐ変える前に、区切りに意味がないか考えよう。名前や英文の単語、住所などでは、途中の空白を消すと別の内容になってしまう。

また、.trim()を呼べるのは文字列の値。入力がない場合にnullなどが返る別のAPIと組み合わせるなら、まず受け取った値の型や未入力時の扱いを確認する。何でも文字列へ変換すればよい、という判断とも分けたいね。

画面に文字を安全に出す基本はtextContentの作例、改行や空白の見え方はwhite-spaceの比較でも確認できる。

2026年11月1日にMDNを確認し、両端と途中の半角空白、タブ・改行、空白のみ、全角空白、元の入力の保持とリセットをChromiumの幅240・319・1280pxで検証した。