[2023-03-04]String객체,Array객체

<복습>

Number(null) = 0

Number(undefined) = NaN

 

객체.valueOf() : 객체의 원시값을 반환해주는 메소드

//10이라는 값을 가진 num이라는 인스턴스를 생성성
let num = new Number(10);
console.log(num); // [Number: 10]
console.log(num.valueOf()); //10

하지만 모든 객체가 valueOf() 메소드가 있는 것은 아니다. Boolean,String,Number만 valueOf() 메소드가 있다.

//객체를 만들기 위한 생성자 
function Numbers(n){
	return this.number = n;
}

valueOf라는 함수를 넣음 
Number.prototype.valueOf = function(){
	return this.number;
}

var num = new Numbers(10);

console.log(num + 10); // 20

만약, valueOf 라는 메소드가 없었다면 , 원시값을 반환해주는 메소드가 들어있지 않기 떄문에 [object Object]10 으로 나온다 

+ 의 단연산자에도 내부적으로 valueOf() 메소드가 들어있다.

var num = 5;
console.log(+"5"+num); //10
consolelog("5"+num); // 55

위를 보면, +는 다른 연산자와는 다르게 문자열값을 숫자열로 안바꾸고 모든걸 문자열로 바꿔준다,

이때 문자열의 앞에 + 라는 단항연산자를 추가하면 , valueOf() 메소드가 적용되서 10이 출력된다.

 

객체.toString() 객체를 string타입으로 만들어준다

var num =5;
console.log(typeof num); // number
console.log(typeof num.toString()); // string

 

 

---

1.가위바위보게임

<!--

        [화면설계]

        1.사용자가 입력칸에 가위, 바위, 보를 입력할 수 있도록 만든다.

        2.버튼을 클릭하면 , 가위바위보 게임이 실행되는 함수를 넣는다.

        3.결과를 표시해주는 div를 만들어준다.

        [스크립트]

        1.사용자의 값을 가져올 변수를 만든다.

        2.컴퓨터는 Math.random()함수를 이용하여 , 1~3까지를 뽑도록 한다.

       

        [가위바위보 알고리즘]

        사용자: 가위 1 바위 2 보 3

        컴퓨터: 가위 3 바위 2 보 1

        무승부 : 사용자 + 컴퓨터 = 4

        사용자 승 : 사용자(1) + 컴퓨터(1) = 2 || 사용자(2) + 컴퓨터(3) = 5

        사용자 짐 : 사용자(1) + 컴퓨터(2) = 3 || 사용자(3) + 컴퓨터(3) = 6

        3.결과값을 보여줄 때, 승,패,무도 표시하지만 사용자와 컴퓨터 둘다 입력값을 표시해줘야한다.

        [숫자를 한글로 표시하는 알고리즘]

        사용자의 입력값은 한글이기 때문에 , 숫자형으로 바꿔주고 , 컴퓨터의 입력값은 숫자이기 때문에 한글로 바꿔준다.

        userRSPnbr = (userInput=="가위")?1:(userInput=="바위")?2:3;

        computerRSPstr = (computerInput==3)?"가위":(computerInput==2)?바위:보;

        4.위의 자료를 이용하여 결과값을 표시해준다.

     -->

<script>

        function playGame(){
        const $ = (selector) => document.querySelector(selector);
        var userRSPstr = $("#userRSPstr").value;  // 사용자 입력값 , 문자형태 
        var computerRSPnbr = Math.floor(Math.random()*3)+1;

        //계산을 위해, 문자형태를 숫자로 바꾸기 
        var userRSPnbr = (userRSPstr=="가위")?1:(userRSPstr=="바위")?2:3;
        //표시를 위해 , 컴퓨터 랜덤값을 문자로 바꾸기
        var computerRSPstr = (computerRSPnbr==3)?"가위":(computerRSPnbr==2)?"바위":"보";


        if(userRSPnbr+computerRSPnbr==4){
        $("#display").innerHTML = "컴퓨터는 "+computerRSPstr+"를 냈고 당신도 "
        +userRSPstr+"를 내서 무승부 입니다.";
        }else if(userRSPnbr+computerRSPnbr==2||userRSPnbr+computerRSPnbr==5){
            $("#display").innerHTML = "컴퓨터는 "+computerRSPstr+"를 냈고 당신은 "
            +userRSPstr+"를 내서 당신이 이겼습니다";

        }else{
            $("#display").innerHTML = "컴퓨터는 "+computerRSPstr+"를 냈고 당신은 "
            +userRSPstr+"를 내서 컴퓨터가 이겼습니다";

        }

    }

 

