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

프로그래밍/javacscript

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

한코코 2022. 1. 7. 13:43

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

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

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

메서드 특징만 잡자!

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

문자열이 뭐더라?

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, 블록체인 구조 맛보기

빈 공간의 값은 서로 같을까? : {} == {} console.log(1==1) //true console.log({} == {}) //false //빈 공간이라 같아보이지만 객체는 만들때마다 새로운 값을 부여해서 다르다 //제품을 찍어낼때마다 생산넘버..

hancoco.tistory.com

- 새 배열에 참조를 복사. 원본 배열과 새 배열에서 같은 객체를 가르키게 됨. 즉, 참조하는 객체를 수정하면 그 내용이 새 배열과 원본 배열 둘 다에서 나타남.
- 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);

티스토리

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

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

목차

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

메서드 특징만 잡자!

문자열이 뭐더라?

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

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

repeat (반복할 횟수)

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

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

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

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

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

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

concat

valueOf

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

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

연습문제(진행중)

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

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

목차

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

메서드 특징만 잡자!

문자열이 뭐더라?

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

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

repeat (반복할 횟수)

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

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

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

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

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

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

concat

valueOf

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

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

연습문제(진행중)

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