JAVASCRIPT

[JS] Trim( )메소드 - 공백 제거 함수

프린벼르 2022. 2. 13. 01:07

trim () 표지

 

간혹, 데이터를 받아올 때, 공백이 많이 붙어있는 것을 볼 수 있다. 나의 경우엔 to-do-list를 만들때, 공백을 써도 입력이 되어서 그 작동을 막기위해서 공백을 지워내려면 어떻게 하지? 라는 고민을 했었다. 이러한 경우들에, Trim()을 사용하면 간단하게 공백을 제거할 수 있다. 이번 포스팅에서는 Trim()이 무엇인지와 그 사용방법에 대해서 알아보려한다.


trim 이란..?
"trim" 이라는 영단어를 우리나라 말로 해석하면 "다듬다, 손질하다, 정돈하다" 등의 표현을 가지고 있다.
즉, 말 그대로 trim은 문자열을 다듬는 작업을 말하는 것이다. 

trim 메소드 원리 설명

위 사진 처럼 trim을 사용하면 중간의 공백은 제외하고 앞뒤 공백만 제거해준다.
문자열 앞 뒤에 공백중복되어 여러 개가 있어도 모두 제거 가능하다.

♥ HOW TO trim ()  ..??   =>  문자열.trim()
아래의 예시코드를 보고 이해해보자 ..!

예시 코드

위 사진을 통해, trim()메소드를 이용하면 문자열 앞뒤의 공백을 제거해줄 수 있다는 것을 알 수 있다.


공백 제거 해주는 함수가 또 있다고 ??
"YES"

trim 메소드 말고도 공백을 제거해줄 수 있는 함수가 또 존재한다. 바로 replace함수다. 문자열 앞 뒤 공백은 trim 함수를 통해서 처리가 가능하지만 문자열 내부에 대한 공백 처리는 trim 함수로는 불가능합니다. 따라서 replace 함수와 정규식을 이용하여 공백을 제거해야한다.


replace() 예제1

위와같이 replace 를 이용하면 공백을 빈값으로 바꾸어 제거하는것과 같은 효과를 볼 수 있다.

다만, 문자열의 모든 공백을 제거하기 위해서는 정규식을 사용해야합니다.

정규식에서 / /사이의 값을 replace의 두번째 인자값으로 교체가 가능하며, 뒤에붙는 "g(global:전역)"는 문자열의
모든 / / 사이의 값을 바꿔줍니다.

replace() 예제2

replace는 문자를 교체하는것이기 때문에 공백이 아니라도 가능하다.
 
위 사진처럼 "a"라는 문자를 공백으로 교체를 하기위해 정규식을 사용하였는데, g만 사용하면 같은 문자라도
대소문자를 가리게 된다. (위에 예제를 보면 소문자 a만 사라진 것을 확인할 수 있음 )
 
따라서 "i" 옵션을 함께 주면 대소문자를 모두 포함시킬 수 있다.