String 이란?

1. 기본 설명
   - 텍스트 길이와 상관없이, 문자열 형태로 저장되는 자료형입니다.
   - 큰 따옴표(""), 작은 따옴표(''), 역 따옴표(``) 를 사용해서 정의할 수 있습니다.

2. 문자열 인덱스 (사용가능)

const text = "안녕 하세요";
text[0] // 안
text[1] // 녕
text[2] // (빈칸. 아무것도 보이지 않음) // 띄어쓰기도 1개의 인덱스로 여겨진다.

3. 문자열 길이 (사용가능)

const text = "안녕 하세요";
console.log(text.length); // 6

4. 문자열끼리 더하기

const A = 'a';
const B = 'b';

A+B // ab // 방법1)
`${A}${B}` // ab // 방법2)

5. 문자열 개행방법 2가지 (줄바꿈기능)

// 방법1) \n 사용하기
"안녕\n하세요"

// 방법2) `` 사용하기 // `이 안에서 변수를 사용하려면, ${변수명}으로 `
`안녕
하세요`

// 둘다 결과값이 밑에와 같이 나온다.
안녕
하세요

// 참고) `이 안에서 변수를 사용하려면, ${변수명}을 사용`
const fruit = "사과";
const price = 1000;
const many = 5;
console.log(`${fruit}의 구매가는 ${price * many}원 입니다`); // 사과의 구매가는 5000원 입니다

문자열 관련 method

1. 문자열 대소문자 변환 (원본훼손 X)

test.toUpperCase(); // 대문자변환 ("hello".toUpperCase()로 사용할 수도 있다)
test.toLowerCase(); // 소문자변환

2. 문자 값 반환

test.charAt(); // 인덱스로 값 가져오기. test[0]과 같다.

const test1 = "hello"; // -> console.log(test1.charAt()); -> 결과는 h (빈칸일때는 0번째 인덱스를 반환. 0을 넣어줘도 된다.)
const test2 = "hello"; // -> console.log(test2.charAt(1)); -> 결과는 e (1번째 인덱스를 반환)

3. 공백 제거 (원본훼손 X)

// test의 양끝의 공백을 제거. 앞뒤모두. (왼쪽공백 or 오른쪽공백만 제거하는 방법도 있으니 필요시 mdn검색)
const check1 = test.trim();

// test의 모든 공백을 제거. (앞, 뒤, 중간 모두)
const check2 = test.replace(/ /gi, "");
const check3 = test.replace(/\s/gi, "");
const check4 = test.replace(/ /g,"");

4. 인덱스 반환

// 맨 앞부터,
test.indexOf("값", 옵션);
const test3 = "안녕하세요하세요"; // -> console.log(test3.indexOf("하", 0)); -> 결과는 2. 0번째 i로부터 가장가까운 해당 문자열값의 i를 알려줌.
const test4 = "안녕하세요하세요"; // -> console.log(test4.indexOf("하", 4)); -> 결과는 5. 4번째 i로부터 가장가까운 해당 문자열값의 i를 알려줌.

// 맨 뒤부터, 몇번째 인덱스에 있는지 반환 (옵션을 안넣으면 자동으로 length-1이 들어간다)
test.lastIndexOf("값", 옵션);

5. Boolean 반환

test.includes("값", 옵션); // 값이 포함되어 있으면 true, 없으면 false.

6. 표현식삽입

const fruit = "사과";
const price = 1000;
const many = 5;

console.log(fruit + "의 구매가는" + " " + (price * many) + "원 입니다");
console.log(`${fruit}의 구매가는 ${price * many}원 입니다`); // 표현식 // 사과의 구매가는 5000원 입니다

7. 문자열 변환 (원본훼손 X)

1) before.replace(변경전 str, 변경후 str)

const before = 'hello, world';
const after = before.replace('hello', 'hi'); // 요소자리에 식별자 가능
console.log(before); // hello, world
console.log(after); // hi, world

2) replace의 한계: 맨 앞에 1개만 변한다 (이것을 해결하기 위한것이 정규표현식)

const before = '!!!';
const after = before.replace('!', '?');
console.log(before); // !!!
console.log(after); // ?!! // 즉, 맨 앞에 1개만 변한다.

