CamelCase를 JavaScript의 일반 문자열로

이 게시물에서는 JS JavaScript에서 camelCase 문자열을 일반 문자열로 바꾸는 방법을 살펴보겠습니다.

1단계 - 낙타 케이스 깨기

예를 들어 보겠습니다. "checkThisOutBro"

이제 우리는 이 camelCase 문자열을 "Check This Out Bro"로 나누기를 원합니다.

이를 위해 정규식을 사용합니다.

const camelToFlat=(camel)=>{
    const camelCase =camel.replace(/([a-z])([A-Z])/g, '$1 $2')

    return camelCase
}

이것은 우리에게 줄 것입니다

check This Out Bro
흠, 적어도 이제는 단순한 문자열입니다. 더 개선해 보겠습니다.

2단계 - 이 문자열에서 모든 문자 가져오기...

그래서 얻은 후에

check This Out Bro
split() 함수를 인수로 ""와 함께 사용하여 각 단어를 요소로 하여 배열에서 분해할 수 있습니다.

const camelToFlat=(camel)=>{
    const camelCase =camel.replace(/([a-z])([A-Z])/g, '$1 $2').split(" ")

    return camelCase
}

그러면 [ 'check', 'This', 'Out', 'Bro' ]가 출력으로 반환되고 이제 해당 낙타 케이스에 단어 배열이 있습니다.

"와우 Suyash 당신은 우리가 camelCase를 문자열로 바꿀 것이라고 말했는데 왜 이제 배열입니까?"



잠시만 기다려 주세요. 다시 문자열로 만들겠지만 더 좋습니다!

3단계 - 이번에는 첫 글자를 대문자로!

이제 문자열에 대한 단어 배열이 있으므로 루프를 실행하고 0 인덱스에서 모든 문자 또는 문자를 대문자로 만들 수 있습니다.

const camelToFlat=(camel)=>{
    const camelCase =camel.replace(/([a-z])([A-Z])/g, '$1 $2').split(" ")

    let flat =""

    camelCase.forEach(word=>{    
        flat = flat + word.charAt(0).toUpperCase() + word.slice(1) + " "
    })  
    return flat
}

이 작업을 수행한 후 함수는 camelCase 배열의 모든 단어를 가져와 첫 문자(인덱스 0)를 대문자로 변환하고 다른 문자와 결합하여 문자열을 만듭니다.


"푸우푸! 매직"

이제 출력은 Check This Out Bro가 됩니다.

Snippet Sauce link for code snippet !


이는 애플리케이션에서 객체의 키를 렌더링하는 동안 일반적으로 사용됩니다( Objects.keys(yourObject)는 배열을 반환함). 그리고 일반적으로 키는 camelCase에 있으므로 일반 문자열이지만 동적인 방식을 원합니다.

블로그가 마음에 드셨다면 ❤️