문자열을 camelCase로 변환해야 했던 적이 있나요? 오픈 소스 Supabase 저장소를 탐색하는 동안 흥미로운 코드 조각을 발견했습니다. 그들이 사용하는 방법은 다음과 같습니다.

function featureToCamelCase(feature: Feature) {
  return feature
    .replace(/:/g, '\_')
    .split('\_')
    .map((word, index) => (index === 0 ? word : word\[0\].toUpperCase()   word.slice(1)))
    .join('') as FeatureToCamelCase
}

이 기능은 꽤 깔끔합니다. 콜론을 밑줄로 바꾸고 문자열을 단어로 분할한 다음 각 단어를 매핑하여 CamelCase로 변환합니다. 첫 번째 단어는 소문자로 유지되고 후속 단어는 다시 결합되기 전에 첫 번째 문자를 대문자로 표시합니다. 간단하면서도 효과적입니다!

Stack Overflow에서 정규 표현식을 사용하지 않는 또 다른 접근 방식을 발견했습니다. 대안은 다음과 같습니다.

function toCamelCase(str) {
  return str.split(' ').map(function(word, index) {
    // If it is the first word make sure to lowercase all the chars.
    if (index == 0) {
      return word.toLowerCase();
    }
    // If it is not the first word only upper case the first char and lowercase the rest.
    return word.charAt(0).toUpperCase()   word.slice(1).toLowerCase();
  }).join('');
}

SO의 이 코드 조각에는 어떤 종류의 정규식도 사용하지 않는다는 점을 제외하고 이 코드의 기능을 설명하는 설명이 있습니다. 문자열을 camelCase로 변환하는 Supabase의 방식에서 발견된 코드는 주석과 사용된 정규식을 제외하면 이 SO 답변과 매우 유사합니다.

.replace(/:/g, '\_')

이 방법은 문자열을 공백으로 분할한 다음 각 단어에 매핑합니다. 첫 번째 단어는 모두 소문자로 표시되고, 이후 단어의 첫 번째 문자는 대문자로 표시되고 나머지는 소문자로 표시됩니다. 마지막으로 단어들이 다시 결합되어 camelCase 문자열을 형성합니다.

Stack Overflow 사용자의 흥미로운 의견 중 하나는 이 접근 방식의 성능 이점을 언급했습니다.

“ 정규 표현식을 사용하는 솔루션을 묻는 질문에도 불구하고 정규 표현식을 사용하지 않은 경우 1입니다. 이는 훨씬 더 명확한 솔루션이자 성능 측면에서도 확실한 승리입니다(복잡한 정규식을 처리하는 것은 단순히 여러 문자열을 반복하고 그 일부를 결합하는 것보다 훨씬 어려운 작업이기 때문입니다). jsperf.com/camel-casing-regexp-or-character-manipulation/1 여기에서 이 예제와 함께 몇 가지 예제를 가져왔습니다. 대부분의 경우 명확성을 위해 이 버전을 선호하지만 성능 향상을 위해 이 버전을 선호합니다.”

두 가지 방법 모두 장점이 있습니다. Supabase 코드의 정규식 접근 방식은 간결하며 강력한 문자열 조작 기술을 활용합니다. 반면, 비정규식 접근 방식은 정규식과 관련된 계산 오버헤드를 방지하므로 명확성과 성능으로 칭찬받습니다.

둘 중 하나를 선택하는 방법은 다음과 같습니다.

• JavaScript의 강력한 정규식 기능을 활용하는 컴팩트한 단일 라이너 솔루션이 필요한 경우 정규식 접근 방식을 사용하세요. 또한 미래의 본인이나 코드를 사용하는 다음 개발자가 이해할 수 있도록 정규식의 기능을 설명하는 주석을 추가하세요.
• 가독성과 성능을 우선시한다면, 특히 긴 문자열을 처리하거나 이 변환을 여러 번 실행할 때 정규식이 아닌 방법을 선택하세요.

shadcn-ui/ui를 처음부터 빌드하는 방법을 배우고 싶으십니까? 확인해 보세요 처음부터 빌드하기

나에 대해서:

웹사이트: https://ramunarasinga.com/

링크드인: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

이메일: [email protected]

shadcn-ui/ui를 처음부터 빌드

참고자료:

1. https://github.com/supabase/supabase/blob/master/apps/studio/hooks/misc/useIsFeatureEnabled.ts#L16
2. https://stackoverflow.com/a/35976812