보통은 프로그래밍에서 변수나 함수의 이름을 만들 때, 스네이크 케이스(my_variable_name)나 카멜 케이스(myVariableName)를 사용합니다. 하지만 때로는 스페이스 케이스(My Variable Name)로 변환해야 할 때도 있습니다. 이번 포스트에서는 JavaScript로 문자열을 스페이스 케이스로 변환하는 방법에 대해 알아보겠습니다.

1. split과 join을 사용하는 방법

가장 간단한 방법은 JavaScript의 split과 join 함수를 사용하는 것입니다. split 함수를 사용하여 공백을 기준으로 문자열을 배열로 분리한 후, join 함수를 사용하여 각 요소를 스페이스로 이어붙이면 됩니다.

function convertToSpaceCase(str) {
  return str.split(' ').join(' ');
}

const snakeCaseStr = 'my_variable_name';
const spaceCaseStr = convertToSpaceCase(snakeCaseStr);

console.log(spaceCaseStr); // "my variable name"

위의 예제 코드에서는 convertToSpaceCase 함수를 정의하고, 인자로 받은 문자열을 split 함수를 사용하여 공백으로 분리합니다. 그리고 join 함수를 사용하여 배열의 각 요소를 스페이스로 이어붙인 후 반환합니다.

2. 정규식을 사용하는 방법

또 다른 방법은 정규식을 사용하는 것입니다. 정규식을 사용하면 더욱 유연하게 문자열을 변환할 수 있습니다.

function convertToSpaceCase(str) {
  return str.replace(/_/g, ' ').replace(/([A-Z])/g, ' $1').toLowerCase();
}

const camelCaseStr = 'myVariableName';
const spaceCaseStr = convertToSpaceCase(camelCaseStr);

console.log(spaceCaseStr); // "my variable name"

위의 예제 코드에서는 convertToSpaceCase 함수를 정의하고, replace 함수를 사용하여 _를 스페이스로 변환한 후, 대문자 앞에 스페이스를 추가합니다. 마지막으로 소문자로 변환한 문자열을 반환합니다.

마무리

JavaScript에서 문자열을 스페이스 케이스로 변환하는 방법에 대해 알아보았습니다. split과 join 함수 또는 정규식을 사용하여 간단하게 구현할 수 있습니다. 필요에 따라 이러한 방법들을 활용하여 효율적으로 문자열을 변환해보세요!

참고: MDN web docs - String.prototype.split() 참고: MDN web docs - Array.prototype.join() 참고: MDN web docs - String.prototype.replace() 참고: 정규식 테스트 사이트 - RegExr