---

 

 

String 객체

 

string객체를 공부하기전에 미리 알아야할 기본 개념이 있다. 바로 아스키(ASCII)코드인데, 컴퓨터의 언어는 텍스트가 아니라 바이트이기 때문에 128개의 문자들을 바이트로 지정해 놓았다(여기에 지정되지 않으면 encodeURI같은 함수를 써서 바이트로 해석해줘야 함)

아스키 인코딩 환경에서 영문자는 한 글자당 1바이트를 가지고 있으며 , 알파벳소문자>알파벳대문자인 것이 특징이다.

 

 

알파벳소문자>알파벳대문자>숫자

 

String객체의 indexOf()메소드 

indexOf() 인자에 담긴 문자열의 첫번째 인덱스 값을 반환한다.

var message = "java is so hard";
var index = message.indexOf("ja");
console.log(index); //0

위 처럼 인자값을 하나만 넣을 수 있지만, 두개를 넣는 경우도 있다 

indexOf("문자열",추적 인덱스 시작번호);

var message = "javassss";
var index =message.indexOf("a",3); // 인덱스 3부터 즉 , 두번째 a부터 찾는다 
console.log(index); // 3

문자를 찾지 못하면 -1로 나온다 , 

var message = "java";
var index = message.indexOf();
console.log(index); // -1

즉 찾을 문자열이 없을 떄까지 찾으려면 , while(index != -1) 이런식으로 찾을 수 있다.

문자열을 다르게 입력하면 찾지 못한다. javs로 연결되는 문자열이 없기 때문에 찾지 못한다.

var message = "java";
var index = message.indexOf("javs");
console.log(index); // -1

 

 String객체의 lastIndexOf() 메소드 

해당 문자의 마지막 인덱스를 찾는다.

var str = "pudding";
var result = str.lastIndexOf("d");
console.log(result); // 3

d가 처음나오는 인덱스 2가 아니라 인덱스 3으로 출력된다.

인자값을 두개로 줄떄는 , 뒤의 인덱스가 부터 역으로 찾겠다는 뜻이다. 

var str = "dudding";
var result = str.lastIndexOf("d",2);
console.log(result); // 2

인덱스 2번부터 d가 가장 마지막으로 나온걸 찾겠다는 뜻

 

lastIndexOf() 도 찾지 못하는 값은 -1로 나온다 

var str = "pudding";
var result = str.lastIndexOf("ha",1);
console.log(result); // -1

 

참고로 , 소문자 대문자도 구분하기 때문에 잘 적어야한다.

var str = "pudding";
var result = str.lastIndexOf("Pu");
console.log(result); // -1

 

 

String객체의 charAt() 메소드

charAt() 안의 인덱스 값의 문자를 반환한다.

var string = "hi";
var index = string.charAt(0);
console.log(index); // h

 

charAt() 인덱스 값을 소수로 줄 경우  : 소수점과 가장 가까운 인덱스를 반환, 1.6해도 인덱스1을 반환

var string = "heloworld";
var index1 = string.charAt(1.2);
console.log(index1); // e

 

 

String split()메소드 

인자값을 기준으로 값을 나눠서 배열로 리턴해준다.

var message = "javascript-is-fun";
result = message.split("-");
console.log(result);

 

[javascript,is,fun]

 

