📝 문자열(String 내장 객체)

자바스크립트에는 문자열을 나타내는 객체(String)가 존재하며 문자열과 관련된 기본적인 함수를 제공해 준다.

💡 문자열.indexOf("str")

문자열에서 "str"과 일치하는 부분이 시작되는 인덱스를 반환, 없으면 -1 반환

💡 .substring(시작인덱스, 종료인덱스(미포함))

문자열 일부 잘라내기 (시작 이상 종료 미만)

💡 문자열.split("구분자")

문자열을 "구분자"로 잘라서 배열로 반환

✏️ 코드로 살펴보기

• html

    <button id="btn1">문자열 관련 함수(콘솔 확인)</button>

• js

// 문자열 관련 함수
document.getElementById("btn1").addEventListener("click", function(){

    const str1 = "Hello world";

    console.log( str1.indexOf("e") ); // 1
    console.log( str1.indexOf("l") ); // 2 (가장 먼저 검색된 인덱스 반환)
    console.log( str1.indexOf("가") ); // -1

    const str2 = "abcdefg";

    console.log( str2.substring(0, 3) ); // abc
    console.log( str2.substring(2, 6) ); // cdef

    const str3 = "햄버거, 비빔밥, 김밥, 라면, 파스타, 스테이크";

    const arr = str3.split(", ");
    
    // console.log(arr);
    for(let i=0; i<arr.length; i++){
        console.log(arr[i]);
    }
})

✏️ 출력 화면

---

📝 숫자(Math 내장 객체)

• 숫자(number) 타입 리터럴 표기법 :
  12(정수), 3.14(실수), Infinity(무한), NaN(Not a Number)

• Math : 숫자 관련 함수를 제공하는 JS 내장 객체
  ex) Math.random() : 난수

💡 Math.random()

0 이상 1 미만의 난수 발생 (0 <= random < 1)

💡 isNaN(값)

값이 NaN이면 true, 아니면 false

💡 round()

반올림

💡 ceil()

올림

💡 floor()

내림

💡 trunc()

버림(절삭)

💡 숫자.toFixed(자릿수)

지정된 자릿수까지 반올림해서 표현

✏️ 코드로 살펴보기

• html

<button id="btn2">숫자 관련 함수(콘솔 확인)</button>

• js

// 숫자 관련 함수
document.getElementById("btn2").addEventListener("click", function(){

    // Infinity 리터럴 확인
    console.log( 5 / 0 );

    if(5/0 == Infinity){
        console.log("무한입니다.")
    }

    // NaN 리터럴 확인
    console.log("aaa" * 100);

    // "aaa" * 100 == NaN (X)

    // isNaN(값) : 값이 NaN이면 true, 아니면 false
    
    if( isNaN("aaa" * 100) ){
        console.log("숫자가 아닙니다.");
    } 

    // Math.random() : 0 이상 1 미만의 난수 발생 (0 <= random < 1)
    // this.innerText = Math.random();

    // 소수점 관련 함수
    // round(), ceil(), floor(), trunc()
    // 반올림    올림    내림   버림(절삭)

    // -> 소수점 자리를 지정할 수 없다.

    console.log( Math.round(10.5) ); // 11
    console.log( Math.ceil(10.5) ); // 11

    console.log( Math.floor(-10.5) ); // -11
    console.log( Math.trunc(-10.5) ); // -10

    // 버튼 배경색 랜덤으로 바꾸기
    const r = Math.floor(Math.random() * 256); // 0 ~ 255
    const g = Math.floor(Math.random() * 256); // 0 ~ 255
    const b = Math.floor(Math.random() * 256); // 0 ~ 255

    this.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"

    // 숫자.toFixed(자릿수) : 지정된 자릿수까지 반올림해서 표현

    console.log( (1.45).toFixed(1) );
})

✏️ 출력 화면

-> 해당 값이 콘솔에 출력된다.

-> 버튼을 누를 때마다 랜덤으로 색상이 변한다.

---

📝 문자열 -> 숫자 형변환

💡 parseInt(문자열)

정수로만 변환 가능

💡 parseFloat(문자열)

"정수" -> 정수, "실수" -> 실수

💡 Number(문자열)

"정수" -> 정수, "실수" -> 실수

✏️ 코드로 살펴보기

• html

        <button id="btn3">형변환 확인(콘솔 확인)</button>

• js

// 형변환 확인
document.getElementById("btn3").addEventListener("click", function(){

    console.log( parseInt("1.234") );
    console.log( parseFloat("1.234") );
    console.log( Number("1.234"));
})

✏️ 출력 화면

---

📝 동등 / 동일 비교 연산자

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

값이 같으면 true (자료형 관계 없음)

ex) "1" == 1 == true(1)

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

값과 자료형이 모두 같아야 true

---