JavaScript - String (문자열)
(1) String의 개요
: 문자열은 기본적으로 텍스트 정보를 의미한다.
String을 작성 중으로 표현하기 위해서는 따옴표로 감싸줘야 한다는 것이다.
즉, 텍스트를 변수로 지정해주기 위해서는 따옴표("", '')로 감싸줘야 한다는 뜻.
let username = "철수"; /// 이런식으로!여기서 Tip!
큰 따옴표 or 작은 따옴표 모두 사용하는데 문제가 없으나 '일관성'유지를 위해 통일해서 한가지만 사용해주는게 좋다.!
(2) Sting의 Index
: 문자열 안의 모든 문자들은 관련된 숫자에 상응한다.
문자열의 시작은 0부터 시작한다. 왼쪽에서 오른쪽으로 진행.
그렇다면 왜 Index가 중요할까?
인덱스 번호를 통해 각각의 문자에 접근할 수 있기 때문이다.
let animal = "parrot"; animal "parrot" animal[0] // animal의 0번째 인덱스에 접근하라 "p" animal[0] - "p" animal[1] - "a" animal[2] - "r" animal[3] - "r" animal[4] - "o" animal[5] - "t"
이 방법이 유용하게 사용되는 경우는 문자열의 전반부/후반부를 찾을 때 매우 유용하게 사용가능하다.
그렇다며 문자열의 길이를 알고자 할 때는 어떻게 해야할까?
-
변수
.length를 하면 문자열의 길이(문자 수)를 단번에 파악할 수 있다.문자열끼리 더하기
제목 그대로 문자열끼리 더해줄 수 있다. (접합)
let fistName = "Harry";
let lastName = "Kane";
firstName + lastName
"HarryKane"숫자와 문자열 더하기
만약 숫자와 문자열을 더하면 어떻게 될까?
1 + "hi"
"1hi"
let resule = 1 + "hi"
result
"1hi"typeof result
"string"
typeof 1
"number"(3) Stirng Methods의 개요
: 모든 문자열은 실직적으로 어떤 동작들을 내포하고 있다.
특정 문자열을 사용해 수행할 수 있는 동작을 *메서드 라고 부른다.
그렇다면 메서드를 통해 무엇을 할 수 있을까?
꽤 많다! 많지만 예시를 들지면 이렇다.
let message = "hello my name is lol bye"
message.toUpperCase()
"HELLO MY NAME IS LOL BYE"예시의 .toUpperCase()는 대문자로 바꿔주는 것이다.
이 외에도 공백을 없애주는 .trim() 메서드가 있다.
(4) 메서드의 인수
많은 메서드는 인수를 받는다.
여기서 인수란 무엇일까?
인수 : 메서드로 전달되어서 메서드의 동작을 변경하는 입력 값을 말한다.
(4) - 1 index of
indexOf 는 문자열에서 주어진 인수가 나타내는 문자열 인덱스와 그 자릿수를 반환한다.
let thatName = 'catdog';
thatName.indexof('cat'); // 0
thatName.indexof('dog'); // 3즉, indexof 메서드는 지정된 값이 처음 나타나는 지점을 반환해주는 역할을 한다.
주의해야 할 건 띄어쓰기 공백 (" ")도 인덱스에 포함된다.
(4) - 2 slice
slice는 시작 인덱스와 끝 인덱스를 지정하여 추출해내는 역할을 한다.
"wow that is so delicious" // 해당 문자열에서 "that"만 추출해내고 싶다면?
"wow that is so delicious".slice(3, 8)
'that'추가로 slice는 음수로도 표현이 가능한데 역방향으로 진행된다고 보면 된다.
"hello".slice(-1)
'o'(4) - 3 replace
replace 를 사용하려면 2개의 인수를 전달해줘야 한다.
변수.replace('첫번째 인수', '두번째 인수')
첫 번째 인수는 교체 되어야 할 값 두 번째 인수는 교체해서 들어가려는 값
let product = "skateboard"; // skateboard에서 'o'를 'e'로 대체하기
product.replace('o', 'e')
"skatebeard"따라서 인수에 바꿔줄 자리의 인수, 새로 바뀔 인수 값을 차례로 적어주는 것을 잊지말자!
(5) Template Literals
많아지는 문자열 안에 표현식을 넣어주고자 할 때, 아주 유용하게 사용할 수 있다.
`we have a ${3+5} chocolates`; // we have 8 chocolates꼭 사용하기 위해선 백틱(`)기호를 사용해줘야 한다는 것. / 추가로 표현식을 표현하기 위해 { } 와 $를 사용하여 주어야 한다는 사실을 잊지말자.
