JavaScript / toUpperCase·toLowerCase로 대소문자 변환

toUpperCase()는 문자열을 대문자로, toLowerCase()는 소문자로 변환한 새 문자열을 반환합니다. 원래 문자열은 바뀌지 않습니다. 입력값을 실시간으로 보여 주려면 input 이벤트에서 두 메서드를 호출하면 됩니다.

toUpperCase()와 toLowerCase()의 기본 동작

두 메서드는 인자가 필요 없습니다. 영문 대소문자를 포함해 변환 가능한 문자를 처리하며, 숫자와 대부분의 기호는 그대로 남습니다. 원본 문자열을 수정하지 않으므로 변환 결과가 필요하면 변수에 대입하거나 출력에 사용해야 합니다.

const original = 'Aaa Bbb 123';
const upper = original.toUpperCase();
const lower = original.toLowerCase();
console.log(upper);    // AAA BBB 123
console.log(lower);    // aaa bbb 123
console.log(original); // Aaa Bbb 123

문자열 값이 null이나 undefined일 수 있다면 메서드를 바로 호출하지 말고 값을 먼저 확인하세요. 두 메서드가 반환하는 것은 새 문자열입니다. MDN의 toUpperCase() 문서와 toLowerCase() 문서에 기본 동작이 정리되어 있습니다.

입력값을 실시간으로 변환해 보여 주기

원문의 keyup 이벤트와 jQuery 의존성 없이, 기본 input 이벤트로 타이핑·붙여넣기 등 값 변경을 처리할 수 있습니다. 아래 예제는 사용자가 편집 중인 입력값을 건드리지 않고 별도 출력에 결과를 보여 줍니다. 입력란 자체를 매번 덮어쓰면 커서 위치나 입력기 조합 중인 글자가 불편하게 바뀔 수 있습니다.

input.addEventListener('input', () => {
  upper.textContent = input.value.toUpperCase();
  lower.textContent = input.value.toLowerCase();
});

HTML 요소의 텍스트를 바꾸는 데는 textContent를 사용합니다. 입력한 문자열을 HTML로 해석하지 않고 그대로 표시하므로 실습에도 적합합니다.

전체 예제와 결과 확인

다음 코드를 case-conversion.html로 저장하고 브라우저에서 엽니다. 초기값 Aaa Bbb는 대문자 AAA BBB, 소문자 aaa bbb로 나타납니다. 입력란을 수정하거나 문자를 붙여넣으면 두 출력이 갱신되고 원본 입력란은 그대로 유지됩니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>문자열 대소문자 변환</title>
</head>
<body>
<h1>문자열 대소문자 변환</h1>
<label for="source">원본 문자열</label>
<input id="source" value="Aaa Bbb">
<p>대문자: <output id="upper"></output></p>
<p>소문자: <output id="lower"></output></p>
<script>
const input = document.querySelector('#source');
const upper = document.querySelector('#upper');
const lower = document.querySelector('#lower');

function update() {
  upper.textContent = input.value.toUpperCase();
  lower.textContent = input.value.toLowerCase();
}
input.addEventListener('input', update);
update();
</script>
</body>
</html>

입력란을 비우면 출력도 빈 문자열이 됩니다. 여러 문자를 입력해 원본과 변환 결과를 비교해 보세요. jQuery나 외부 스크립트 설치는 필요하지 않습니다.

언어별 대소문자 규칙이 필요한 경우

기본 메서드는 특정 언어의 대소문자 규칙을 지정하지 않습니다. 터키어처럼 로캘에 따라 문자의 변환 결과가 달라야 한다면 toLocaleUpperCase("tr") 또는 toLocaleLowerCase("tr")처럼 로캘을 명시하세요. 단순한 대소문자 변환만으로 모든 언어의 동일성 비교나 검색 규칙을 해결할 수는 없습니다.

console.log('i'.toUpperCase());           // I
console.log('i'.toLocaleUpperCase('tr')); // İ

로캘이 중요한 사용자 이름이나 검색 기능은 저장·비교 정책을 먼저 정해야 합니다. MDN의 toLocaleUpperCase() 문서에서 언어별 변환을 확인할 수 있습니다.