[220105] 메서드 (split, repeat, replace, repalceAll, includes, indexOf, substring, substr, concat, valueOf, slice, splice)

목차

1.   문자열을 다루는 메서드

---

 

오늘 수업은 감자특집이라고 하겠다. 수업을ㅋㅋㅋ 듣고는 있는데 하나도 이해를 못해서 그저 같이 흘러감ㅋㅋㅋㅋㅋㅋ

나는 말하는 감자지만 괜찮아!!!! 괜찮아!!!!! 나는 살아숨쉬는 감자니까 노력하면 나아진다!!!

 

이 날 수업 소감

---

메서드 특징만 잡자!

1. 객체.함수()
2. 행동하는 애들 -> 행동해서 어떤 것을 가져온다 -> 가져오는 어떤것은 어떤 데이터 타입인가?
3. 이런 흐름을 알면 메서드를 사용할때 왜 리턴값을 알아야하는지, 어떤 데이터 타입에서 활동하는지 알아야하는지 알 수 있다.

 

---

 

문자열이 뭐더라?

let str = "000-000-0000";
console.log(typeof(str));
//타입은 string이 나온다

console.log(str.length);
//length가 10이 나온다. 객체만 되는건데!
//객체로 string을 만들었기때문에 가능하다.

//---> 증명
let str2 = new String("000-000-0000");
//이렇게 선언해도 같은 방식으로 만들어진다.

console.log(typeof(str2));
//차이점은 얘는 타입이 object가 나온다는것

//결론 : string은 객체다

 

---

 

문자열을 다루는 메서드 : 자르거나 합치거나 특정부분을 만들거나

 

함수에서 쓰는 값 : 인자값

함수정의할때 쓰는 값 : 매개변수

 

split (구분할 기준값,  자를 갯수)

• string.split (seperator, limit): 인자값 기준으로 잘라내서 배열로 저장함
• 첫번째 인자값 : string / (필수) 구분할 수 있는 기준값 
• 두번째 인자값 : number / 필수는 아님) 총 몇개를 자를것인가
• return 타입 : array  /  [] --> 배열로 반환해주기 때문
• 특징 : 잘라내서 저장할때 기준값을 빼고 저장한다.

let str2 = new String("000-000-0000");

str2.split("-")
//-을 기준으로 나누겠어!
//결과 ['000', '000', '0000'] 

str.split("-",1)
//-을 기준으로 나누는데 나는 맨 앞 블록인 000만 필요해
//결과 ['000']

둘의 타입을 보면 다르다. split으로 자른 arr의 속성이 배열인 Array로 뜨고 있음.

 

repeat (반복할 횟수)

• string.repeat (seperator) : 인자값만큼 반복함
• 인자값 : number
• return : string

let str3="**"
str3.repeat(6)
//**을 6번 반복할게!

//특정 객체 안에 사용되는 함수인 메서드(method) 안에는 return이 존재.
//return은 데이터타입을 변형할 수 있다
//하지만 repeat은 string 타입에서 --> string으로 렌더함

 

 

replace (/바꿀 문자열/조건, 바꿀 문자열이 있는 문자열)

• newString = string.replace(regexp|substr, newString|function)
• regexp (패턴)
  • 정규식(RegExp) 객체 또는 리터럴.
  • 일치하는 항복은 newString 또는 지정된 함수가 반환한 값으로 대체됨
• substr (패턴)
  • newString으로 대체될 string. 정규식이 아닌 글자 그대로의 문자열로 처리됨.
  • 오직 첫번째 일치되는 문자열만이 교체된다.
