문자열?
문자열은 기존 자바스크립트(1)에서 원시타입으로 설명했었다.
생성되면, 문자열을 변경할수 없다.
var str = 'Codestates';
console.log(str[0]); // 'C'
console.log(str[1]); // 'o'
console.log(str[10]); // undefined
str[0] = 'G';
console.log(str); // 'Codestates'이처럼 index로 조회를 할수 있지만,
값을 변경할수 없다.
문자열의 연산자
var str1 = 'Code';
var str2 = 'States';
var str3 = '1';
console.log(str1 + str2); // 'CodeStates'
console.log(str3 + 7); // '17'이처럼 문자열은 +를 사용할수있다.
다면 string타입으로 사용했으므로 string+string,
즉 string 두개를 이어붙이는 기능을 한다.
좀더 쉬운 방법으로는 str1.concat(str2, str3,...)식으로 사용한다.
다만 주의할 점은 문자열을 그대로 이어 붙이는 것이기 때문에
숫자 끼리 더하는 값을 구하고 싶다면
Number() 메서드로 형변환을 시켜 사용한다던지 한다.
문자열 다뤄보기
length
문자열 전체의 길이를 알고싶다면 어떻게 사용하면 좋을까?
var str = 'CodeStates';
console.log(str.length);이처럼 길이를 알아볼수 있다.
indexOf
또한 찾고자하는 문자열을 입력하고 그 문자열의 index를 찾을수있다.
var str = 'Blue Whale';
str.indexOf('Blue'); // 0
str.indexOf('blue'); // -1 (조회한 값이 없다)
str.indexOf('Whale'); // 5이렇게 사용되며,
만약 찾는 결과가 없으면 -1을 return한다.
다르게 뒤에서부터 인덱싱을 하고 싶으면 lastIndexOf()를 사용한다.
includes
index가 아닌 true, false로 찾고 싶으면 어떻게 할까?
var str = 'Blue Whale';
str.includes('Blue'); // true
str.includes('blue'); // false이렇게 includes()를 사용하면 찾을 수 있다.
split
그리고 추후 유효성 검사나 form의 input을 가공할때 많이 쓰이는
split()이 있다.
var str = 'Hello from the other side';
console.log(str.split(" "));
// ['Hello', 'from', 'the', 'other', 'side']이렇게 split안에 기준이 되는 문자열을 넣으면
그 기준에 따라 나눠서 배열에 넣고 생성해준다.
substr, substring, slice
또 원하는 문자열을 갖고 추출해주는 subtring(start,end)가 있다.
var str = 'abcdefghij';
console.log(str.substring(0,3)); // 'abc'
console.log(str.substring(1,4)); // 'bcd'
console.log(str.substring(-1,4)); // 'abcd', 음수는 0으로 취급
console.log(str.substring(0,20)); // 'abcdefghij', 범위까지만 출력다르게 끝 인덱스 번호가 아닌 start에서 length길이를 재서 추출하는
substr(start,length)도 있다.
또, 신기한것은 substring과 작동방식은 비슷하지만,
약간은 다른 slice(start,end)가 있다.
차이점은 무엇일까?
start > end 일 경우
substring()은 start와 end의 값을 바꿔서 처리하고,
slice()는 그냥 빈값을 리턴해버린다.
또한 start또는 end가 음수값을 때,
substring()의 경우,
start값이 음수인 경우, start값은 0으로 취급 되며,
end값이 음수인 경우에도, start값과 마찬가지로 end값은 0으로 취급된다.
slice()는
string의 가장 뒤에서 음수의 절대값만큼 내려온 index로 취급한다.
toLowerCase, toUpperCase
자바스크립트 문자열은 대소문자를 구분한다.
따라서 가끔 대소문자를 서로 변환하여 맞춰주는 경우가 있는데,
console.log('ALPHABET'.toLowerCase()); // 'alphabet'
console.log('alphabet'.toUpperCase()); // 'ALPHABET'이처럼 변환할수 있다.
추가적으로...
trim
만약 실수로 데이터에 앞뒤로 여백이 생기면 어떻게 제거할까?
이런경우 trim()을 사용한다.
const greeting = ' Hello world! ';
console.log(greeting);
// expected output: " Hello world! ";
console.log(greeting.trim());
// expected output: "Hello world!";이스케이프 시퀀스
자바스크립트/html 에서 공백, 새로운 라인 등을 넣고 싶다면,
예전부터 내려오는 이스케이프 시퀀스를 사용하면 된다.
