[javascript] 자바스크립트 첫글자 대문자로 (charAt, toUpperCase, slice)

참고: https://flexiple.com/javascript/javascript-capitalize-first-letter/

이 포스트에서는 자바스크립트에서 문자열의 첫 글자를 대문자로 바꾸는 방법을 알아보겠습니다.

문자열의 첫 글자를 대문자로

자바스크립트에서 주어진 문자열의 첫 번째 글자를 대문자로 변경하려면 다음의 세 가지 함수를 사용해야 합니다:

• charAt()
• toUpperCase()
• slice()

charAt():

charAt() 메소드는 문자열의 특정위치에 해당하는 문자를 리턴합니다.

문법:

string.charAt(index)

예제:

const str = 'sisiblog';
const str2 = str.charAt(0);
console.log(str2);

toUpperCase():

toUpperCase() 메소드는 주어진 문자열의 모든 문자를 대문자로 변환합니다.

문법:

string.toUpperCase()

예제:

const str = 'sisiblog';
const str2 = str.toUpperCase();
console.log(str2);

위의 예제에서 보다시피 문자열 str에 toUpperCase() 메소드를 사용하여 문자열의 모든 문자를 대문자로 변환하는 것을 확인할 수 있습니다.

하지만 이는 첫 글자만 대문자로 바꾸고자 하는 우리의 목표가 아닙니다. 문자열의 첫 번째 문자만 대문자로 표시하려면 charAt() 메소드를 사용하여 첫 번째 문자를 분리한 다음 toUpperCase() 메소드를 사용하여 대문자로 바꿔야합니다.

slice

이 함수는 지정된 start 위치에서 end 위치까지의 문자열을 슬라이스 합니다.

문법:

string.slice(start, end)

예제:

const str = 'sisiblog';
const str2 = str.slice(1);
console.log(str2);

이제 세 가지 함수를 모두 사용하여 입력 문자열의 첫 번째 문자를 대문자로 바꿔보겠습니다.

const str = 'sisiblog';
const str2 = str.charAt(0).toUpperCase() + str.slice(1);
console.log(str2);

const str = 'abc efg';
const str2 = str.charAt(0).toUpperCase() + str.slice(1);
console.log(str2);

위의 이미지에서 볼 수 있듯이 문자열의 첫 글자를 대문자로 바꿨습니다. 여기서 문자열의 모든 단어의 첫 번째 글자를 대문자로 바꾸려면 어떻게 해야할까요?

각 단어의 첫 글자를 대문자로

문자열의 모든 단어의 첫 글자를 대문자로 바꾸려면 문자열에서 단어를 분리해 배열에 저장한 다음 배열의 각 요소에 대해 위의 방법을 사용하여 첫 글자를 대문자로 바꾼 다음 배열의 요소들을 다시 합쳐 결과 문자열을 만들면됩니다. 다음의 예제를 보겠습니다:

const str = 'i have learned something new today';
const arr = str.split(" ");

for (var i = 0; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
}

const str2 = arr.join(" ");

console.log(str2);

관련 글

자바스크립트 특정 위치의 문자 얻기 (charAt)

자바스크립트 배열의 일부분 가져오기 (slice)

자바스크립트 대문자 소문자 전환 방법 (toUpperCase)