String.prototype.toUpperCase() 사용법

toUpperCase() 함수는
문자열을 대문자로 변환해서 반환하는 함수입니다.

toUpperCase() 함수는 다음과 같은 특징을 가지고 있습니다.

  • 문자열의 모든 소문자를 새로운 대문자로 변환해서 반환합니다.
  • 반환 값은 대문자로 변환된 문자열입니다.
  • 반환만 하기 때문에 원본 문자열은 바뀌지 않습니다.
JavaScript 
const originalString = "Hello, World!";
const uppercaseStr = originalString.toUpperCase();

console.log(uppercaseStr); // 출력: "HELLO, WORLD!"

/* 👇 원본 문자열은 바뀌지 않습니다. */
console.log(originalString); // 출력: "Hello, World!"

문자열을 소문자로 변환하려면 toLowerCase() 함수를 사용하세요.

toUpperCase() 함수의 형식은 다음과 같습니다.

구문

JavaScript 
str.toUpperCase();

str: toUpperCase() 함수를 적용할 원본 문자열입니다.

매개변수

없습니다.

반환 값

원본 문자열을 대문자로 변환해서 반환합니다. 이 과정에서 원본 문자열은 바뀌지 않습니다.

주의할 점

toUpperCase() 함수는 문자열(String)에서만 사용할 수 있는 메서드입니다. 만약 문자열이 아닌 다른 데이터 타입에 대해 이 메서드를 호출하면 TypeError가 발생합니다. 이러한 호출은 유효한 작업이 아닙니다.

JavaScript 
const number = 17;

try {
    let result = number.toUpperCase(); // 이 부분에서 TypeError 발생
    console.log(result);
} catch (error) {
    console.error(error); // TypeError: number.toUpperCase is not a function
}

위의 코드에서 toUpperCase()는 숫자 데이터 타입에 사용되고 있기 때문에 TypeError가 발생합니다. 이를 방지하기 위해서는 toUpperCase()를 호출하기 전에 데이터 타입을 확인하고 문자열로 변환하는 등의 처리를 해야 합니다.

사용 예제

toUpperCase() 함수는 toLowerCase() 함수처럼 자바스크립트에서 매우 폭넓게 사용되는 함수 중 하나입니다.
이 함수는 주로 문자열 비교나 대문자로 문자열 출력 형식을 통일할 때 사용됩니다.

문자열 비교

문자열을 비교할 때 대소문자 구분 없이 일치 여부를 확인할 수 있습니다.
아래의 예제는 toUpperCase() 함수를 사용해서 문자열을 모두 대문자로 변환하여 일치 여부를 확인하는 코드입니다.

JavaScript 
const str1 = "apple";
const str2 = "APPLE";

if (str1.toUpperCase() === str2.toUpperCase()) {
    console.log("두 문자열은 같습니다.");
} else {
    console.log("두 문자열은 다릅니다.");
}

// 출력: "두 문자열은 같습니다."

대문자로 문자열 출력 형식 통일

한글에서는 대소문자 구분이 없지만 영문은 대소문자를 구분해서 사용하는 경우가 많습니다. 특히 타이틀이나 제목, 안전문구 및 경고 메시지 등에 대문자로 문자열을 출력하는 경우가 많은데 toUpperCase() 함수를 사용하면 매우 유용합니다.

JavaScript 타이틀이나 제목의 대문자 변환 
const title = "web development";
console.log(title.toUpperCase()); // 출력: "WEB DEVELOPMENT"
JavaScript 안전 문구 및 경고 메시지의 대문자 변환 
const warningMessage = "keep out of reach of children";
console.log(warningMessage.toUpperCase());
// 출력: "KEEP OUT OF REACH OF CHILDREN"

명세서

toUpperCase() 함수의 명세서 사양
명세서 사양
toUpperCase() ECMAScript Language Specification
#sec-string.prototype.touppercase

브라우저 호환성

toUpperCase() 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
toUpperCase() 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

참고문헌

같이 보기