7. 형변환, 비교연산자, 문자열/숫자 내장함수

문자열 -> 숫자 

요소의 내용 또는 값을 얻어오면 기본적으로는 문자열(string)로 인식되어 덧셈을 하려고 하면 "더하기"가 아닌 "이어쓰기"가 된다. 

 

* 변환 방법 

 1. parseInt(문자열) 

    : "정수" -> 정수  ex) "123" -> 123

      "실수" -> 정수  ex) "3.14" -> 3 (소수점이 버려짐)

 

2. parseFloat(문자열)

    : "정수" -> 정수  ex) "123" -> 123

      "실수" -> 실수  ex) "3.14" -> 3.14 

 

3. number(문자열)

    : "정수" -> 정수  ex) "123" -> 123

      "실수" -> 실수  ex) "3.14" -> 3.14  

     * 가장 많이 사용(직관적임) 

console.log("1. parseInt")
console.log("parseInt('123') -> " + parseInt("123") + " / " + typeof(parseInt("123")))
console.log("parseInt('3.14') -> " + parseInt("3.14") + " / " + typeof(parseInt("3.14")))

console.log("--------")

console.log("2. parseFloat")
console.log("parseFloat('123') -> " + parseFloat("123") + " / " + typeof(parseFloat("123")))
console.log("parseFloat('3.14') -> " + parseFloat("3.14") + " / " + typeof(parseFloat("3.14")))

console.log("--------")

console.log("3. Number")
console.log("Number('123') -> " + Number("123") + " / " + typeof(Number("123")))
console.log("Number('3.14') -> " + Number("3.14") + " / " + typeof(Number("3.14")))

 

 

 

---

 

비교 연산자 

1. 동등 비교 연산자(==, !=)

   : 값만 같으면 true(자료형 상관X)

     ex) '1'(string) == 1(number) == true(boolean, 1) 

 

2. 동일 비교 연산자(===, !==)

    : 값과 자료형이 모두 같아야 ture

 

 

---

 

문자열(string) 내장 함수 

1. string.IndexOf("찾고싶은 문자열")

    : string 내에서 "찾고싶은 문자열"의 시작 인덱스를 반환, 없으면 -1 반환 

 

2. string.lastIndexOf("찾고싶은 문자열")

    : 뒤에서부터 검색하여 string 내에서 "찾고싶은 문자열"의 시작 인덱스를 반환, 없으면 -1 반환 

const str = "가나다가나다"
console.log(str.indexOf("다")) 		// 결과: 2
console.log(str.lastIndexOf("다"))	// 결과: 5

 

3. string.substring(시작인덱스, (마지막인덱스))

   : 문자열에서 시작 인덱스부터 끝까지 잘라서 반환 

    (마지막인덱스) 시작 인덱스부터 마지막 인덱스 전까지 잘라서 반환  

const str = "012345"
console.log(str.substring(2))		// 결과: 2345
console.log(str.substring(2,5))		// 결과: 234

 

4. string.split("구분자")

   : 문자열을 "구분자"를 기준으로 나누어서 배열로 반환, 구분자를 넣지 않으면 문자열이 모두 한 글자씩 나누어져 배열로 반환. 

const str = "사과*포도*수박"

console.log(str.split("*"))
// 결과: [ '사과', '포도', '수박' ]
console.log(str.split(""))
// 결과: ['사', '과', '*', '포', '도', '*', '수', '박']

 

 

---

 

숫자 관련 내장 객체/함수

* 숫자(number) 타입 리터럴 표기법 

  : 123(정수)  /  9,321(실수)  /  infinity(무한)  /   NaN(Not a Number)

 

내장 객체 Math의 내장함수

  - Math.ceil(값) : 올림

  - Math.floor(값) : 내림

  - Math.trunc(값) : 버림

  - Math.round(값) : 반올림 

  * 숫자.toFixed(자릿수): 숫자를 지정된 자릿수까지 반올림하여 표현

 

const num = 3.542
console.log(Math.ceil(num))  // 결과: 4
console.log(Math.floor(num)) // 결과: 3
console.log(Math.trunc(num)) // 결과: 3
console.log(Math.round(num)) // 결과: 4
console.log(num.toFixed(2))  // 결과: 3.54

 

 

  - Math.random() : 0 이상 1 미만의 난수 발생(소수점 가능) 

document.getElementById("btn1").addEventListener("click", function(){
    // 1. Math.random()만 사용하면 0이상 1미만의 소수점이 나온다. 
    console.log(Math.random()) // 결과: 0.3386852835927152

    // 2. 원하는 숫자를 만들기 위해서는 원하는 범위까지의 숫자를 곱해준다. 
    console.log(Math.random() * 256)

    // 3. 소수점을 버린다. 
    console.log(Math.floor(Math.random() * 256))

    // 응용: rgb 색상을 랜덤으로 만들어 보기 
    const r = Math.floor(Math.random() * 256)
    const g = Math.floor(Math.random() * 256)
    const b = Math.floor(Math.random() * 256)

    document.querySelector("body").style.backgroundColor = `rgb(${r},${g},${b})`
})

 

- isNaN(값): 값이 숫자가 아니면 true, 숫자면 false

console.log(isNaN("string")) // 결과: true
console.log(isNaN(123))      // 결과: false