728x90
JavaScript 문자열 대소문자 변환 방법
1. 소문자로 변환: toLowerCase()
toLowerCase() 메서드는 문자열의 모든 문자를 소문자로 변환합니다.
const str = "Hello, World!";
const lowerStr = str.toLowerCase();
console.log(lowerStr); // "hello, world!"
2. 대문자로 변환: toUpperCase()
toUpperCase() 메서드는 문자열의 모든 문자를 대문자로 변환합니다.
const str = "Hello, World!";
const upperStr = str.toUpperCase();
console.log(upperStr); // "HELLO, WORLD!"
3. 대소문자를 반대로 변환하기
문자열의 대문자는 소문자로, 소문자는 대문자로 변환하려면 각 문자를 하나씩 확인하고, 대소문자를 반대로 변환해야 합니다.
function swapCase(str) {
return [...str]
.map(char =>
char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase()
)
.join('');
}
const swappedStr = swapCase("Hello, World!");
console.log(swappedStr); // "hELLO, wORLD!"
4. 입력 필드에서 실시간 변환
입력 필드에서 실시간으로 대소문자를 변환하는 기능도 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Case Converter</title>
</head>
<body>
<label for="inputField">텍스트 입력:</label>
<input type="text" id="inputField" oninput="convertCase(event)" />
<p id="outputField"></p>
<script>
function convertCase(event) {
const input = event.target.value;
const output = [...input]
.map(char =>
char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase()
)
.join('');
document.getElementById("outputField").textContent = output;
}
</script>
</body>
</html>
사용자가 입력한 값의 대소문자가 실시간으로 변환되어 outputField에 표시됩니다.
요약
JavaScript에서 문자열의 대소문자를 변환하는 방법은 매우 간단합니다.
- toLowerCase()와 toUpperCase() 메서드를 활용해 모든 문자를 변환.
- 각 문자를 하나씩 확인하여 대소문자를 반대로 변환하는 함수 구현.
- 실시간 변환 기능을 통해 사용자 경험(UX) 개선.
출처
