문자열

Verba volant, scripta manent·2021년 1월 12일
0

JavaScript

목록 보기
3/20
post-thumbnail

문자열

1. 문자열에 접근

str[index]

문자열의 몇 번째 문자를 가져온다.
str : 문자열 // index : 몇 번째인지
★여기서 문자열의 첫번째 index는 1이 아니다.
index는 0부터 시작한다!

var str = 'CodeStates';
console.log(str[0]); // 'C'
console.log(str[4]); // 'S'
console.log(str[10]); // undefined

한 글자씩 나누고 index를 붙혀보자.
C o d e S t a t e s
0 1 2 3 4 5 6 7 8 9
index가 0부터 시작한다고 했으므로 str[0]은 'C' 이고, str[4]는 'S'이다.
그리고 str[index]는 총 9이므로, str[10]은 없다. 그러므로 undefined가 된다.

★ 문자열은 새로 할당하지 않는 이상 index로 접근은 가능하나 읽기만 가능하고 쓰기는 불가하다.

str[0] = 'G';
console.log(str); // 'CodeStates'

첫번째 문자열을 'G'라고 할당했으나 쓰기가 불가하므로 'GodeStates'가 되지 않는다.

2. 문자열 합치기

  • 연산자를 쓸 수 있다.
    string타입과 다른 타입 사이에 + 연산자를 쓰면, string형식으로 변환된다.(toString)
var str1 = 'Code';
var str2 = "States";
var str3 = '1';
console.log(str1 + str2); // 'CodeStates'
console.log(str3 + 7); // '17'

여기서 문자열은 'Code'와 'States'를 합치면
'CodeStates'가 된다.
그러면 왜 '1'과 7을 더했는데 8이되지 않고 17이 되는가?

여기서 '1'은 string타입이고 7은 number타입이다.
앞서 말했듯이 string타입과 다른 타입 사이에 + 연산자를 쓰면 string형식으로 변환된다고 했다.
그러므로 '1'에 7을 더하면 7도 string형식으로 변환되어 문자열 '1'에 '7'을 합친걸로 인식되어
17이 되는 것이다.

또한 str1.concat(str2, str3...);의 형태로도 사용 가능하다.
여기서 concat은 + 연산자와 같은 역할을 한다.

3. 문자열 속성

length PROPERTY

문자열의 전체 길이를 반환한다.

var str = 'CodeStates';
console.log(str.length); // 10

똑같은 'CodeStates'가 index에서는 길이가 9로 되었는데 왜 문자열에서는 10이 되었을까?

여기서 index는 0부터 시작하고, 문자열은 1로 시작한다는 것을 헷갈리면 안된다!
문자열을 한 글자씩 나눠보자.
C o d e S t a t e s
1 2 3 4 5 6 7 8 9 10

1부터 시작하므로 str.length는 10이다.

4. 문자열 메소드

str.indexOf(searchValue)

문자열에서 찾고자하는 arguments의 index를 찾을 때 쓴다.
arguments: 찾고자 하는 문자열 (=searchValue)
return value: 처음으로 일치하는 index, 찾고자 하는 문자열이 없으면 -1
lastIndexOf: 문자열 뒤에서 부터 찾는다
'Blue Whale'.indexOf('Blue'); //0
'Blue Whale'.indexOf('blue'); //-1
'Blue Whale'.indexOf('Whale'); //5
'Blue Whale Whale'.indexOf('Whale'); //5

'canal'.lastIndexOf('a'); //3

여기서 Blue Whale을 한 글자씩 나누고 index를 붙혀보자.
B l u e W h a l e
0 1 2 3 4 5 6 7 8 9

주의할 점은 띄어쓰기도 한글자로 인식한다!!

'Blue Whale'.indexOf('Blue'); //0
이 되는 이유는 Blue를 찾아라 인데, Blue는 B부터 시작한다. 시작하는 B의 index는 0이기 때문에 0이 된다.

'Blue Whale'.indexOf('blue'); //-1
이 되는 이유는 blue를 찾아라 인데, 여기에는 소문자 blue가 없다. 문자열은 대소문자 확실히 가리기 때문에 blue가 존재하지 않으므로 -1이 된다.

'Blue Whale'.indexOf('Whale'); //5
위에서 서술한것을 보다시피 띄어쓰기도 한 글자로 인식하기 때문에 Whale에서 시작하는 W의 index는 5이므로 5가 된다.

'canal'.lastIndexOf('a'); //3
lastIndexOf라고 했다. index를 뒤에서부터 붙히라는 뜻이다.
c a n a l -> c a n a l
0 1 2 3 4 -> 4 3 2 1 0
a가 시작하는 index는 3이 되므로 3이 된다.

str.split(seperator)

문자열을 지정한 seperator로 분리하는 것이다.
arguments: 분리 기준이 될 문자열 (=seperator)
return value: 분리된 문자열이 포함된 배열

var str = 'Hello from the other side';
console.log(str.split(' '));
// ['Hello', 'from', 'the', 'other', 'side']

csv 형식을 처리할 때 유용하다.
str.split(' ')는 ' '띄어쓰기 한 칸을 기준으로 문자열을 분리한다.
그러므로 str이 'Hello from the other side' 라고 가정했을 때,
str.split(' ')를 실행하게 되면,
배열이므로 대괄호[]를 쓰고, 그 안에 결과를 쓴다.
['Hello', 'from', 'the', 'other', 'side']가 되는 것이다.

str.substring(start, end)

문자열을 지정한 범위에 따라 분리한다.
arguments: 시작 index, 끝 index (=start),(=end)
return value: 시작과 끝 index 사이의 문자열

var str = 'abcdefghij';
console.log(str.substring(0, 3));  // 'abc'
console.log(str.substring(3, 0));  // 'abc'
console.log(str.substring(1, 4));  // 'bcd'
console.log(str.substring(-1, 4)); // 'abcd', 음수는 0으로 취급
console.log(str.substring(0, 20)); // 'abcdefghij', index 범위를 넘을 경우 마지막 index로 취급

str.slice(start, end)

str.substring과 동일하게 문자열을 지정한 범위에 따라 분리한다는 공통점이 있으나 몇 가지 차이점이 있다.
차이점)
1. start가 end 보다 크면 slice() 빈 문자열을 반환한다. ("")
2. start가 음수이면 문자열 끝에서 char을 설정한다.
3. end가 음수이면 역시 문자열의 가장 뒤에서 음수만큼 내려온 index로 취급한다.

str.toLowerCase() / str.toUpperCase()

str.toLowerCase()는 문자열을 소문자로 통일시키는 것이고, str.toUpperCase()는 문자열을 대문자로 통일시키는 것이다.
arguments: 없음
return value: 대, 소문자로 변환된 문자열

console.log('ALPHABET'.toLowerCase()); // 'alphabet'
console.log('alphabet'.toUpperCase()); // 'ALPHABET'
profile
말은 사라지지만 기록은 남는다

0개의 댓글