jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드

jQuery

작성일 2026-10-26 최근 수정일 2026-10-26

jQuery.trim()은 문자열의 처음과 끝에 있는 공백 문자를 제거하며 가운데 공백은 유지하던 유틸리티입니다. jQuery 3.5에서 사용 중단이 권고됐고 4.0에서 제거됐으므로 새 코드에서는 text.trim()을 사용합니다. 기존 코드를 옮길 때는 null·undefined·숫자처럼 문자열이 아닌 입력의 처리도 함께 확인합니다.

버전과 제거 범위 확인하기

jQuery.trim() 공식 문서와 jQuery 4 업그레이드 안내에 제거된 API로 명시돼 있습니다. jQuery 4에서 $.trim is not a function 오류가 나면 이 변경이 원인일 수 있습니다. 선택한 요소의 메서드가 아니라 $.trim(text) 또는 jQuery.trim(text)으로 호출하던 전역 함수입니다.

항목	기존 $.trim(text)	네이티브 text.trim()
버전	3.5부터 사용 중단 권고, 4.0에서 제거	JavaScript 문자열 메서드
처리 범위	문자열 양끝의 공백	문자열 양끝의 공백
가운데 공백	유지	유지
원본 문자열	결과 문자열 반환	원본을 바꾸지 않고 결과 반환
문자열 아닌 입력	null 등의 과거 처리 확인 필요	value.trim() 전에 자료형 또는 변환 정책 확인

String.prototype.trim()은 양끝의 공백과 줄 종료 문자를 제거한 새 문자열을 반환합니다. 단어 사이의 공백을 하나로 합치거나 모든 공백을 지우는 함수가 아닙니다. 제거 대상에는 탭·줄바꿈·NBSP도 포함되지만, 눈에 보이지 않는 모든 문자가 공백인 것은 아닙니다.

양끝과 가운데 공백을 비교하는 전체 예제

전체 코드를 UTF-8의 trim-demo.html로 저장하고 브라우저에서 엽니다. 비교 화면은 공식 jQuery 파일 4.0.0을 CDN(Content Delivery Network, 콘텐츠 전송 네트워크)에서 읽으므로 인터넷 연결이 필요하며 별도 설치는 없습니다. 문자열 자체의 .trim()에는 jQuery가 필요하지 않습니다.

예제는 네이티브 trim을 사용하고, $.trim이 존재할 때만 과거 결과를 비교합니다. jQuery Migrate를 넣지 않은 3.7.1과 4.0.0에서 실행하여 3.7.1에는 함수가 있고 4.0.0에는 없는 것을 확인했습니다. 공백·줄바꿈·유니코드 사례, 입력 적용과 아래 자료형 변환도 함께 검증했습니다.

<!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>

처음에는 앞뒤 공백 네 개만 빠지고 단어 사이 두 칸은 남습니다.

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

Preview trim은 결과만 보여 줍니다. 입력란에는 앞뒤 공백이 그대로 남습니다.
Apply to field를 누르면 .val()로 결과를 명시적으로 다시 넣으므로 입력란도 바뀝니다.
Sample의 Tabs and line breaks는 양끝의 탭·줄바꿈을 없애되 Alpha와 Beta 사이 두 칸을 유지합니다.
Non-breaking spaces는 U+00A0을 제거해 길이가 7에서 5로 줄어듭니다.
Zero-width spaces의 U+200B는 trim 대상이 아니므로 길이가 7로 유지됩니다.
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 || ""를 사용하면 0·false도 빈 값으로 바꿀 수 있습니다. 반대로 String(null).trim()은 빈 값이 아니라 "null"이라는 문자열을 만듭니다. 누락과 빈 문자열을 구분해야 하는 데이터라면 변환 전에 검증하고 그 차이를 남깁니다.

공백 정리와 입력 검증을 구분하기

공백만 있는 문자열은 trim 뒤 빈 문자열이 됩니다. 검색어나 일반 이름 필드에서 이를 빈 입력으로 판단할 수 있지만, 앞뒤 공백 자체가 의미 있는 값에 무조건 적용하지 않습니다. 사용자가 의도한 내용을 바꿔도 되는지 필드의 규칙부터 정합니다.

trim은 HTML 태그 제거, 대소문자 통일, 내부 공백 정리나 보안 검증을 하지 않습니다. 예제에서 HTML처럼 생긴 입력도 결과를 .text()로 표시하므로 문자 그대로 보입니다. 보이지 않는 문자가 남는다면 무조건 삭제하기보다 코드 포인트와 필요한 정규화 규칙을 확인합니다.

오류가 계속되면 실제 jQuery 버전, 남아 있는 $.trim 호출과 이를 사용하는 플러그인, 입력값의 자료형을 확인합니다. 대체한 뒤에는 null·undefined·0·빈 문자열·공백뿐인 문자열과 실제 입력 사례를 다시 검사합니다. 라이브러리를 낮추는 것보다 호출과 입력 정책을 정리해 업그레이드 안내에 따라 옮기는 편이 유지관리에 적합합니다.

jQuery