[자바스크립트] 카멜 케이스, 파스칼케이스, 스네이크 케이스를 케밥 케이스로 변경하기, toKebabCase

변수 등의 텍스트 네이밍에 여러가지 케이스가 사용될 수 있습니다. 예를들어 대표적인 카멜 케이스 외에도 파스칼 케이스, 케밥 케이스, 스네이크 케이스 등등이 있죠.

"모두 케밥 케이스로 변경해보자!"

만약 자바스크립트를 사용하여 어떤 텍스트를 케밥 케이스로 변경하려고 합니다. 케밥 케이스는 -(dash) 기호를 사용하여 문자열 구분하는 작성법인데 특히 css를 선언할 때 케밥이 선호되죠. 예를들어 아래처럼 말이죠...

AS-IS 'webIsFree'

TO-BE 'web-is-free'

그럼 이 경우 어떻게 하면 되는지 간략하게 알아봅니다.

# 자바스크립트 카멜 케이스로 변경하기(Kebab-case)

아래서는 함수 toKebabCase()을 만듭니다. 여기서 함수 toKebabCase()는 text 이름의 인자로 문자열을 받으며 케밥 케이스로 변경 후 리턴하게 됩니다. 이를 구현하기 위해서 케밥 케이스로 변경하기 위해서 무엇이 필요한지 생각해보면 아래와 같이 나열할 수 있습니다.

• _(언더바) 기호 -로 변환하기
• 모든 대문자 dash(-)로 변환하기
• 맨 앞에 위치한 - 기호는 제거
• 이 외의 모든 대문자는 소문자로 변경하기

위 세 가지를 수행하여야 케밥 케이스(Kebab case)를 얻을 수 있게 될 것입니다. 우선 완성된 함수의 코드는 다음과 같습니다.

코드를 살펴보면 정규표현식을 사용하여 1, 2번을 구현하였고 3번은  문자열에 사용할 수 있는 내장함수 toLowerCase()를 적용하였습니다. 그럼 실제로 잘 동작하는지 확인해볼까요?

각각 몇 가지의 문자열에 사용하여 결과를 확인해보았습니다.

결과를 확인해보니 카멜 및 파스칼, 스네이크 케이스 모두 케밥(kebab) 케이스로 변경되어 나타난 것을 확인할 수 있었습니다. 아래에서는 각각 사용된 정규식을 간략하게 알아봅니다.

! 사용된 정규표현식 확인하기

위 함수에서 사용된 정규표현식은 각각 3가지입니다.

각각 특정 케이스에 대응하기 위해서 사용되었는데 하나씩 보면은 먼저 아래는 _ 기호인 어더바를 모두 -(대시) 기호로 변환합니다. 스네이크 케이스를 카멜로 변환하는데 필요합니다.

다음으로 카멜 케이스의 대문자를 -로 치환합니다.

마지막으로 시작 위치에 대시 기호가 있는 경우 모두 제거합니다.


사용된 정규표현식은 여기까지입니다. 남은 대문자는 모두 소문자로 변환하였고 toLowerCase()를 사용하였습니다.


여기까지 자바스크립트에서 문자열을 케밥 케이스로 변경하기 위한 방법을 알아봤습니다.