자바스크립트 3. 문자열(String)

문자열에 대해서 기록해보자!

문자열 데이터는 다음과 같이 문자나 숫자를 ' ' 작은따옴표나 " "큰따옴표로 감싸고 있다. (화려한 조명이~)

1 + 1 // 2
1 + '1' // 11
7777 + 7 // 7784
7777 + '7' // 77777

개발자 도구에서 위와 같이 작성하면 // 뒤의 값으로 나온다. (컴퓨터 너무 귀여워)

이전에도 말했지만 정확하게 구분해서 표현을 해주어야 한다.

 

문자열은 메소드... 메서드..(method)를 활용하는 것을 배웠는데 기록하면서 다시 복습!

 

첫번째 메서드! length

let word = 'BreezeBM';
word.length // 8

위의 코드를 보면, word를 선언하고 문자열을 할당해 주었다. 그리고 .length를 사용하면 그 문자열의 길이를 알려준다!

 

length를 활용한 문제들을 많이 다루었다. 일단 length는 길이를 숫자로 알려주기 때문에 숫자로 되어있는 문제들도 연계되서 풀었다. (처음에는 좀 당황ㅎ... 문자열이라며...ㅎ)

let word1 = 'BreezeBM';
let word2 = 'LeeCoding';
word1.length + word2.length // 17

방금 말했듯이, length는 길이를 숫자로 말해주기 때문에 저렇게 연산자를 활용해서 문제들을 풀 수도 있다. (수학관련 메서드는 따로 기록해보자!)

 

두번째 메서드를 배우기 전에 index번호를 알아야 한다.

먼저 let word = BreezeBM; 을 표를 작성해서 살펴보자

길이	1	2	3	4	5	6	7	8
word;	B	r	e	e	z	e	B	M
index번호	0	1	2	3	4	5	6	7

index번호는 0부터 시작한다는 개념을 먼저 가지고 들어가자!

 

두번째 메서드! substring과 slice

.substring(a, b) a번째 인덱스(시작위치)에서 부터 b인덱스(종료위치) 이전 구간의 문자를 반환시켜준다.

let word = 'LeeCoding';
word.string(0, 3); // 'Lee'

위의 코드를 보면 0번째 인덱스인 'L'부터 3번째 인덱스 이전인 'e'사이의 값을 반환한다.

 

그!러!나 slice도 똑같이 내뱉는다.

slice(a, b)는 a개의 문자(시작에서)를 자르고 b번째 이후(종료 이후)에 문자를 자른 후 남은 문자를 반환한다.(index번호 x)

let word = 'LeeCoding';
word.slice(0, 3); // 'Lee'

즉 0개의 문자를 자르고 3번째이후인 C부터 자르고 남은 것을 반환한다.

 

!?!?!?!? 그렇다면 하나로 쓰면 되지 왜 두개로 나누었니...? 바로 a나 b값에 음수가 들어갈 때 차이가 난다!

다음 예시를 통해서 자세히 알아보자!

let str = '영일이삼사오육칠팔구';
//-------------------------//
str.substring(2, -3); // '영일'
str.slice(2, -3); // '이삼사오육'
str.substring(-2, 3); // '영일이'
str.slice(-2, 3) // ''

먼저 substring같은 경우에는 음수(마이너스 값)은 0으로 인식한다.

그렇기 때문에 str.substring(2 ,-3)는 str.substring(2 , 0)으로 바뀌고, 종료위치가 시작위치의 값보다 작기 때문에 2과 0의 위치가 바뀌게 된다

즉! str.substring(2 ,-3)는 str.substring(0 , 2)로  최종적으로 바뀌게됩다.

 

slice의 경우에는 음수(마이너스값)을 받게 되면 뒤에서 부터 이동을 한다.  str.slice(2, -3)의 경우에는 2번째 까지 문자 '영일'을 자르고 뒤에서 3번째 '칠팔구'를 자르고 남은 '이삼사오육'을 반환하게 된다. 하지만 str.slice(-2, 3)의 경우에는 시작이 음수이기 때문에 뒤에서 시작하는데 종료값도 마이너스를 지정해주어야 한다. 그렇지 않으면 ' ' 빈문자열이 반환됩니다.

 

마지막으로! toUpperCase와 toLowerCase입니다.

말해뭐해 바로 예시로 봅시당.

let str1 = 'Expelliarmus';
str1.toUpperCase(); // 'EXPELLIARMUS'

let str2 = 'Wingardium Leviosa';
str2.toLowerCase(); // 'wingardium leviosa'

눈치 빠른 사람은 바로 이해하지 않을까?!?!?!?

str1은 최초에 선언이 되고 할당된 문자는 대소문자가 섞여있지만, toUpperCase();를 만나면서 대문자로 변환이 되었다.

마찬가지로 str2도 대소문자가 섞여서 문자가 할당되었지만, toLowerCase();를 만나면서 소문자로 변환이 되었다.

(여기서 내가 말한 눈치는 할당된 문자열이 '해리포터 주문이다.' 이말이야~)

 

다음에는 무엇을 기록해볼까?!