Home IT/WEB 문자열을 대문자 또는 소문자로 변환하는 toUpperCase, toLowerCase

[javascript]문자열을 대문자 또는 소문자로 변환하는 toUpperCase, toLowerCase

문자열을 다룰 때 유용하게 사용할 수 있는 두 가지 강력한 메서드, toUpperCase()와 toLowerCase()에 대해 알아보려고 합니다. 이 두 메서드는 문자열을 각각 대문자 또는 소문자로 변환해주며, 문자열 처리에 있어서 매우 흔하게 사용됩니다.

toUpperCase()

inline ad

toUpperCase() 메서드는 호출된 문자열의 모든 알파벳을 대문자로 변환한 새로운 문자열을 반환합니다. 이 메서드는 원본 문자열에는 영향을 주지 않으며, 새로운 문자열을 결과로 제공합니다.

const originalString = "Hello World!";
const upperString = originalString.toUpperCase();

console.log(upperString); // "HELLO WORLD!"

toUpperCase() 메서드는 originalString 변수에 저장된 문자열의 모든 알파벳을 대문자로 변환하여 upperString 변수에 저장합니다.

toLowerCase()

toLowerCase() 메서드는 호출된 문자열의 모든 알파벳을 소문자로 변환한 새로운 문자열을 반환합니다. 마찬가지로, 이 메서드도 원본 문자열을 변경하지 않습니다.

const originalString = "Hello World!";
const lowerString = originalString.toLowerCase();

console.log(lowerString); // "hello world!"

활용 예시

사용자 입력 정규화

웹 애플리케이션을 개발할 때 사용자로부터 입력받은 데이터를 처리하거나 검증해야 하는 경우가 많습니다. 이때, 대소문자를 구분하지 않고 처리해야 하는 경우가 있습니다. 예를 들어, 사용자가 이메일 주소를 입력할 때 대문자 혹은 소문자로 혼용해서 입력하는 경우가 있는데, 이를 통일된 형식으로 처리하기 위해 toLowerCase()를 사용할 수 있습니다.

const email = "UserEmail@Example.com";
const normalizedEmail = email.toLowerCase();

console.log(normalizedEmail); // "useremail@example.com"

검색 기능 구현 시

검색 기능을 구현할 때 사용자가 입력한 검색어와 실제 데이터를 대소문자 구분 없이 비교해야 할 때 toLowerCase() 또는 toUpperCase()를 활용할 수 있습니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

const searchKeyword = "javascript";
const data = ["JavaScript", "HTML", "CSS"];

const filteredData = data.filter((item) => item.toLowerCase().includes(searchKeyword.toLowerCase()));

console.log(filteredData); // ["JavaScript"]

toUpperCase()와 toLowerCase() 메서드는 JavaScript에서 문자열을 처리할 때 매우 유용한 도구입니다. 사용자의 입력을 정규화하거나, 데이터를 대소문자 구분 없이 비교하는 등 다양한 상황에서 활용할 수 있습니다.

관련문서

MDN web docs : String.prototype.toUpperCase(), String.prototype.toLocaleUpperCase()

RECENT POSTS

[javscript]API 응답에서 키 값들을 검증하는 방법

API 응답에서 다수의 키 값들을 검증할 때 코드의 중복을 줄이는 것은 유지보수성을 향상시키고, 가독성을 높이는 데 중요합니다. 이를 위해 몇 가지 접근 방법을 사용할...

[javscript]특정 키를 제외하고 두 객체를 비교하는 방법

특정 키를 제외하고 두 객체를 비교하는 작업은 데이터의 동등성을 평가하고 싶을 때 유용합니다. Lodash 라이브러리를 통해서 처리할 수 있는 방법에 대해서 살펴보겠습니다. Lodash를 사용한 특정...

[javscript]배열을 특정 키의 값에 따라 정렬하는 방법, _.orderBy

Lodash의 _.orderBy 메소드를 사용하면 배열을 특정 키의 값에 따라 정렬할 수 있습니다. 이 메소드는 배열의 각 항목을 정렬할 기준이 되는 하나 이상의 속성 이름과...

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...