문자열(string)
''나 ""를 사용하여 문자열을 구분할 수 있고 배열과는 다르게 새로 할당하지 않는 한 read-only이다.
문자열의 속성과 메소드를 이용해 원하는 형태로 만들 수 있다.
- 문자열의 length라는 속성을 활용해 길이를 확인할 수 있다. str.length
- 문자열의 글자 하나하나에 접근할 수 있다. str[1]
- 문자열을 합칠 수 있다. word1 + " " + word2
- 문자열을 원하는 만큼만 잡을 수 있다. str.substring(0, 3)
- 영문을 모두 대문자로 바꿀 수 있다. str.toUpperCase
- 영문을 모두 소문자로 바꿀 수 있다. str.toLowerCase
- 문자열 중 원하는 글자의 index를 찾을 수 있다 str.indexOf('a')
- 문자열 중 원하는 글자가 포함되어 있는지 알 수 있다. str.includes('a')
Advanced
- 띄어쓰기 (" ") 로 문자열을 구분하여, 배열로 바꿀 수 있다. str.split(" ").join(" ")
- 위의 배열을 다시 문자열로 바꿀 수 있다.
문자열 특징
1. str[index]
index에 해당하는 문자열
var str = 'Minions';
console.log(str[0]); // 'M'
console.log(str[4]); //'o'
console.log(str[10]); //undefined index로 접근은 가능하지만 쓸 수는 없다(read-only).
str[0] = 'N';
console.log(str); // 'Minions' not 'Ninions'
(배열과 달리 값 바꿀 수 없다) 2. +연산이 가능하다(유사한 메소드: str.concat())
문자열은 +연산자를 사용할 수 있는데(- 연산자는 쓸 수 없다) 이와 동일한 역할을 한다. string타입과 다른 타입 사이에 +연산자를 쓰면, string 형식으로 변환된다. (toString) 되도록이면 str.concat()보다 +연산자를 사용하는 것이 처리 속도도 빠르고 좋다.
var str1 = 'love';
var str2 = 'Minions';
var str3 = '1';
console.log(str1 + str2); //'loveMinions'
console.log(str3 + 7); // '17'
str1.concat(str2, str3); //'loveMinions1' 주의 사항: 문자열의 뒤에 다른 type을 +연산하게 되면 문자열로 인식하게 된다.
콘솔창에 아래와 같이 입력하면 해당 결과가 나온다.
'1' + true; // "1true"
'1' + 5; // "15"
'1' + [1,2,3]; // "11,2,3" 3. str.length
문자열의 전체길이 반환 (length property)
var str = 'loveMinions'
console.log(str.length); // 11 문자열에 사용되는 메소드
str.indexOf(searchValue)
index를 알고 싶을 때 사용한다.
arguments(serchValue 부분): 찾고자 하는 문자열
return value: 처음으로 일치하는 index, 찾고자 하는 문자열이 없으면 -1
(반환되는 값이 index)
'yellow minion'.indexOf('yellow'); //0 (yellow가 시작되는 index)
'yellow minion'.indexOf('Yellow'); //-1 (대문자 Y로 시작하는 Yellow는 없다)
'yellow minion'.indexOf('minion'); // 7 (minion이 시작되는 index)
'yellow minion minion'.indexOf('minion'); // 7 (처음에 나오는 index로 찾는다) str.lastIndexOf(searchValue)
문자열의 뒤에서부터 찾는다. (반환되는 값이 index)
'minions'.lastIndexOf('o'); //4
(뒤에서부터 찾으면서 처음으로 만나면 해당 index를 리턴한다) str.includes(searchValue)
serchValue가 str에 포함되어 있는지 확인하고 true와 false를 리턴한다.
'yellow minion minion'.includes('minion'); // true
'yellow minion minion'.includes('Minion'); // false str.split(separator)
arguments(separator부분): 분리 기준이 될 문자열
return value: 분리된 문자열이 포함된 배열 (배열의 형태로 리턴)
csv 형식을 처리할 때 유용
var str = 'Nice to meet you';
console.log(str.split(' '));
(4) ['Nice', 'to', 'meet', 'you']참고: csv 형식이란?
comma-separated values의 약자로 몇 가지 필드를 쉼표(,)로 구분한 텍스트 데이터 및 텍스트 파일이다.
let csv = `연도,제조사,모델,설명,가격
1997,Ford,E350,"ac, abs, moon",3000.00
1999,Chevy,"Venture ""Extended Edition""","",4900.00
1999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.00
1996,Jeep,Grand Cherokee,"MUST SELL!
air, moon roof, loaded",4799.00`
csv.split('\n') // '\n'은 줄바꿈
(6) ["연도,제조사,모델,설명,가격", "1997,Ford,E350,"ac, abs, moon",3000.00",
"1999,Chevy,"Venture ""Extended Edition""","",4900.00",
"1999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.00",
"1996,Jeep,Grand Cherokee,"MUST SELL!", "air, moon roof, loaded",4799.00"]
0: "연도,제조사,모델,설명,가격"
1: "1997,Ford,E350,"ac, abs, moon",3000.00"
2: "1999,Chevy,"Venture ""Extended Edition""","",4900.00"
3: "1999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.00"
4: "1996,Jeep,Grand Cherokee,"MUST SELL!"
5: "air, moon roof, loaded",4799.00"
length: 6
let lines = csv.split('\n');
lines[0]
"연도,제조사,모델,설명,가격"str.substring(start, end)
문자열의 중간만 똑 떼와서 사용하고 싶을 때 사용한다.
arguments((start, end)부분): 시작 index, 끝 index
return value: 시작과 끝 index 사이의 문자열 (문자열 형태로 리턴)
end의 index에 해당하는 문자는 포함하지 않는다!!!!!
start와 end는 바뀌어도 상관은 없다.
var str = 'iamfinethankyou';
console.log(str.substring(0,3)); // 'iam' (index 3번째 문자 f는 포함되지 않는다)
console.log(str.substring(3,0)); // 'iam' (start와 end 바뀌어도 상관없다)
console.log(str.substring(1,4)); // 'amf'
console.log(str.substring(-2,4)); // 'iamf' (음수는 0으로 취급)
console.log(str.substring(0, 20)); //'iamfinethankyou'
(index 범위 벗어나면 전체문자열 리턴) str.slice(start, end)
str.substring()과 동일하게 작용하는데 차이점이 있다.
1. start값이 end값보다 클 경우 처리 방식
str.substring()은 start값과 end값을 바꾸어서 처리한다.
str.slice()는 비어있는 string 즉 " "을 리턴한다.
let str = "맛있네!"
str.slice(1, 0); " "
str.substring(1, 0); "맛" (str.substring(0, 1)과 같은 값을 리턴한다)
2. start 또는 end 값이 음수인 경우
str.substring()은 start값이 음수인 경우, start값은 0으로 취급한다. end값이 음수인 경우에도 0으로 취급한다.
str.slice는 string의 가장 뒤에서 음수의 절대값만큼 내려온 index로 취급한다.
let str = "엄청나게맛있네!"
str.slice(-2, 6); // ""
str.substring(-2, 6); // "엄청나게맛있"
str.slice(0, -2); //"엄청나게맛있"
str.substring(0, -2); //""
str.slice(-2, 6)의 경우 start값이 -2로 음수이다. 이 경우 string의 뒤에서 2번째자리를 start값으로 취급하여 계산하게 된다. 즉, "엄청나게맛있네!" string의 뒤에서 2번째 자리 글자는 '네'이다. 내부적으로 slice(-2, 6)의 start 매개변수의 값은 '네'의 index인 '6'값으로 취급되어 str.slice(6, 6)으로 계산되게 된다. 그래서 " "이 리턴된다.
str.substring(-2, 6)의 start값은 0으로 취급되어 내부적으로는 str.substring(0, 6)으로 계산되게 된다. 즉 index 0번부터 5번에 해당하는 문자열이 리턴된다.
start값이 음수인 경우와 마찬가지고, end값이 음수인 경우에도 end값은 string의 가장 뒤에서 음수의 절대값만큼 내려온 index로 취급한다. str.slice(0, -2)의 경우 뒤에서 2번째 자리 글자는 '네'이고, '네'의 index는 6이므로 내부적으로는 str.slice(0, 6)으로 처리하게 된다. 즉 index 0번부터 5번에 해당하는 문자열이 리턴된다.
3. str.slice()의 start 또는 end값이 음수이고, 음수의 절대값이 전체 string 길이보다 클때
2번에서 설명했듯이 str.slice() 함수의 파라미터로 음수값이 전달되면, string의 가장 뒤에서부터 음수의 절대값만큼 내려온 index로 취급된다. 그런데 string의 길이보다 파라미터로 전달된 음수의 절대값이 더 크다면 어떻게 될까? 이 경우 음수는 단순히 0으로 처리된다.
let str = " 엄청나게맛있네!"
str.slice(-10, 6); "엄청나게맛"
str.slice(0, -10); "" str.slice(-10, 6)의 -10의 절대값은 string의 길이보다 크므로 내부적으로는 str.slice(0, 6)으로 처리된다. str.slice(0, -10)도 마찬가지이다. 내부적으로 str.slice(0, 0)으로 처리된다.
str.toLowerCase() / str.toUpperCase()
arguments: 없음
return value: 대, 소문자로 변환된 문자열
console.log('ALPHABET'.toLowerCase()); 'alphabet'
console.log('alphabet'.toUpperCase()); 'ALPHABET' 참고: immutable
원본이 변하지 않는다는 뜻으로 반댓말은 mutable이다.
모든 string method는 immutable이다.
(array method는 immutable 및 mutable 여부를 잘 기억해야 한다)
let word = 'apple';
word.toUpperCase(); //'APPLE'
그렇다면 word는 대문자 'APPLE'일까 소문자'apple'일까?
소문자 'apple'이다. str.trim()
문자열 양 끝(앞뒤)의 공백을 제거한다. (중간의 공백은 제거할 수 없다)
var eating = ' bread ';
console.log(eating); // " bread ";
console.log(eating.trim()); // "bread" str.replace()
브라우저에 따라서 str.trim()함수가 동작하지 않는 경우가 있다. 이런 경우 str.replace()와 정규식을 사용하여 앞뒤의 공백을 제거할 수 있다.
공백문자
탭문자(\t)
carrige return(\r\n)
return문자(\n)
match
replace
str.split(" ").join(" ") 