정의 및 사용 방법
trim() 함수는 주어진 문자열의 양 끝에서 공백을 제거한 새로운 문자열을 반환합니다.
특징
- 공백 문자(Space, Tab,
등)와 개행 문자(LF, CR 등)를 공백으로 간주합니다. - 주어진 문자열의 양 끝에서 공백을 제거하고 기존 문자열의 수정 없이 복사된 새로운 문자열을 반환합니다.
- 문자열 중간의 공백은 유지됩니다.
- 만약, 문자열의 한쪽, 또는 양 끝에서 공백이 없더라도 새로운 문자열로 반환합니다.
- 반환만 하기 때문에 원본 문자열은 바뀌지 않습니다.
- 공백(Whitespace)
- 문자가 나열될 때 다른 문자 사이에 공간을 제공하는 문자를 '공백 문자'라고합니다.
공백 문자에는 키보드의 스페이스(Space) 바를 누르면 입력되는 공백과 키보드의 탭(Tab) 키를 누르면 입력되는 탭을 의미 합니다. 는 줄바꿈이 일어나지 않는 공백 문자(Non-breaking Space)를 의미하는 HTML의 특수 문자(Entities)입니다.
'개행 문자'는 엔터(Enter) 키를 누를 때 줄바꿈하는 문자를 의미합니다. LF(Line Feed), CR(Carriage Return) 등은 개행 문자를 다루는 방식을 말합니다.
기본 예제
const originalString = " 환영합니다. 반갑습니다! ";
const trimString = originalString.trim();
/* 문자열 중간의 공백은 유지됩니다.
반환만 하기 때문에 원본 문자열은 바뀌지 않습니다. */
console.log(trimString); // 출력: "환영합니다. 반갑습니다!"
/* 👇 원본 문자열은 바뀌지 않습니다. */
console.log(originalString); // 출력: " 환영합니다. 반갑습니다! "
구문
str.trim()
str은 trim() 함수를 적용할 원본 문자열입니다.
매개변수
없습니다.
반환 값
원본 문자열의 양 끝에서 공백을 제거한 문자로 변환해서 반환합니다. 이 과정에서 원본 문자열은 바뀌지 않습니다.
주의할 점
trim() 함수는 문자열(String)에서만 사용할 수 있는 메서드입니다. 만약 문자열이 아닌 다른 데이터 타입에 대해 이 메서드를 호출하면 TypeError가 발생합니다. 이러한 호출은 유효한 작업이 아닙니다.
const number = 17;
try {
let result = number.trim(); // 이 부분에서 TypeError 발생
console.log(result);
} catch (error) {
console.error(error); // TypeError: number.trim is not a function
}
위의 코드에서 trim()은 숫자 데이터 타입에 사용되고 있기 때문에 TypeError가 발생합니다. 이를 방지하기 위해서는 trim()을 호출하기 전에 데이터 타입을 확인하고 문자열로 변환하는 등의 처리를 해야 합니다.
문자열 앞뒤 공백 제거 방법 더 살펴보기
trim() 함수는 문자열의 양 끝에서 공백을 제거한 새로운 문자열을 반환 용도로 매우 광범위하게 사용됩니다.
이 외에도 문자열의 replace() 함수와 정규식 활용하는 방법을 살펴보겠습니다.
replace() 함수와 정규식 활용
부연설명
replace() 함수는
문자열의 특정 부분을 검색하여 다른 문자열로 교체(replace)하는 함수입니다. 특정 문자열이나 정규 표현식 패턴을 사용하여 원본 문자열 내에서 대상을 검색하고, 검색된 부분은 원하는 문자열로 교체되어 반환됩니다.
여기에서는 정규 표현식 패턴을 사용하여 문자열의 양 끝에서 공백을 제거하는 방법을 살펴보겠습니다.
const str = " Hello, World! ";
const trimmedStr = str.replace(/^\s+|\s+$/g, "");
console.log(trimmedStr); // 출력: "Hello, World!"
일반적으로, 간단한 공백 제거가 목적이라면 trim() 함수를 사용하는 것이 권장됩니다. 직관적이고 성능이 좋기 때문입니다. 그러나 특별한 상황에서 더 정교한 패턴이 필요하다면 정규식을 사용하는 것도 유효한 선택일 수 있습니다.
호환성
| 메서드 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
Node.js
|
|---|---|---|---|---|---|
trim()
|
4 | 12 | 10.5 | 5 | 0.10 |
명세서
| 명세서 사양 | |
|---|---|
trim()
|
ECMAScript® 2026 Language Specification #sec-string.prototype.trim |