Javascript에서 이 함수를 사용하여 문자열을 camelCase로 변환합니다.-JS 튜토리얼-php.cn

Javascript에서 이 함수를 사용하여 문자열을 camelCase로 변환합니다.

PHPz

풀어 주다： 2024-08-01 08:07:23

원래의

638명이 탐색했습니다.

문자열을 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<typeof feature>
}

로그인 후 복사

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

Convert a string to camelCase using this function in Javascript.

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의 강력한 정규식 기능을 활용하는 컴팩트한 단일 라이너 솔루션이 필요한 경우. 또한 미래의 자신이나 코드를 사용하는 다음 개발자가 이해할 수 있도록 정규식의 기능을 설명하는 주석을 추가하세요.
비정규식 방법을 선택하세요 가독성과 성능을 우선시한다면, 특히 긴 문자열을 처리하거나 이 변환을 여러 번 실행할 때 더욱 그렇습니다.