JavaScript에서 알아야 할 문자열 메서드

자바스크립트 문자열 조작의 핵심: 필수 속성 및 메서드 완벽 가이드

개발자에게 문자열을 메서드 없이 다루는 것은 마치 나침반 없이 항해하는 것과 같습니다. 길을 잃기 쉽고, 효율성도 떨어지죠. 이러한 어려움을 극복하기 위해 자바스크립트 문자열의 기본적인 속성과 메서드를 정확히 파악하는 것이 중요합니다. 지금부터 하나씩 자세히 살펴보겠습니다.

문자열 길이: length 속성

length 속성은 문자열 내 문자 개수를 반환합니다. 예를 들어 "example" 문자열의 length 값은 7이 됩니다.

const text = "koreantech.org";
console.log(text.length);

대문자 변환: toUpperCase() 메서드

toUpperCase() 메서드는 문자열 내 모든 알파벳 문자를 대문자로 변환하여 새로운 문자열로 반환합니다. 원본 문자열은 변경되지 않습니다.

const text = "koreantech.org";
const upperText = text.toUpperCase();
console.log(upperText);

소문자 변환: toLowerCase() 메서드

toLowerCase() 메서드는 문자열 내 모든 알파벳 문자를 소문자로 변환하여 새로운 문자열로 반환합니다. 원본 문자열은 변함없이 유지됩니다.

const text = "koreantech.org";
const lowerText = text.toLowerCase();
console.log(lowerText);

공백 제거: trim() 메서드

trim() 메서드는 문자열 양 끝에 존재하는 공백(스페이스, 탭, 줄바꿈 등)을 제거하여 새로운 문자열로 반환합니다. 원본 문자열은 영향을 받지 않습니다.

const text = "     korean tech   ";
console.log(text);
console.log(text.trim());

특정 위치 문자 반환: charAt(인덱스) 메서드

charAt(인덱스) 메서드는 주어진 인덱스(숫자)에 해당하는 문자를 반환합니다. 유효하지 않은 인덱스가 주어지면 빈 문자열을 반환합니다.

const text = "koreantech.org";
console.log(text.charAt(2));
console.log(text.charAt(15));

특정 위치 문자 코드 반환: charCodeAt(인덱스) 메서드

charCodeAt(인덱스) 메서드는 지정된 인덱스에 위치한 문자의 유니코드(UTF-16) 값을 숫자로 반환합니다. 만약 인덱스가 유효하지 않으면 NaN을 반환합니다.

const text = "koreantech.org";
console.log(text.charCodeAt(2));
console.log(text.charCodeAt(15));

부분 문자열 추출: slice(시작인덱스, 종료인덱스) 메서드

slice(시작인덱스, 종료인덱스) 메서드는 지정된 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자를 추출하여 새로운 부분 문자열로 반환합니다. 예를 들어, string.slice(2, 5)는 인덱스 2, 3, 4에 해당하는 문자를 포함합니다.

const text = "koreantech.org";
console.log(text.slice(0, 4));

slice() 메서드는 단일 인수를 사용하여 호출할 수도 있습니다. 이 경우, 주어진 인덱스부터 문자열 끝까지의 부분 문자열을 추출합니다.

const text = "koreantech.org";
console.log(text.slice(4));

slice() 메서드는 음수 인덱스도 사용할 수 있습니다. 음수 인덱스는 문자열 끝에서부터 역순으로 계산됩니다. 예를 들어, 문자열 "example"에서 -1은 'e', -2는 'l', -3은 'p'를 가리킵니다.

"koreantech.org" 문자열을 기준으로 음수 인덱스를 살펴보면 다음과 같습니다: g=-1, r=-2, o=-3, ., =-4, h=-5, c=-6, e=-7, t=-8, n=-9, ...

따라서, string.slice(-3, -1) 코드는 "or"를 반환합니다.

const text = "koreantech.org";
console.log(text.slice(-9, -5));

또한, string.slice(-5) 코드는 "h.org"를 반환합니다.

const text = "koreantech.org";
console.log(text.slice(-5));

주의: 음수 인덱스는 IE8 이하 버전에서는 작동하지 않습니다.

부분 문자열 추출: substr(시작인덱스, 길이) 메서드

substr(시작인덱스, 길이) 메서드는 slice()와 유사하지만, 두 번째 인수가 종료 인덱스가 아니라 추출할 부분 문자열의 길이를 나타냅니다. 즉, 지정된 시작 인덱스부터 주어진 길이만큼의 부분 문자열을 반환합니다.

const text = "koreantech.org";
console.log(text.substr(4, 5));

substring() 메서드는 slice()와 유사하지만, 음수 인덱스를 허용하지 않습니다. 한 번 사용해 보세요.

문자열 치환: replace(하위문자열, 새하위문자열) 메서드

replace(하위문자열, 새하위문자열) 메서드는 문자열에서 지정된 하위 문자열의 첫 번째 발견된 부분을 새로운 하위 문자열로 대체합니다.

const statement = "방문하세요 Google";
console.log(statement.replace("Google", "koreantech.org"));

문자열 내 특정 하위 문자열 위치 반환: indexOf(하위문자열) 메서드

indexOf(하위문자열) 메서드는 문자열에서 주어진 하위 문자열이 처음으로 나타나는 위치의 인덱스를 반환합니다. 만약 해당 하위 문자열이 존재하지 않으면 -1을 반환합니다.

const text = "koreantech.org";
console.log(text.indexOf("tech"));
console.log(text.indexOf("Z"));

indexOf() 메서드는 검색 시작 위치를 지정하는 두 번째 인수를 받을 수 있습니다.

const text = "koreantech.org";
console.log(text.indexOf("e"));
console.log(text.indexOf("e", 5));

indexOf()와 유사한 lastIndexOf() 메서드도 있습니다. lastIndexOf() 메서드는 문자열 끝에서부터 검색을 시작하여 해당 문자의 첫 번째 인덱스를 반환합니다. text.lastIndexOf('e') 코드를 사용해 보세요.

문자열 분할: split(구분자) 메서드

split(구분자) 메서드는 주어진 구분자를 기준으로 문자열을 분할하여 그 결과를 배열로 반환합니다.

const statement = "방문하세요, 사이트, koreantech.org";
console.log(statement.split(" "));
console.log(statement.split(", "));

마무리

이것이 전부가 아닙니다. 공식 문서에서 더 많은 문자열 메서드를 살펴보세요. 특정 상황에 유용한 메서드가 있을 수 있습니다. 만약 여기에 없는 항목이 있다면, 검색을 통해 필요한 기능을 찾아 활용하세요.

즐거운 코딩 하세요! 😀

다음에는 인기 있는 자바스크립트 프레임워크에 대해 알아보겠습니다.