JavaScript - 문자열 공백 제거, 3가지 방법

자바스크립트에서 문자열의 공백을 제거하는 방법을 소개합니다. 문자열에서 모든 공백을 제거하거나, 문자열의 시작 또는 끝에 있는 공백을 제거할 수 있습니다.

1. trim()으로 공백 제거

String.trim()은 문자열의 공백을 제거합니다.

1.1 trim() : 문자열 왼쪽, 오른쪽 공백 모두 제거

trim()은 아래와 같이 문자열의 왼쪽, 오른쪽 공백을 모두 제거합니다.

let str = "  Hello, World, JavaScript  ";
console.log("[" + str + "]");

let result = str.trim();
console.log("[" + result + "]");

Output:

[Hello,World,JavaScript]

1.2 trimStart(), trimEnd() : 문자열 왼쪽 또는 오른쪽 공백 제거

문자열의 왼쪽 또는 오른쪽 공백을 제거하려면 trimStart() 또는 trimEnd()를 사용해야합니다. trimStart()는 문자열의 왼쪽 공백을 제거하며, trimEnd()는 오른쪽 공백을 제거합니다.

let str = "  Hello, World, JavaScript  ";

let result = str.trimStart();
console.log("[" + result + "]");

result = str.trimEnd();
console.log("[" + result + "]");

Output:

[Hello, World, JavaScript  ]
[  Hello, World, JavaScript]

2. replace()로 공백 제거

replace는 replace(regex, str)으로 정규표현식을 사용할 수 있으며 정규표현식에 해당하는 패턴을 인자로 전달한 str로 교체합니다. replace()와 정규표현식을 이용하여 문자열의 공백을 제거할 수 있습니다.

2.1 문자열 왼쪽, 오른쪽 공백 모두 제거

아래 예제에서 정규표현식 / /g는 문자열에서 모든 공백을 찾습니다. 찾은 공백은 ''으로 변환하여 제거됩니다.

let str = "  Hello, World, JavaScript  ";

let result = str.replace(/ /g, '');
console.log("[" + result + "]");

Output:

[Hello,World,JavaScript]

2.2 문자열 왼쪽 또는 오른쪽 공백 제거

replace와 정규표현식 패턴으로 왼쪽 또는 오른쪽 공백을 제거할 수도 있습니다. 아래 예제에서 사용된 정규 표현식의 의미는 다음과 같습니다.

• /^ +/ : ^는 문자열의 시작을 의미하고, +는 1개 이상의 공백을 의미합니다. 즉, 문자열 왼쪽에 있는 공백만 찾는 정규표현식입니다.
• / +$/ : $는 문자열의 끝을 의미하고, +는 1개 이상의 공백을 의미합니다. 즉, 문자열 오른쪽에 있는 공백만 찾는 정규표현식입니다.

let str = "  Hello, World, JavaScript  ";

let result = str.replace(/^ +/, '');
console.log("[" + result + "]");

result = str.replace(/ +$/, '');
console.log("[" + result + "]");

Output:

[Hello, World, JavaScript  ]
[  Hello, World, JavaScript]

3. split()과 join()으로 모든 공백 제거

split()과 join()으로 문자열의 모든 공백을 제거할 수도 있습니다.

아래 예제에서는 split(' ')으로 공백을 기준으로 문자열을 분리하고, join('')으로 분리된 문자열을 공백 없이 합칩니다. 이 과정에서 문자열의 공백은 모두 제거됩니다.

let str = "  Hello, World, JavaScript  ";

let result = str.split(' ').join('');
console.log("[" + result + "]");

Output:

[Hello,World,JavaScript]