• newString (치환) : 첫번째 파라미터를 대신할 string
• function (치환) : 주어진 regexp 또는 substr에 일치하는 요소를 대체하는데 사용될 새 하위 문자열을 생성하기 위해 호출하는 함수.
• return (string) : 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열
• replace를 정규표현식으로 사용하는 방법
  
  • str.replace(/바꿀 문자열/i, '바꿀 문자열이 있는 문자열') -> 대소문자 상관없는 ignore
    • let str = " Cat banana dogGy SEA"
      let newStr = str.replace(/banana/i, 'KIWI')
      console.log(newStr);
      
      //출력 : Cat KIWI dogGy SEA​ 
  • str.replace(바꿀 순서를 지닌 규칙변수, 임의로 지정한 순서변수, 임의로 지정한 순서변수)
    • let re = /(\w+)\s(\w+)/;
      let str = 'John Smith';
      let newstr = str.replace(re, '$2, $1');
      console.log(newstr); 
      
      //출력 : Smith, John

 

 

 

replace (/바꿀 문자열/조건, 바꿀 문자열이 있는 문자열)

• replaceAll은 자바스크립트에 없지만 그와 비슷하게 작동하도록 replace를 응용해서 사용할 수 있다.
  • str.replace(/바꿀 문자열/gi, '바꿀 문자열이 있는 문자열')
  • 최초가 아닌 전체를 바꾸는 gobal + 대소문자 무시하는 ignore = replacAll 기능
    • let re = /apples/gi;
      let str = 'Apples are round, and apples are juicy.';
      let newstr = str.replace(re, 'oranges');
      console.log(newstr);  
      
      //출력 : oranges are round, and oranges are juicy.

 

 

includes (찾을 요소, 검색을 시작할 위치)

• arr.includes(valueToFind, fromIndex)
• 검색을 시작할 위치에서 특정 요소를 찾음
• valueToFind : (필수) number 탐색할 요소, 문자나 문자열을 비교할때 소문자와 대문자를 비교한다
• fromIndex : (필수 아님) number 탐색 시작 위치, 기본값은 0, 음수일때는 총 길이에 더한다.
• return : booelan 해당 영역에 요소가 있는지 없는지만 확인한다.

 

 

indexOf (찾으려는 문자열, 검색을 시작할 인덱스 번호)

• string.indexOf(searchValue, fromIndex) -> string 말고 array도 가능
• 검색을 시작할 인덱스 번호부터 특정 문자열을 찾음
• searchValue : (필수) string 아무것도 주어지지 않으면 unfined을 찾는다.
• fromIndex : (필수 아님) number 문자열을 찾기 시작할 인덱스 번호
• return : number searchValue의 첫번째 인덱스. 찾을 수 없으면 -1 반환

 

 

substring(시작 인덱스 번호, 끝 인덱스 번호)

• string.substring(indexStart, indexEnd)
• 시작 인덱스 번호에서 시작해서 끝 인덱스 번호까지 문자열을 반환
• indexStrat : (필수) number 시작하는 위치의 인덱스 번호
• indexEnd : (필수 아님) number 끝나는 위치의 인덱스 번호, 포함하지 않는다.
• return : array 기본 문자열의 부분 문자열을 반환

 

 

substr(시작위치, 반환할 갯수)

• string.substr(start, length)
• 특정 위치에서 시작, 특정 문자수만큼 반환
• start : (필수) number 추출하고자하는 문자 시작 위치
  • 음수일 경우 전체길이+(시작위치) -> 예) 전체길이8+(시작위치-3)
  • 이게 substring과의 차이!! 전체 길이를 불러내서 잘라내는 substr과 인덱스번호로 불러내서 처리하는 substring
• length : (필수 아님) number 추출할 문자들의 총 숫자
• return : string 문자열을 반환

 

 

concat

• array.concat(value1, value2...)
  • 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만든다.
  • 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수자체가 붙는다.
  • this나 인수로 넘겨진 배열의 내용을 바꾸지 않고, 주어진 배열을 합친 뒤 그 얕은 사본을 반환.

얕은 복사에 대한 블로그 글 : https://hancoco.tistory.com/34?category=1028077 

[220107] 깊은복사, 얕은복사, const, 블록체인 구조 맛보기