split() 을 이렇게 하나만 하면 , 문자열 배열 하나만 리턴한다. 따라서 문자열.split(",") 를 해야 하나하나 나눠준다

console.log("ABCD".split()); //[ABCD]
console.log("ABCD".split(",")); //[ 'A', 'B', 'C', 'D' ]

 

빈공간이 있는 경우 

var text = "Java is awesome. Java is fun."
var result = text.split(".");
console.log(result);
//[ 'Java is awesome', ' Java is fun', '' ]​

이걸보면 , 배열이 3개가 생성되었다. 마지막 부분 배열은 필요없는데 말이다.

 

해결방법

최대배열 수를 지정한다

split("나누는 기호",최대 배열 수) 

var text = "Java is awesome. Java is fun.dfsd.sdfds"
var result = text.split(".",2);
console.log(result);
//[ 'Java is awesome', ' Java is fun']​

 

 

 

 

String객체의  slice()메소드 

인덱스값을 넣어서 , 문자열을 추출한다.

var message = "JavaScript is fun";
//인덱스 0부터 10까지 추출 (끝인덱스는는 포함 x)
var result = message.slice(0,10);
console.log(result)//JavaScript

 

인덱스 값에 -값을 넣은 경우 

var message = "JavaScript is fun";
//끝에서부터 -1 , -2 .. -11에 왔을 때, 그떄부터 
//추출출
var result = message.slice(-3);
console.log(result)//fun

끝에서부터 -1 로 센 후, 거기서부터 문자를 리턴한다. 인수를 두개 받을 때, 마지막 인덱스는 포함하지 않는다.

따라서 -6에서 -3의 값이 나온다 

var message = "JavaScript is fun";
var result = message.slice(-6,-4);
console.log(result)//is

-를 이용해서 셀때

 

slice()와 비슷한 메소드로 substring() 메소드가 있다.

그런데 substring()메소드는 마지막인덱스에 음의 정수를 인수로 가질 수 없다. 

var str = "adfdsfdsf" ;
console.log(str.substring(-4, -2)) ;//처리X
console.log(str.substring(-1)) ;//처리X, 음의 정수는 0으로 바껴서 전부 출력

String객체의 substr()

문자열을 인수의 갯수만큼 빼준다.

처음 인수는 , 시작하는 인덱스이고 뒤에 인수는 2개를 뽑겠다는 뜻이다.

var name = "pudding";
console.log(name.substr(1,2)) // ud

substr()도 인수에 음의 정수를 넣어서 뒤의 인덱스부터 시작할 수 있다. 

var name = "pudding";
console.log(name.substr(-2,2)); //ng
console.log(name.substr(-3,1)); //i

 

 

String객체의 trim()메소드 

문자열 양옆의 띄어쓰기를 제거해준다.

var name = "   pudding  ";
console.log(name.trim()); // pudding만 출력

 

---

trim()과 split()을 이용하여, 띄어쓰기 제거한 배열을 만들어보자 

var cakes =" choco,  cheese  ,mint  "

[설계]

split(",")을 이용해 ,구분자로 배열을 만들어낸다 

그 후 for문을 이용하여, 요소 하나하나 꺼낼 떄마다 trim()을 이용해 띄어쓰기를 제거해준다.

var cakes =" choco,  cheese  ,mint  "
var cakesArr = cakes.split(",");
for(var item of cakesArr){
	var result = item.trim();
    console.log(result);
}

---

String 객체의 includes() 메소드 : 인자값이 들어가있는지 확인 후 , boolean값으로 리턴해준다.

 

var cakes = "i love cake";
var result = cakes.includes("cake");
console.log(result);//true

주의점은 자바스크립트에서는 소문자와 대문자 모두 체크하기 때문에 Cake라고 쓰면 false가 나온다.

인수값을 준다면 , 인덱스 9부터 찾겠다는 뜻이다 

var cakes = "i love cake but also pudding";
var result = cakes.includes("cake",9);
console.log(result);//false

