문자열 메서드 목록(MDN)

Method	Description
str.charAt(),str.charCodeAt(), str.codePointAt() (en-US)	문자열에서 지정된 위치에 있는 문자나 문자 코드를 반환합니다.
str.indexOf(), str.lastIndexOf()	문자열에서 지정된 부분 문자열의 위치나 지정된 부분 문자열의 마지막 위치를 각각 반환합니다.
str.startsWith(), str.endsWith(), str.includes()	문자열 시작하고, 끝나고, 지정된 문자열을 포함하는지의 여부를 반환합니다.
str.concat()	두 문자열의 텍스트를 결합하고 새로운 문자열을 반환합니다.
str.fromCharCode(), str.fromCodePoint() (en-US)	유니코드 값의 지정된 시퀀스로부터 문자열을 구축합니다. 문자열 인스턴스가 아닌 문자열 클래스의 메서드입니다.
str.split()	부분 문자열로 문자열을 분리하여 문자열 배열로 문자열 개체를 분할합니다.
str.slice()	문자열의 한 부분을 추출하고 새 문자열을 반환합니다.
str.substring(), str.substr()	어느 시작 및 종료 인덱스 또는 시작 인덱스 및 길이를 지정하여, 문자열의 지정된 일부를 반환합니다.
str.match(), str.replace(), str.search()	정규 표현식으로 작업합니다.
str.toLowerCase(), str.toUpperCase()	모든 소문자 또는 대문자에서 각각 문자열을 반환합니다.
str.normalize()	호출 문자열 값의 유니 코드 표준화 양식을 반환합니다.
str.repeat()	주어진 회를 반복하는 개체 요소로 이루어진 문자열을 반환합니다.
str.trim()	문자열의 시작과 끝에서 공백을 자릅니다.

약 20여 분 정도의 문자열 강의 영상을 봤는데, 뭔가 쉬워 보이는 것 같으면서도 어렵게 느껴졌다.
강의를 다 듣고 문자열 관련 코틀릿을 푸는 데 당황스러움의 연속이었다.
정말 간단한 문제처럼 보였는데 막상 코딩으로 풀어내려니 혼자 해결하기가 쉽지 않았다.
내비게이터 분의 친절한 설명으로 조금씩 답을 적어갔지만, 답을 맞히고도 괜스레 찝찝한 기분이었다.
뭔가 나 스스로 문제를 해결 못 한 느낌이었다.
문자열 부분은 제대로 이해할 때까지 꾸준히 반복 코딩해볼 생각이다.

문자열

문자열이란?

' '나 " "로 감싸진 문자. 영어는 "String"이라 읽는다.

let name = '철수'; // type = string
let name2 = "영희"; // type = string

기본 사용법

str[index]

let str = 'Telegram';
console.log(0); // 'T'
console.log(4); // 'g'
console.log(7); // 'm'

주의 : index로 접근은 가능하지만 쓰기 권한이 없음 (read-only)

str[0] = 'C';
console.log(str); // 'Telegram' not 'Celegram'

• +연산자를 쓸 수 있음 (-연산자는 쓸 수 없음)
• string 타입과 다른 타입 사이에 +연산자를 쓰면, string 형식으로 반환(toString)
• +연산자 대신 str1.concat(str2, str3...);의 형태로도 사용 가능

let str1 = 'Water';
let str2 = 'Melon';
let str3 = '3';
console.log(str1 + str2); // 'WaterMelon'
console.log(str3 + 7); // '37'

let str4 = '지금 시간은 '.concat('10시 ','45분입니다.');
console.log(str4); // '지금 시간은 10시 45분입니다.'

str.indexOf(searchValue)

arguments : 찾고자 하는 문자열
return value : 처음으로 일치하는 index, 찾고자 하는 문자열이 없으면 -1 반환

str.lastIndexOf(searchValue)

arguments : 찾고자 하는 문자열
return value : 문자열 뒤에서부터 처음으로 일치하는 index, 찾고자 하는 문자열이 없으면 -1 반환

str.includes(searchValue)

<잘 쓰이지 않음>
arguments : 찾고자 하는 문자열
return value : 일치하는 문자열이 있으면 true, 없으면 false 반환
※주의 : 인터넷 익스플로러와 같은 구형 브라우저에서는 작동하지 않음!

'Water Melon'.indexOf('Water'); // 0
'Water Melon'.indexOf('blue'); // -1, 대소문자 구별함
'Water Melon'.indexOf('Melon'); // 6
'Water Melon Melon'.indexOf('Melon'); // 6

'banana'.lastIndexOf('n'); // 4

'Water Melon'.includes('Melon'); // true
'Water Melon'.includes('melon'); // false, 대소문자 구별함

str.split(seperator)

arguments : 분리 기준이 될 문자열
return value : 분리된 문자열이 포함된 배열

• csv 형식을 처리할 때 유용함

let str = 'How are you doing';
console.log(str.split(' ')); // 공백 기준으로 문자열을 배열로 분리
// ['How', 'are', 'you', 'doing']

str.substring(start, end)

arguments : 시작 index, 끝 index
return value : 시작과 끝 index 사이의 문자열

str.slice(start, end)

substring과는 약간 작동법이 다름
arguments : 시작 index, 끝 index
return value : 시작과 끝 index 사이의 문자열

차이점

• 음수인덱스일 경우, slice()는 역방향으로 카운트 / substring() 은 0으로 치환됨
• start 가 end 보다 큰 경우, slice()는 빈 문자열 반환 / substring() 은 마치 두 개의 인자를 바꾼 듯 작동
• 인자가 strLength 보다 큰 경우, substring()은 strLength 로 치환해서 처리 / slice()는 start 가 strLength 큰 경우에는 빈 문자열 반환, end 가 strLength 큰 경우에는 strLength 로 치환

let str = 'abcdefghijklmn';
console.log(str.substring(0, 4)); // 'abcd'
console.log(str.substring(4, 0)); // 'abcd'
console.log(str.substring(1, 4)); // 'bcd'
console.log(str.substring(-1, 4)); // 'abcd', 음수는 0으로 취급
console.log(str.substring(0, 30));
// 'abcdefghijklmn', index 범위 초과하면 마지막 문자까지 나옴

console.log(str.slice(0, 4)); // 'abcd'
console.log(str.slice(4, 0)); // '  '
console.log(str.slice(1, 4)); // 'bcd'
console.log(str.slice(-1)); // 'n', 역순으로 반환
console.log(str.slice(-3, -1)); // 'lm'
console.log(str.slice(0, 30));
// 'abcdefghijklmn', index 범위 초과하면 마지막 문자까지 나옴

str.toLowerCase()

arguments : 없음
return value : 소문자로 변환된 문자열

str.toUpperCase()

arguments : 없음
return value : 대문자로 변환된 문자열

console.log('ALPHABET'.toLowerCase()); // 'alphabet'
console.log('alphabet'.toUpperCase()); // 'ALPHABET'

템플릿 리터럴

자바스크립트 표현식을 사용해서 문자열을 연결하고 새로운 문자열을 생성하는 간단한 문법
템플릿 리터럴을 사용하면 +연산자로 번거롭게 문자열을 합치지 않아도 됨
``(백틱)을 사용하여 표현

`Hello. ${name}. How are you doing?`