• • 새 배열에 참조를 복사. 원본 배열과 새 배열에서 같은 객체를 가르키게 됨. 즉, 참조하는 객체를 수정하면 그 내용이 새 배열과 원본 배열 둘 다에서 나타남.
  • string, number, boolean 객체 아님 : concat은 새 배열에 문자열과 수의 갑을 복사한다.
• array : (필수) 배열 또는 값.
• value1, value2 : (필수 아님)
  • 인자를 생략하면 기존배열의 얕은 복사본을 반환 
• return : array 새로운 배열 객체

 

 

valueOf

• string.valueOf()
• return : string 객체의 원시값을 반환함
• 원시값
  • 정의 : primitive이란 객체가 아니면서 메서드도 가지지 않는 데이터다. 언어구현체의 가장 저급단계에서 나타난다.
  • 원시값의 7종류 : string, numberm, bigint, boolean, undefined, symbol, null
  • 속성 : 불변하며 변형할 수 없다. 재할당이 금지된 변수인 const와 다르다.
  • 원시 값 자체와 원시값을 할당한 변수는 서로 다르다. 변수는 재할당이 가능하다.

 

 

slice(추출 시작하는 인덱스번호, 추출 종료 인덱스 번호)

• array.slice(begin, end)
• begin : (필수 아님)
  • 추출 시작점에 대한 인덱스. 입력값이 없으면 인덱스 0부터 시작한다.
  • 음수는 맨 끝에서부터 갯수를 센다. 예) -2는 맨 끝에서 2개를 추출한다.
  • 총 길이보다 큰 추출시작점일경우, 빈 배열을 반환
• end : (필수 아님)
  • 추출 종료점에 대한 인덱스. 종료 인덱스를 제외하고 slice 한다.
  • 총 길이보다 큰 추출종료점 값이거나 입력받지 않으면 끝까지 출력한다.
• return : array
  • 추출한 요소를 포함한 새로운 배열
  • 원본을 대체하지 않으며 얕은 복사값이다!

 

 

splice(시작 인덱스 번호, 삭제할 요소 갯수, 추가할 요소..)

• array.splice(start, deleteCount, item1, item2...)
• 배열 기존의 요소를 삭제 또는 교체, 추가하여 원본 배열의 내용을 변경한다. 
• start : (필수)
  • 배열의 변경을 시작할 인덱스
  • 배열의 길이보다 큰 값이라면 시작 인덱스를 배열의 길이로 설정
  • 음수는 맨 끝에서부터 갯수를 센다. 예) -2는 맨 끝에서 2개를 센다
• deleteCount : (필수 아님)
  • 배열에서 제거할 요소의 수
• item1, item2... : (필수 아님)
  • 배열에 추가할 요소. 아무것도 지정하지 않으면 splice()는 요소 제거만 함
• return : array
  • 제거할 요소를 담은 배열
  • 하나의 요소만 제거한 경우 길이가 1인 배열을 반환
  • 아무 값도 제거하지 않았으면 빈 배열 반환

 

---

연습문제(진행중)

문제

   let txt = "1e5315166152e1152z1d1v4b1n"
        //1. txt 변수 안에서 e가 몇번 들어갔는가?
        //2. txt변수를 5개씩 잘라서 배열에 넣어주세요
        //3. 배열 안에 글자중 e z d v n이 있다면 배열을 삭제해주세요
        //4. 그리고 나머지값 배열 중에서 (요소) 중복값을 제거해주세요

 

풀이

//1. txt 변수 안에서 e가 몇번 들어갔는가?
let num=0;

for(let i=0; i<txt.length; i++){
	if(txt[i]=='e'){
		num++;
	}
}
console.log(num);

 

//1. txt 변수 안에서 e가 몇번 들어갔는가?
let num=0;

for(let i=0; i<txt.length; i++){
	if(txt[i]=='e'){
		num++;
	}
}
console.log(num);

 

//2. txt변수를 5개씩 잘라서 배열에 넣어주세요
let arr=[]
let len=Math.ceil(txt.length/5)

for(let i=1; i<=len; i++){
	arr.push(txt.substring((i-1)*5,i*5))
}
console.log(arr);