JavaScript - 첫번째 글자만 대문자로 변경, 2가지 방법

자바스크립트에서 문자열의 첫번째 문자만 대문자로 바꾸는 방법을 소개합니다. 문자열을 분해하여 원하는 문자만 대문자로 변경하고 다시 합치는 방법이 있고, 다른 방법으로는 정규표현식을 이용하는 방법이 있습니다.

1. charAt()과 slice()를 이용하여 첫글자만 대문자로 변환

다음은 charAt()과 slice()를 이용하여 문자열의 첫번째 문자만 대문자로 변환하는 예제입니다. charAt(0)으로 첫번째 문자만 가져오고, slice(1)으로 첫번째 문자를 제외한 나머지 문자열을 잘라서 가져옵니다. 첫번째 문자를 대문자로 변경한 이후에 나머지 문자열과 다시 합치면 첫글자만 대문자인 문자열이 됩니다.

let str = "hello world";

let firstChar = str.charAt(0);
let others = str.slice(1);
console.log(firstChar);
console.log(others);

let newStr = firstChar.toUpperCase() + others;
console.log(newStr);

Output:

h
ello world
Hello world

2. 정규표현식을 이용하여 첫글자만 대문자로 변환 (1)

아래 예제는 정규표현식과 replace()를 이용하여 첫글자만 대문자로 바꾸는 예제입니다. replace()는 인자로 정규표현식을 받을 수 있으며, 패턴에 해당하는 부분을 변경할 수 있습니다. 그리고 정규표현식 패턴에서 사용된 ^는 문자열의 시작을 의미하고, [a-z]는 소문자 알파벳 1개를 의미합니다. 이 패턴에 일치하는 문자열이 있으면 대문자로 변환하도록 구현하였습니다.

let str = "hello world";

let newStr = str.replace(/^[a-z]/, char => char.toUpperCase());
console.log(newStr);

Output:

Hello world

3. 정규표현식을 이용하여 첫글자만 대문자로 변환 (2)

hello world javascript를 Hello World Javascript 처럼, 정규표현식을 이용하여 단어의 시작 문자를 모두 대문자로 바꿀 수도 있습니다.

아래 예제는 위의 코드와 거의 동일하지만 정규표현식의 패턴 부분만 다릅니다. 패턴에서 \b는 문자의 경계선을 의미하며, 즉, 이 패턴으로 단어의 시작 부분을 찾을 수 있습니다. g는 정규표현식의 플래그인데, 일치하는 패턴을 모두 변경하라는 의미입니다. 플래그에 g를 입력하지 않으면 일치하는 패턴이 여러개라도 가장 먼저 찾은 패턴 하나의 경우만 변경됩니다.

let str = "hello world javascript";

let newStr = str.replace(/\b[a-z]/g, char => char.toUpperCase());
console.log(newStr);

Output:

Hello World Javascript