웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

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

Last Modified : 2023-01-28 / Created : 2023-01-28
3,838
View Count

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

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


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

AS-IS 'webIsFree'

TO-BE 'web-is-free'

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



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


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

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

위 세 가지를 수행하여야 케밥 케이스(Kebab case)를 얻을 수 있게 될 것입니다. 우선 완성된 함수의 코드는 다음과 같습니다.
const toKebabCase = (text) => {
  return text
    .replace(/_/g, '-')
    .replace(/([A-Z])/g, '-$1')
    .replace(/^-/, '')
    .toLowerCase();
};

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

각각 몇 가지의 문자열에 사용하여 결과를 확인해보았습니다.
toKebabCase('web_is_free');
toKebabCase('webIsFree');
toKebabCase('WebIsFree');

// 실행 결과
'web-is-free'
'web-is-free'
'web-is-free'

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


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


위 함수에서 사용된 정규표현식은 각각 3가지입니다.
text.replace(/_/g, '-')
text.replace(/([A-Z])/g, '-$1')
text.replace(/^-/, '')

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

다음으로 카멜 케이스의 대문자를 -로 치환합니다.
text.replace(/([A-Z])/g, '-$1')

마지막으로 시작 위치에 대시 기호가 있는 경우 모두 제거합니다.
text.replace(/^-/, '')


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


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

아래의 글도 찾고 계시지 않나요?

    Previous

    자바스크립트 웹페이지 공유하기 기능 추가. navigator.share()

    Previous

    [자바스크립트] 텍스트 말하는 기능 구현. speechSynthesis