JavaScript 이론 정리 #2 [number 메소드, Math 메소드, string 메소드]

유튜버 코딩앙마님의 강의를 보고 정리한 내용입니다.

https://www.youtube.com/watch?v=4_WLS9Lj6n4&list=PLu8qrPjYh1hcuFnkwiaEDb578Jklc1EWh 

---

 

 

숫자, 수학 메소드

 

toString()

:10진수를 2진수 또는 16진수로 변환

 

괄호 안에 2를 넣으면 2진수로, 16을 넣으면 16진수로 변환하여 문자열로 만들어진다.

let num = 10;

num.toString(); //'10'
num.toString(2); //'1010'

let num2 = 255;
num2.toString(16); //'ff'

 

 

 

 

Math

 

Math.ceil(): 올림

let num1 = 5.1;
let num2 = 5.7;

Math.ceil(num1) //6
Math.ceil(num2) //6

 

 

 

Math.floor(): 내림

let num1 = 5.1;
let num2 = 5.7;

Math.floor(num1) //5
Math.floor(num2) //5

 

 

 

Math.round(): 반올림

let num1 = 5.1;
let num2 = 5.7;

Math.round(num1) //5
Math.round(num2) //6

 

 

 

Math.random(): 0~1 사이의 무작위 숫자 생성

 

1~100 사이 임의의 숫자를 뽑고 싶다면?

Math.floor(Math.random()*100)+1

 

 

Math.max()/Math.min() : 최댓값/ 최솟값 구하기

 

 

Math.abs(): 절댓값

 

 

Math.pow(n, m): 제곱

Math.pow(2, 10); //1024

 

 

Math.sqrt(): 제곱근

Math.sqrt(16) //4

 

소수점 자릿수

 

1.

let userRate = 30.1234;

//소수점 둘째자리까지 표현(셋째 자리에서 반올림)
Math.round(user.Fate * 100) / 100 //30.12

계산 과정

userRate * 100   //3012.34

Math.round(userRate * 100)  //3012

Math.round(userRate * 100)/100  //30.12

 

 

2. toFixed()

let userRate = 30.1234;

//소수점 둘째자리까지 표현(셋째 자리에서 반올림)
userRate.toFixed(2); //30.12

toFixed는 숫자를 인자로 받아 숫자에 해당하는 자릿수까지만 표현한다. 그리고 반환된 숫자는 문자열로 반환된다.

 

 

 

 

isNaN()

: NaN 판별

NaN은 자기 자신도 같지 않다로 판단한다. 따라서 isNaN을 이용해서만 NaN값인지 아닌지 판별할 수 있다.

 

let x = Number('x'); //NaN

x == NaN //false
x === NaN //false
NaN == NaN //false

isNaN(x) //true
isNaN(3) //false

 

 

 

parseint()

:숫자로 변환

let margin = '10px';

parseInt(margin); //10
Number(margin); //NaN

let redColor = 'f3';
parseInt(redColor); //NaN

Number는 문자가 섞이면 NaN을 반환하지만 parseInt는 문자를 제외한 숫자 부분만 인식하여 반환한다. 하지만 문자로 시작하는 경우 parseInt 도 NaN을 반환한다.

 

parseInt는 두 번째 인수로 2, 8, 10, 16진수를 받아 해당 진수에서 10진수로 숫자를 변환할 수 있다.

let redColor = 'f3';
parseInt(redColor); //NaN

let redColor = 'f3';
parseInt(redColor, 16); //243

parseInt(11, 2) //3

이렇게 f3을 그냥 변환하면 NaN값을 반환하지만 16을 두 번째 인자로 주어 16진수로 변환하면 243을 변환한다.

 

 

 

parseFloat()

:소수점까지 반환

let padding = '18.5%';

parseInt(padding); //18
parseFloat(padding); //18.5

 

 

String

 

str.indexOf(text)

:문자를 인자로 받아 몇 번째에 위치하는지 알려준다.

:만약 찾는 문자가 없으면 -1을 반환

 

let desc = "Hi guys. Nice to meet you.";

desc.indexOf('to'); //14

