[javascript] 문자열 다루기

String 메서드

indexOf()

str(대상 문자열)에서 인수로 전달받은 문자열을 검색해서 해당 문자열이 위치한 인덱스를 반환한다. 검색에 실패하면 -1을 반환하는데, 이것을 이용해서 대상 문자열에 특정 문자열이 존재하는지 확인할 때 유용하다.

// 예제에서 주구장창 사용할 문자열
const str = 'Hello World';

// 1. 첫번째 인덱스부터 검색시작
str.indexOf('l'); // 2
str.indexOf('or'); // 7
str.indexOf('x'); // -1

// 2. 2번째 인수로 검색을 시작할 인덱스를 전달 
str.indexOf('l', 3); // 3, 

includes()

문자열 포함 여부를 ture, false로 반환한다.

// 1. 첫번째 인덱스부터 검색시작
str.includes('Hello'); // true
str.includes('x'); // false

// 2. 2번째 인수로 검색을 시작할 인덱스를 전달 
str.includes('l', 3); // true

search()

str에서 인수로 전달받은 정규표현식과 매치하는 문자열을 검색해서 일치하는 문자열의 인덱스를 반환한다. 검색 실패 시 -1을 반환한다.

str.search(/o/); // 4

startsWith()

str이 인수로 전달받은 문자열로 시작하는지 검색해서 true, false로 반환한다.

// 1. 첫번째 인덱스부터 검색시작
str.startsWith('He'); // ture
str.startsWith('x'); // false

// 2. 2번째 인수로 검색을 시작할 인덱스를 전달 
str.startsWith(' ', 5); // ture

endsWith()

str이 인수로 전달받은 문자열로 끝나는지 검색해서 true, false로 반환한다.

str.endsWith('ld'); // ture
str.endsWith('x'); // false

// 2번째 인수로 검색할 문자열의 길이를 전달 
str.endsWith('lo', 5); // ture

str.endsWith('lo', 5) 를 보충설명하면 검색할 문자열의 길이가 5이므로 str의 첫자리부터 5자리에 해당하는 'Hello'가 'lo'로 끝나는지 검사한다.

charAt()

str에서 인수로 전달받은 인덱스에 위치한 문자를 검색하여 반환한다.

str.charAt(0); // H
str.charAt(20); // '' (빈 문자열)

str.charAt(20) 처럼 인덱스가 문자열의 범위를 벗어난 경우 빈 문자열을 반환한다.

substring()

str에서 1번 인수로 전달받은 인덱스부터 2번 인수로 전달받은 인덱스 바로 이전 인덱스까지의 부분 문자열을 반환한다.

// 1번 인수 > 2번 인수인 경우, 두 인수를 교환
str.substring(4, 1); // 'ell'

// 인수 < 0 또는 NaN인 경우, 0으로 취급
str.substring(-2); // 'Hello world'
str.substring(1, 100); // 'Hello world'

// 인수 > 문자열의 길이(str.length)인 경우, 인수는 문자열의 길이로 취급
str.substring(20); // ''

str.charAt(20) 처럼 인덱스가 문자열의 범위를 벗어난 경우 빈 문자열을 반환한다.

slice()

substring과 동일하게 동작하지만 slice의 경우 음수인 인수를 전달하면 str의 가장 뒤에서부터 시작해 문자열을 잘라내서 반환한다.

str.substring(0, 5); // 'Hello'
str.slice(0, 5); // 'Hello'

str.substring(-5); // 'Hello world'
str.slice(-5); // 'world'

str.slice(-5) 뒤에서 5자리를 잘라내서 반환한다.

toUpperCase() & toLowerCase()

str을 모두 대문자, 소문자로 변경

str.toUpperCase(); // 'HELLO WORLD'
str.toLowerCase(); // 'hello world'

trim()

str 앞뒤에 공백 문자가 있을 경우 공백을 제거해서 문자열을 반환한다.

const str = '     foo     ';
str.trim(); // 'foo'
str.trimStart(); // 'foo     '
str.trimEnd(); // '     foo'

repeat()

str을 인수로 전달받은 정수만큼 반복해 연결한 새로운 문자열을 반환한다.

const str = 'abc';
str.repeat(); // ''
str.repeat(0); // ''
str.repeat(1); // 'abc'
str.repeat(2); // 'abcabc'
str.repeat(2.5); // 'abcabc' (2.5 -> 2)
str.repeat(-1); // RangeError : Invalid count value

replace()

str에서 첫 번째 인수로 전달받은 문자열 or 정규표현식을 검색해서 두 번째 인수로 전달한 문자열로 치환한 문자열을 반환한다.

const str = 'Hello world';
str.replace('world', 'Youngjin'); // 'Hello Youngjin'
str.replace('world', '<strong>$&</strong>'); // 'hello <strong>world</strong>'
str.replace(/hello/gi, 'Youngjin'); // 'Youngjin Youngjin'

const str = 'Hello world world';
str.replace('world', 'Youngjin'); // 'Hello Youngjin world'

split()

str에서 첫 번째 인수로 전달받은 문자열 or 정규표현식을 검색해서 두 번째 인수로 전달한 문자열로 치환한 문자열을 반환한다.

const str = 'How are you doing?';
str.split(' '); // ["How", "are", "you", "doing?"]

//\s는 여러가지 공백문자를 의미한다. `[\t\r\n\v\f]`와 같은 의미
str.split(/\s/); // ["How", "are", "you", "doing?"]

// 인수로 빈 문자열을 전달하면 각 문자를 모두 분리
str.split(''); // ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", "?"]

// 인수를 생략 시 str 전체를 단일 요소로 하는 배열을 반환
str.split(); // ["How are you doing?"]

// 공백으로 구분해서 배열을 반환하되, 배열의 길이는 3으로 함
str.split(' ', 3); // ["How", "are", "you"]

---

참고

모던 자바스크립트 Deep Dive, 이웅모 (2020)