✔️String(문자열) 심화
🔹인덱스 값에 알맞은 위치의 문자열 반환하기( [ ]/ .charAt() )
let myString = 'Hi Codeit'; console.log(myString[0]);//대괄호 표기법 console.log(myString.charAt(4));//charAt 메소드 차엣 //H o 출력
🔹문자열 길이(.length)
let myString = 'Hi Codeit'; console.log(myString.length); //9(띄어쓰기까지 포함)
🔹요소 탐색(.indexOf /.lastIndexOf )
let myString = 'Hi Codeit'; console.log(myString.indexOf('C'));// 앞 부터 -->앞에서부터 3번 index에 위치 console.log(myString.lastIndexOf('t'));// 값은 뒤부터 찾지만 결과값은 앞에서부터의 위치값을 반환함 //3 8 console.log(myString.indexOf('a'));//없는 문자 찾으면 -1 출력.
🔹대소문자 변환(.toUpperCase( ) /.toLowerCase( ) )
let myString = 'Hi Codeit'; console.log(myString.toUpperCase());//대문자로 출력. console.log(myString.toLowerCase());//소문자로 출력. //"HI CODEIT" "hi codeit"
🔹양 끝 공백 제거( .trim )
let myString = ' Hi Codeit '; console.log(myString.toUpperCase()); console.log(myString.trim()); // " HI CODEIT " "Hi Codeit"
🔹부분 문자열 접근(slice(start, end) )
: 두 개의 파라미터를 가진다. 시작과 끝 index.
주의해야할 점은 끝 index 바로 직전까지의 범위를 가져옴.
let myString = 'Hi Codeit'; console.log(myString.slice(0, 2));//0번부터 1번 인덱스까지 문자열을 리턴 console.log(myString.slice(4));//두번째 파라미터를 생략하면 시작지점부터 끝까지 문자열을 리턴. console.log(myString.slice());//모두 다 생략했을땐 문자열 전체를 가지고 옴.
✔️문자열과 배열 사이
비슷한 점
실제로 지난 시간에 배열과 문자열 모두 length프로퍼티를 가지고 있고, 대괄호 표기법으로 각 요소에 접근할 수 있다거나..
꽤 많은 메소드들이 배열과 문자열 모두 동일하게 사용되는 것도 확인할 수 있었는데요. 심지어 지난 시간에 다루진 못했지만 배열을 다룰 때 유용한 for..of문을 문자열에 활용할 수도 있습니다.다른 점
하지만 비슷하다고 해서 완전히 같다고는 할 수 없습니다.일단 typeof 연산자를 사용해서 두 값의 자료형을 비교해보면,
let myString = 'Codeit'; let myArray = ['C', 'o', 'd', 'e', 'i', 't']; console.log(typeof myString); console.log(typeof myArray); //string과 object, 확실히 서로 다른 자료형인 걸 확인할 수 있고,
두 값을 서로 비교해 보아도 let myString = 'Codeit'; let myArray = ['C', 'o', 'd', 'e', 'i', 't']; console.log(myString === myArray); //-->일치비교 console.log(myString == myArray); //-->동등비교 //둘 다 false 출력. (일치 비교뿐만 아니라, 느슨하게 비교하는 동등비교에서도 false가 출력되는걸 확인할 수 있습니다.)
🔹mutable vs. immutable
가장 중요한 차이는 배열은 'mutable(바뀔 수 있는)' 자료형인 반면 문자열은 'immutable(바뀔 수 없는)' 자료형이라는 것입니다.
배열은 요소에 접근해서 할당연산자를 통해 요소를 수정할 수 있었죠?
문자열은 한 번 할당된 값을 수정할 수 없습니다. 다르게 표현해서,
변수에 할당된 문자열을 바꾸고 싶다면, 일부를 바꾸는 게 아니라 새로운 문자열을 지정해주어야 한다는 것이죠.
// 배열은 mutable let myArray = ['C', 'o', 'd', 'e', 'i', 't']; myArray[0] = 'B'; console.log(myArray); // 문자열은 immutable let myString = 'Codeit'; myString[0] = 'B'; console.log(myString); // ["B", "o", "d", "e", "i", "t"] Codeit
다시 한번 되돌아보면, 문자열이 가진 메소드들은 모두 return 값들을 활용하고, 본래의 문자열 값을 수정하지 않습니다.
같은 의미에서 문자열에 splice 같은 메소드들은 사용할 수 없겠죠?
문자열과 배열은 서로 비슷하지만 엄연히 다른 차이가 있다는 점 꼭 기억해 주세요!
✍️실습과제
무한도전 열혈 시청자인 대준이는 2013년 무한도전 자유로 가요제 때 발표한 '그래, 우리 함께'라는 노래를 정말 좋아합니다. 대준이는 인터넷에서 가사를 검색해서 각 맴버별 파트를 그대로 복사해서 문자열로 lyrics라는 변수에 붙여넣었는데요.
방송 중에 울컥했던 정형돈씨의 장면이 가장 인상적이여서 형돈의 파트만 따로 떼어내 변수에 담아두고 싶어졌습니다.
lyrics 문자열에 적절한 메소드를 활용해서 형돈의 부분만 떼어내고 hyungdon 변수에 재할당 해주세요.
코드를 잘 작성하셨다면, 다음과 같이 출력되어야 합니다.
[형돈] 혼자 걷는 이 길이 막막하겠지만 느리게 걷는 거야 천천히 도착해도 돼
let lyrics = "[재석]너에게 나 하고 싶었던 말 고마워 미안해 함께 있어서 할 수 있어서 웃을 수 있어[준하] 정말 고마웠어 내 손을 놓지 않아줘서 힘을 내볼게 함께 있다면 두렵지 않아[홍철] 내가 늘 웃으니까 내가 우습나 봐 하지만 웃을 거야 날 보고 웃는 너 좋아[명수] 자꾸만 도망치고 싶은데 저 화려한 큰 무대 위에 설 수 있을까? 자신 없어..[하하] 지금까지 걸어온 이 길을 의심하지는 마 잘못 든 길이 때론 지도를 만들었잖아[형돈] 혼자 걷는 이 길이 막막하겠지만 느리게 걷는 거야 천천히 도착해도 돼[길] 술 한 잔 하자는 친구의 말도 의미 없는 인사처럼 슬프게 들릴 때 날 찾아와"; let hyungdon = null; // 코드를 작성해 주세요. (1)먼저 형돈이 가사가 시작하는 부분을 찾고, 맨마지막이 어디인지도 찾아야함(길 파트 직전) 그래서 시작되는 인덱스를 찾기 위해 indexOf 메소드 사용. (2)startIndex와 endIndex라는 변수를 선언하고 아래와 같이 코드를 짜준다. //그리고 console.log(startIndex,endIndex) 출력하면 236 279 나옴. (3)마지막으로 slice 메소드를 사용해서 시작과 끝을 찾는다. let startIndex = lyrics.indexOf('[형돈]'); let endIndex = lyrics.indexOf('[길]'); hyungdon = lyrics.slice(startIndex,endIndex); // 테스트 코드 console.log(hyungdon);