desc.indexOf('man'); //-1

여러 개의 문자이면 첫 번째 문자에 해당하는 인덱스가 반환된다는 것을 알아두어야 한다.

if(desc.indexOf('Hi')){
	console.log('Hi가 포함된 문장입니다.');
}

위의 식은 false가 되어 콘솔이 찍히지 않을 것이다. 왜냐하면 Hi의 첫 번째 글자인 H의 인덱스는 0이다. 0은 false이기 때문에 코드가 실행되지 않는다.

 

 

 

str.slice(n, m)

: n부터 m까지의 문자열을 반환

n은 시작점

m이 없으면 문자열 끝까지, 양수면 그 숫자-1까지(포함되지 않음)

음수면 끝에서부터 센다.

 

let desc = "abcedfg";

desc.slice(2); //"cdefg"
desc.slice(0, 5); //"abcde"
desc.slice(2, -2); //"cde"

 

 

str.substring(n, m)

:n과 m사이 문자열을 반환

slice와 유사하지만 차이점은 n과 m을 바꿔도 동작한다.

음수는 0으로 인식 

 

let desc = "abcedfg";

desc.substring(2, 5); //"cde"
desc.substring(5, 2); //"cde"

 

 

str.substr(n, m)

:n부터 시작해서 m개를 가져옴.

let desc = "abcedfg";

desc.substr(2, 4) //"cdef"
desc.substr(-4, 2) //"de"

 

 

str.trim()

:앞 뒤 공백 제거

let desc = " coding         ";

desc.trim(); //"coding"

 

 

 

str.repeat(n)

:n번 반복

 

let hello = "hello!";

hello.repeat(3); //"hello!hello!hello!"

 

문자열 비교

문자열도 아래 표의 십진법을 기준으로 숫자처럼 비교가 가능하다.

이진법	팔진법	십진법	십육진법	모양	85진법(아스키코드)
1100001	141	97	61	a	64
1100010	142	98	62	b	65
1100011	143	99	63	c	66
1100100	144	100	64	d	67

 

1<3 //true
"a" < "c" //true

"a".codePointAt(0); //97
String.fromCodePoint(97); //"a"

 

 

 

문자열 메소드 사용 예시

 

책의 목차와 소제목이 있다고 했을 때 목차를 제외한 소제목만 가져오도록 해보자.

let list = [
	"01. 들어가며",
    "02. JS의 역사",
    "03. 자료형",
    "04. 함수",
    "05. 배열"
];

let newList = [];

for(let i=0; i<lisst.legth; i++) {
	newList.push(list[i].slice(4));
}

console.log(newList) //["들어가며", "JS의 역사", "자료형", "함수", "배열"]

 

문장에 금칙어가 있으면 알려주는 기능을 만들어보자.

//금칙어: 콜라

fucntion hasCola(str) {
	if(str.indexOf("콜라")){
    	console.log("금칙어가 있습니다.");
    } else {
    	console.log("통과);
    }
}

hasCola("와 사이다가 짱이야!");  //금칙어가 있습니다.
hasCola("무슨소리, 콜라가 최고");  //금칙어가 있습니다.
hasCola("콜라");  //통과

콘솔의 결과가 예상과 다르게 나오는 것을 볼 수 있다. 이유는 

첫 번째의 경우 콜라가 없어서 -1이 반환되기 때문에 true가 된다. 

마지막의 경우 콜라의 위치가 인덱스 0이어서 false가 되어 이러한 결과가 나온다.

그래서 정상적으로 구현하려면

 

fucntion hasCola(str) {
	if(str.indexOf("콜라") > -1){
    	console.log("금칙어가 있습니다.");
    } else {
    	console.log("통과);
    }
}

 

이렇게 -1일 땐 false가 0일 땐 true가 나오도록 해주면 된다.

 

indexOf가 아니라 includes를 사용하면 문자가 있으면 true, 없으면 false를 반환한다.

 

fucntion hasCola(str) {
	if(str.includes("콜라")){
    	console.log("금칙어가 있습니다.");
    } else {
    	console.log("통과);
    }
}