Frontend

[javascript] 문자열 공백 제거 replace() or trim()

Dddu 2024. 9. 8. 21:42

이번에 공백제거를 추가할 일이 있었어서 이번주 블로그 주제는 이거다 싶었다 ^_^ 

JavaScript에서 공백을 제거하는 방법으로 replace와 trim을 사용할 수 있지만, 이 두 메소드의 사용 목적과 결과는 다르다.

1. trim 

목적: 문자열의 양쪽 끝에서만 공백을 제거한다.

형식:

string.trim()
 

설명:

  • trim 메소드는 문자열의 시작과 끝에서 공백 문자(스페이스, 탭, 줄 바꿈 등)를 제거한다.
  • 문자열 중간의 공백은 제거 X

예제:

let text = "   Hello world!   ";
let trimmedText = text.trim();
console.log(trimmedText); // "Hello world!"

2. replace 메소드

목적: 문자열 내의 특정 부분을 다른 문자열로 대체한다. 공백 제거를 위해 정규 표현식을 사용할 수 있다.

형식:

string.replace(searchValue, newValue)

설명:

  • searchValue가 공백을 나타내는 정규 표현식일 때, replace를 사용하여 문자열 내 모든 공백을 제거할 수 있다.
  • 전역 플래그(/g)를 사용하면 문자열 내의 모든 공백을 대체할 수 있음.

예제:

let text = "   Hello   world!   ";
let noSpacesText = text.replace(/\s+/g, ''); // 모든 공백 제거
console.log(noSpacesText); // "Helloworld!"
  • 위 예제에서 사용한 \s+는 하나 이상의 공백 문자를 의미하는 정규 표현식이다.(정규 표현식은 찾아보면 더 많이 있음) replace(/\s+/g, '')는 문자열 내의 모든 공백 문자를 제거해준다.

공백 제거에 대한 비교

  • trim: 문자열의 양쪽 끝에서 공백을 제거합니다. 문자열 중간의 공백은 그대ㅇ로.
  • replace: 정규 표현식을 사용하여 문자열 내의 모든 공백을 제거할 수 있음. 중간의 공백도 포함해 제거할 수 있다.

따라서, 공백 제거의 범위와 위치에 따라 적절한 메소드를 선택하면 된다. trim은 양쪽 끝의 공백만 제거할 때 유용하고, replace는 더 세밀한 공백 제거가 필요할 때 사용한다.