8. 정규표현식 (/패턴/플래그)

1) 문자열 변환

// 예시 1
const before1 = 'hello, world';
const hel1 = /hello/; // 이런식으로 할당도 당연히 가능하다!
const after1 = before1.replace(hel1, 'hi'); // 정규표현식에서는 'hello' -> /hello/
console.log(before1); // hello, world
console.log(after1); // hi, world

// 예시 2
const before2 = '!!!';
const after2 = before2.replace(/!/g, '?'); // g는 해당되는 것 모두찾기, i를 넣으면 대소문자 구분없이 찾는것 가능
console.log(before2); // !!!
console.log(after2); // ??? // 모든 !가 변한다

2) 소문자 or 대문자 확인 (+ 숫자 확인)

const text = 'hellO';

// 매칭되는 항목들을, 배열로 반환 (없으면 null 반환)
const check = (text).match(/[a-z]/g); // [ 'h', 'e', 'l', 'l' ] // 없으면 null
(text).match(/[A-Z]/g);
(text).match(/[0-9]/g);

// Boolean으로 반환 (없으면 false 반환)
(/[a-z]/g).test(check); // 있으면 true // 없으면 false
(/[A-Z]/g).test(check);
(/[0-9]/g).test(check);

3) 참고: before.includes(정규표현식 X)

const check1 = '!!!?'.includes('!');
console.log(check1); // true

// 괄호안에서는 정규표현식 사용못한다!
const check2 = '!!!?'.includes(/!/g);
console.log(check2); // error 발생 // includes must not be a regular expression

9. 문자열 추출 (원본훼손 X)

const hello = '안녕하세요';

// 1. str.slice(start, end - 1)　　---> slice는 Array, String 모두 사용가능. splice는 Array만 사용가능. (split은 String만 사용가능)
const check1 =  hello.slice(0, 1); // 안

// 2. str.substring(start, end - 1)
const check2 =  hello.substring(0, 1); // 안

// 3. str.substr(start, length)
const check3 =  hello.substr(0, 1); // 안

console.log(check1, check2, check3);
console.log(hello); // 안녕하세요

10. 문자열은 불변성(immutable)을 가진다
    - 재할당하지 않는 한 read-only 입니다. 즉, 인덱스로 접근은 가능하지만, 수정은 불가능합니다. (replace도 원본을 바꾸는 것은 아닙니다)
    - 문자열이 가진 불변성 때문에, 문자열 일부만 바꾸는 것은 불가능합니다!
    - 아예 전체를 재할당 하거나, 다른식별자에 새로 할당해줘야 합니다.

let str = 'Hexlo'; // 1번) 실수로 Hello가 아닌 Hexlo를 넣었을때
console.log(str[0]); // H
console.log(str[2]); // x

str[2] = 'l'; // 2번) array처럼 인덱스로 새로운 값을 재할당 해줬다.
console.log(str); // Hexlo // 3번) 그러나 값은 여전히 Hexlo

String -> Array

1. split (원본훼손 X)
   - 문자열''에서 -> 배열[]로 분할하는 메소드 입니다.
   - 지정한 구분자를 이용하여, 여러 개의 문자열로 나눕니다.

2. 문자열 분할 (원본훼손 X)

const test = '김 무 명';

// split
const check1 = test.split(""); // 1개씩 쪼갠다
console.log(check1); // [ '김', ' ', '무', ' ', '명' ]
console.log(check1.length); // 5

const check2 = test.split(" "); // 공백을 기준으로 1개씩 쪼갠다
console.log(check2); // [ '김', '무', '명' ]
console.log(check2.length); // 3

const check3 = test.split(","); // 문자열을 통으로 1개로 반환
const check3 = test.split(); // 문자열을 통으로 1개로 반환
console.log(check3); // [ '김 무 명' ]
console.log(check3.length); // 1

const check4 = test.split("", 2); // 2번째 인자로 문자열갯수 제한가능
console.log(check4); // [ '김', ' ' ]

// [ ...test ] (원본훼손 X)
const check5 = [ ...test ]; // 1개씩 쪼갠다
console.log(check5); // [ '김', ' ', '무', ' ', '명' ]