jQuery / メソッド / jQuery.trim() - 文字列の両端の空白を除く

jQuery.trim()は文字列の先頭と末尾の空白を取り除き、内部の空白は残すユーティリティでした。jQuery 3.5で非推奨、4.0で削除されたため、新しいコードはtext.trim()を使います。移行時はnull・undefined・数値など文字列以外の入力も確認します。

バージョンと削除する範囲を確認する

jQuery.trim()の仕様とjQuery 4移行ガイドに削除が記載されています。jQuery 4で$.trim is not a functionが出る場合、この変更が原因かもしれません。$.trim(text)やjQuery.trim(text)と呼ぶグローバル関数で、選択した要素のメソッドではありません。

String.prototype.trim()は両端の空白と行終端文字を除いた新文字列を返します。単語間の空白を一つにしたり、全空白を消したりはしません。タブ・改行・改行しない空白NBSPも対象ですが、不可視文字が全て空白とは限りません。

両端と内部空白を比べる完全な例

全コードをUTF-8のtrim-demo.htmlとして保存し、ブラウザーで開きます。比較画面はコンテンツ配信ネットワーク（CDN）から公式jQueryファイル4.0.0を読むためインターネットが必要ですが、インストールは不要です。文字列自体の.trim()にjQueryは不要です。

例はネイティブtrimを使い、$.trimがある場合だけ旧結果を比べます。jQuery Migrateなしの3.7.1と4.0.0で実行し、前者には関数があり後者にはないことを確認しました。空白・Unicode・入力欄への反映・以下の変換も検証しました。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Migrate from jQuery trim</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select, textarea { font: inherit; margin: 4px; max-width: 100%; }
    textarea { display: block; width: 90%; min-height: 90px; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Trim only the edges of a string</h1>
  <label for="sample">Sample:</label>
  <select id="sample"><option value="spaces">Edge and internal spaces</option><option value="lines">Tabs and line breaks</option><option value="nbsp">Non-breaking spaces</option><option value="zero">Zero-width spaces</option><option value="empty">Empty string</option></select>
  <label for="value">Value:</label>
  <textarea id="value"></textarea>
  <button type="button" id="preview">Preview trim</button>
  <button type="button" id="apply">Apply to field</button>
  <button type="button" id="reset">Reset</button>
  <pre id="result" aria-live="polite"></pre>
  <pre id="legacy"></pre>
  <script>
    $(function () {
      const samples = {
        spaces: "  Alpha  Beta  ",
        lines: "\t\nAlpha  Beta\n ",
        nbsp: "\u00a0Alpha\u00a0",
        zero: "\u200bAlpha\u200b",
        empty: ""
      };
      function preview() {
        const before = $("#value").val();
        const after = before.trim();
        $("#result").text(`before=${JSON.stringify(before)}\nafter=${JSON.stringify(after)}\nlength=${before.length} -> ${after.length}`);
        $("#legacy").text(typeof $.trim === "function"
          ? `Legacy result: ${JSON.stringify($.trim(before))}`
          : "jQuery.trim is unavailable; native trim is used");
      }
      function loadSample() { $("#value").val(samples[$("#sample").val()]); preview(); }
      $("#sample").on("change", loadSample);
      $("#preview").on("click", preview);
      $("#apply").on("click", function () { $("#value").val($("#value").val().trim()); preview(); });
      $("#reset").on("click", function () { $("#sample").val("spaces"); loadSample(); });
      loadSample();
    });
  </script>
</body>
</html>

最初は両端の4空白だけが消え、単語間の2空白は残ります。

before="  Alpha  Beta  "
after="Alpha  Beta"
length=15 -> 11

1. Preview trimは結果のみで、入力欄の前後空白は残ります。
2. Apply to fieldは.val()で明示的に書き戻すため欄も変わります。
3. Tabs and line breaksは両端のタブ・改行を除き、AlphaとBeta間の2空白を残します。
4. Non-breaking spacesはU+00A0を除き、長さ7から5になります。
5. Zero-width spacesのU+200Bは対象外で長さ7のままです。
6. Empty stringは空文字を返します。Resetは初期サンプルと入力欄を戻します。

null・undefined・0の移行方針

従来の$.trim()はnull・undefinedを空文字、数値0・falseを"0"・"false"にできました。null.trim()、undefined.trim()、数値の.trim()に単純変更はできません。文字列専用の契約なら型を確認し、誤った入力を先に処理します。

null・undefinedは空文字、他のプリミティブ値は文字列として残す方針なら、次のように明示変換します。開発者ツールのConsoleで実行する完全な部分コードです。任意のオブジェクトまで旧関数と完全互換を保証するものではありません。

function trimNullable(value) {
  return String(value ?? "").trim();
}
console.log(`null=${JSON.stringify(trimNullable(null))}`);
console.log(`undefined=${JSON.stringify(trimNullable(undefined))}`);
console.log(`zero=${JSON.stringify(trimNullable(0))}`);
console.log(`false=${JSON.stringify(trimNullable(false))}`);
console.log(`NBSP=${JSON.stringify("\u00a0A\u00a0".trim())}`);
console.log(`zero-width length=${"\u200bA\u200b".trim().length}`);

null=""
undefined=""
zero="0"
false="false"
NBSP="A"
zero-width length=3

??はnull・undefinedだけに空文字を適用し、0とfalseを残します。value || ""はそれらも消す場合があります。一方String(null).trim()は空文字ではなく"null"です。欠損と空文字の違いが必要なら変換前に検証します。

空白整理と入力検証を分ける

空白だけの文字列はtrim後に空になります。検索語や一般的な名前欄では適切でも、前後空白に意味がある値へ一律適用しません。入力を変えてよいか、先に欄の規則を決めます。

trimはHTMLタグ除去、大文字小文字の統一、内部空白の整理、セキュリティ検証をしません。例はHTML風の入力も.text()で文字通り表示します。不可視文字が残る場合はコードポイントと必要な正規化を調べます。

エラーが残る場合は実際のjQueryバージョン、残った$.trim呼び出しとプラグイン、入力型を確認します。移行後はnull・undefined・0・空文字・空白のみ・実際の入力例を再確認します。単なるダウングレードより、移行ガイドに従い呼び出しと入力方針を整理します。