JavaScript trim() 메서드 완벽 가이드: 문자열 공백 제거 방법

JavaScript의 trim() 메서드는 문자열의 시작과 끝에 있는 공백 문자를 제거합니다. trimLeft()와 trimStart()는 문자열 앞쪽의 공백을, trimRight()와 trimEnd()는 문자열 뒤쪽의 공백을 제거하는 메서드입니다.

JavaScript trim() 메서드가 필요한 이유

문자열의 시작이나 끝에 스페이스, 탭, 줄바꿈 같은 불필요한 공백이 포함되어 있는 경우를 종종 마주하게 됩니다. 예를 들어 고객 이름 목록을 다룰 때, 각 이름 끝에 붙어 있는 여분의 공백을 제거하고 싶을 수 있습니다.

이럴 때 유용한 것이 바로 JavaScript의 trim() 함수입니다. trim() 함수는 문자열의 시작과 끝에 있는 공백 문자를 깔끔하게 없애 줍니다.

또한 상황에 따라 trim() 대신 함께 사용하거나 대체해서 쓸 수 있는 관련 메서드도 몇 가지 있습니다.

• trimLeft()
• trimStart()
• trimRight()
• trimEnd()

이 글에서는 JavaScript trim() 함수의 동작 원리를 살펴보고, trim()과 함께 또는 대신 사용할 수 있는 네 가지 관련 메서드까지 모두 정리해 드립니다.

JavaScript trim() 메서드의 기본 문법

trim() 메서드는 문자열의 시작과 끝에 있는 모든 공백을 제거하며, 그 결과로 새로운 문자열을 반환합니다. 이 메서드는 어떤 인수도 받지 않으며, 문자열 뒤에 점(.)으로 연결해서 호출합니다.

var ourString = "Test    ";
ourString.trim();

위 코드는 문자열의 시작과 끝에 있는 공백을 모두 제거합니다. 이 예시에서는 문자열 끝에만 공백이 있으므로 끝부분의 공백만 제거됩니다.

trim()이 새로운 문자열을 반환하는 이유는 JavaScript의 문자열이 불변(immutable)이기 때문입니다. 즉, 한 번 생성된 문자열은 직접 수정할 수 없으므로, trim()은 변경된 새 문자열을 만들어 반환하는 방식으로 동작합니다.

미리 서식이 지정된 텍스트에 공백이 섞여 있어 코드가 의도대로 동작하지 않는 경우에도 문자열 다듬기(trimming)는 유용하게 활용됩니다.

trim() 기본 예제

다음은 JavaScript trim() 함수가 실제로 동작하는 모습을 보여주는 예제입니다.

var studentName = "Benjamin     ";
console.log(studentName.trim());

변수 studentName에 할당된 값의 끝에는 여러 개의 공백이 포함되어 있습니다. trim() 함수를 사용하면 이 공백들을 손쉽게 제거할 수 있습니다.

trim() 메서드는 다음과 같은 새로운 문자열을 콘솔에 반환합니다.

"Benjamin"

trim() 메서드는 문자열 끝의 공백 문자를 제거하지만, 원본 문자열 자체는 변경하지 않습니다. 다듬어진 문자열을 계속 사용하고 싶다면 새 변수에 저장해야 합니다.

var studentName = "Benjamin     ";
var trimmedStudentName = studentName.trim();
console.log(trimmedStudentName);

위 코드는 Benjamin을 출력합니다. 이제 다듬어진 학생 이름이 trimmedStudentName 변수에 저장되었으므로, 프로그램 전체에서 이 변수를 통해 문자열을 참조할 수 있습니다.

문자열의 한쪽 공백만 제거하는 메서드

trim() 함수는 문자열의 앞과 뒤 양쪽 모두에서 공백을 제거한다는 점에 유의해야 합니다. 따라서 문자열의 시작 부분 또는 끝 부분 중 한 곳의 공백만 제거하고 싶다면, trim() 대신 아래에서 소개하는 전용 메서드를 사용하는 것이 좋습니다.

문자열 앞쪽의 공백을 제거하려면 trimStart() 또는 trimLeft()를, 문자열 뒤쪽의 공백을 제거하려면 trimEnd() 또는 trimRight()를 사용하면 됩니다.

JavaScript trimStart()와 trimLeft()

문자열의 시작 부분에 있는 공백 문자를 제거하고 싶다고 가정해 보겠습니다. 이름 데이터 앞에 붙은 공백을 없애야 하는 상황에서 trimStart()와 trimLeft()를 활용하는 예제는 다음과 같습니다.

var studentName = "     Benjamin     ";
console.log(studentName.trimStart());
console.log(studentName.trimLeft());

위 코드는 다음과 같이 출력됩니다.

"     Benjamin"
"     Benjamin"

trimStart()와 trimLeft() 메서드를 사용했기 때문에 문자열 앞쪽의 공백만 제거되고, 뒤쪽 공백은 그대로 남아 있는 것을 확인할 수 있습니다.

JavaScript trimEnd()와 trimRight()

반대로 문자열 끝부분의 공백을 제거하고 싶다면 trimEnd() 또는 trimRight() 메서드를 사용하면 됩니다.

var studentName = "     Benjamin     ";
console.log(studentName.trimEnd());
console.log(studentName.trimRight());

위 코드는 다음과 같이 출력됩니다.

"Benjamin     "
"Benjamin     "

문자열 끝의 공백은 성공적으로 제거되었지만, 문자열 시작 부분의 공백은 그대로 유지되는 것을 볼 수 있습니다.

마무리

JavaScript의 trim() 함수는 문자열의 시작과 끝에 있는 공백을 제거합니다. trim()은 문자열 뒤에 연결해서 호출하며, 별도의 인수를 받지 않고 항상 새로운 문자열을 반환합니다.

문자열의 특정 방향에 있는 공백만 제거하고 싶다면 trimStart(), trimLeft(), trimEnd(), trimRight() 메서드를 활용하세요.

JavaScript를 더 깊이 배우고 싶다면 학습 로드맵과 추천 강좌, 온라인 학습 리소스를 비교한 학습 가이드를 참고하는 것도 좋은 방법입니다.