띄어쓰기도 하나의 문자로 본다 !

console.log("자바스크립트는 유용한 웹 개발언어 입니다.".includes(" 언어")); //false

앞에 띄어쓰기 떄문에 띄어쓰기+언어를 찾아도 없으니 false가 나온다 

 

 

 

String 객체의 startsWith() 메소드

문자열의 시작이 인자값부터 하는지 확인 후, boolean값을 반환해준다.

var message = "javascript is fun";

var check1 = message.startsWith("java");
console.log(check1); // true

var check2 = message.startsWith("script");
console.log(check2); // false

 

String 객체의 endsWith()메소드

문자열의 끝이 인자값인지 확인 후 , boolean 값을 반환해준다.

var message = "javascript is fun";

var check1 = message.endsWith("fun");
console.log(check1); // true

var check2 = message.endsWith("script");
console.log(check2); // false

 

 

String객체의 concat()메소드

문자열을 합쳐준다.

var emptyString = "";
var joinedString = emptyString.concat("javascript"," is ", "fun");
console.log(joinedString);

---

Array객체의 sort()메소드 

 

 

올림차순(작은데이터 -> 큰데이터)순으로 정렬해준다.

var cakes = ["choco","apple","mint"];
console.log(cakes.sort());
//[ 'apple', 'choco', 'mint' ]

 

 

그런데 앞자리만 비교하기 때문에 숫자를 비교할 때 문제가 생긴다.

var arr = [10,3,6];
var result = arr.sort();
console.log(result); // [ 10, 3, 6 ]

따라서 , sort안에 함수를 넣어준다 

var arr = [10,3,6];
function alignN(a,b){
    return a-b;
}
var result = arr.sort(alignN);
console.log(result); // [ 3,6,10 ]


/*
index 0 을 비교 
10 - 3 = + 바꿈
[3,10,6]
10-6 = + 바꿈
[3,6,10]

index 1을 비교
6-10 = - 안바꿈
[3,6,10]

*/

Array객체의 pop()메소드 

배열의 마지막 요소를 빼옴 

var arr = ["a","b","c","d","e"];
var result = arr.pop();
console.log(result); // e
console.log(arr); //[ 'a', 'b', 'c', 'd' ]

 

다차원 배열값도 빼낼 수 있다.

var multiArr = [[1,2,3],[2,3,5]];
var result = multiArr.pop();
console.log(result);//[ 2, 3, 5 ]
console.log(multiArr);//[ [ 1, 2, 3 ] ]

Array객체의 shift()메소드 

배열의 첫번째 요소를 가져간다.

var multiArr = [[1,2,3],[2,3,5]];
var result = multiArr.shift();
console.log(result);//[ 1,2,3]
console.log(multiArr);//[ [ 2, 3, 5 ] ]

Array객체의 unshift()메소드 

push()는 뒤에 추가해주는 것이라면 , unshift()는 배열의 맨 앞에 요소를 추가해준다.

var arr = ["a","b","c","d","e"];
var result = arr.unshift("english");
console.log(result); // 6 , 배열의 길이가 나옴 
console.log(arr); //[ 'english', 'a', 'b', 'c', 'd', 'e' ]

 

Array객체의 join()메소드 

배열을 인자안에 있는 텍스트로 나눠준다.

var cake = ["cheese","cake","is","good"];
var result = cake.join(" ");
console.log(result)

하지만 배열의 길이는 변하지 않고, 단순히 보여줄 때만 쓰는 것이다.

 

---

 

 

 

 

배열나올 때 , 순회방법 : 인덱스로 비교하자 

 

 

 

split으로 사용자 아이디를 @ 구분자로 추출할 수도 있다.

var email1 = "pudding@naver.com";
var email2 = "jeffrey@daum.net";
var email3 = "james@google.com";

var arr = [email1,email2,email3];

for(var item of arr){
	var result = item.split("@);
    console.log(result) // [pudding,naver.com] 이런식으로 세개가 출력됨 
}