자바스크립트 문자열 함수 총정리 — 찾고, 자르고, 바꾸는 메서드 사전

문자열은 제목, 주소, 사용자 입력처럼 가장 자주 다루는 자료입니다. 필요할 때 펼쳐 보는 사전입니다. 자바스크립트 문자열 메서드를 표로 훑은 뒤 기능별로 묶어 실행 결과까지 확인하겠습니다.

메서드	하는 일	반환값
`length`	글자 수를 셉니다 (속성)	숫자
`charAt(i)`	i번째 글자를 꺼냅니다	새 문자열
`indexOf(s)`	s의 첫 위치를 찾습니다	숫자, 없으면 -1
`includes(s)`	s가 있는지 확인합니다	true / false
`slice(a, b)`	a부터 b 앞까지 자릅니다 (음수 가능)	새 문자열
`substring(a, b)`	같으나 음수를 못 씁니다	새 문자열
`replace(a, b)`	처음 만난 a만 바꿉니다	새 문자열
`replaceAll(a, b)`	모든 a를 바꿉니다	새 문자열
`split(s)`	s 기준으로 쪼갭니다	배열
`trim()`	앞뒤 공백을 지웁니다	새 문자열
`toUpperCase()`	모두 대문자로 만듭니다	새 문자열
`toLowerCase()`	모두 소문자로 만듭니다	새 문자열
`padStart(n, c)`	길이 n까지 앞을 c로 채웁니다	새 문자열
`repeat(n)`	n번 반복합니다	새 문자열

반환값이 대부분 “새 문자열”입니다. 자바스크립트 문자열은 내용을 고칠 수 없는 값이라, 모든 메서드가 원본을 두고 결과를 새로 만들어 돌려줍니다. 변수 개념이 낯설다면 자바스크립트 변수 편을 먼저 보십시오.

문자 찾기 — length, charAt, indexOf, includes

글자 수를 세거나 특정 단어가 들어 있는지 확인하는 묶음입니다. 위치 번호는 항상 0부터 시작합니다.

const noteTitle = "카드뉴스 노트 만들기";

console.log(noteTitle.length);            // 11
console.log(noteTitle.charAt(0));         // "카"
console.log(noteTitle.indexOf("노트"));    // 5
console.log(noteTitle.indexOf("블로그"));  // -1
console.log(noteTitle.includes("만들기")); // true

length만 괄호가 없는데 속성이기 때문입니다. indexOf는 못 찾으면 -1을 돌려주므로, 있는지만 알면 될 때는 includes가 읽기 편합니다.

잘라내기 — slice와 substring

둘 다 시작 위치부터 끝 위치 바로 앞까지를 잘라냅니다. 차이는 음수 처리입니다.

const postSlug = "js-string-functions";

console.log(postSlug.slice(0, 2));       // "js"
console.log(postSlug.slice(-9));         // "functions"
console.log(postSlug.substring(3, 9));   // "string"
console.log(postSlug);                   // "js-string-functions" (원본은 그대로)

뒤에서부터 세려면 slice를 쓰십시오. substring은 음수를 0으로 바꿔 버립니다. 입문 단계에서는 slice 하나만 익혀도 충분합니다.

바꾸고 나누기 — replace, replaceAll, split, trim

사용자가 입력한 값을 다듬거나, 한 줄짜리 문자열을 여러 조각으로 나눌 때 쓰는 묶음입니다.

console.log("   코딩 입문 강좌   ".trim());     // "코딩 입문 강좌"

const notice = "자바 강좌와 자바 예제";
console.log(notice.replace("자바", "JS"));     // "JS 강좌와 자바 예제"
console.log(notice.replaceAll("자바", "JS"));  // "JS 강좌와 JS 예제"
console.log(notice);                          // "자바 강좌와 자바 예제"

const tagLine = "html,css,javascript";
console.log(tagLine.split(","));  // ["html", "css", "javascript"]

replace는 이름과 달리 처음 만난 하나만 바꿉니다. 전부 바꾸려면 replaceAll을 쓰십시오. split의 결과는 배열이라 이어지는 처리는 자바스크립트 배열 함수 편의 메서드로 합니다.

형태 다듬기 — 대소문자, padStart, repeat

화면에 보기 좋게 출력하거나, 비교 전에 형태를 맞출 때 쓰는 묶음입니다.

const readerName = "Kim";
console.log(readerName.toUpperCase()); // "KIM"
console.log(readerName.toLowerCase()); // "kim"
console.log(String(7).padStart(3, "0")); // "007"
console.log("-".repeat(12));             // "------------"

아이디를 비교할 때는 양쪽 모두 toLowerCase()를 거치면 실수를 줄일 수 있습니다. padStart는 숫자에 바로 쓸 수 없어 String()으로 바꾼 뒤 호출합니다.

입문자가 자주 하는 실수

반복해서 나오는 세 가지 함정입니다.

let title = "카드뉴스";

// 실수 1: 원본이 바뀔 거라고 기대하기
title.replace("카드", "새 ");
console.log(title);  // "카드뉴스" — 아무것도 바뀌지 않았습니다
title = title.replace("카드", "새 ");
console.log(title);  // "새 뉴스" — 반환값을 다시 담아야 합니다

// 실수 2: indexOf 결과를 참·거짓으로 쓰기
const slug = "note-app";
if (slug.indexOf("note")) { }   // 실행 안 됨. 결과가 0이기 때문입니다
if (slug.includes("note")) { }  // 이렇게 쓰십시오

// 실수 3: 숫자와 문자열 더하기
console.log("3" + 4);          // "34"  (계산이 아니라 이어붙이기)
console.log(Number("3") + 4);  // 7

첫 번째가 가장 흔합니다. 문자열 메서드는 원본을 바꾸지 않으므로 결과를 변수에 다시 담아야 합니다.

핵심 정리

불변성 — 문자열 메서드는 원본을 바꾸지 않고 새 문자열을 돌려줍니다.
찾기 — 위치가 필요하면 indexOf, 있는지만 알면 되면 includes입니다.
자르기 — 음수 위치를 쓸 수 있는 slice를 기본으로 삼으십시오.
바꾸기 — replace는 하나만, replaceAll은 전부 바꿉니다.
나누기 — split의 결과는 배열입니다.