Number
// 문자열 타입 => 숫자 타입
Number('0'); // -> 0
Number('-1'); // -> -1
Number('10.53'); // -> 10.53
// 불리언 타입 => 숫자 타입
Number(true); // -> 1
Number(false); // -> 0
표준 빌트인 객체인 Number 객체는 숫자를 생성하는 생성자 함수로, 형변환으로도 사용된다
- Number 프로퍼티: EPSILON / MAX_VALUE / MIN_VALUE / MAX_SAFE_INTEGER / MIN_SAFE_INTEGER / POSITIVE_INFINITY / NEGATIVE_INFINITY / NaN
- Number 메서드: isFinite / isInteger / isNaN / isSafeInteger / toExponential / toFixed / toPrecision / toString
Math
표준 빌트인 객체인 Math는 생성자 함수는 아니며, 수학적인 상수와 함수를 위한 정적 프로퍼티와 메서드를 제공한다
- Math 프로퍼티: PI
- Math 메서드: abs / round / ceil / floor / sqrt / random / pow / max / min
Date
표준 빌트인 객체인 Date는 날짜와 시간(연 / 월 / 일 / 시 / 분 / 초 / 밀리초)을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수이다. 현재 날짜와 시간은 코드가 실행된 시스템의 시계에 의해 결정되며 KST(한국 표준시)는 UTC(국제 표준시)에 9시간을 더한 값이다
new Date(); // -> Mon Jul 06 2020 01:03:18 GMT+0900 (대한민국 표준시)
Date(); // -> "Mon Jul 06 2020 01:10:47 GMT+0900 (대한민국 표준시)"
new Date(0); // -> Thu Jan 01 1970 09:00:00 GMT+0900 (대한민국 표준시)
/*
86400000ms는 1day를 의미한다.
1s = 1,000ms
1m = 60s * 1,000ms = 60,000ms
1h = 60m * 60,000ms = 3,600,000ms
1d = 24h * 3,600,000ms = 86,400,000ms
*/
new Date(86400000); // -> Fri Jan 02 1970 09:00:00 GMT+0900 (대한민국 표준시)
new Date('May 26, 2020 10:00:00');
// -> Tue May 26 2020 10:00:00 GMT+0900 (대한민국 표준시)
// 월을 나타내는 2는 3월을 의미한다. 2020/3/26/10:00:00:00
new Date(2020, 2, 26, 10, 00, 00, 0);
// -> Thu Mar 26 2020 10:00:00 GMT+0900 (대한민국 표준시)
// 다음처럼 표현하면 가독성이 훨씬 좋다.
new Date('2020/3/26/10:00:00:00');
// -> Thu Mar 26 2020 10:00:00 GMT+0900 (대한민국 표준시)
millisecond / dateString / year, month[ , day, hour, minute, second, millisecond] 3가지 방식이 있다
- Date 메서드: now / parse / getFullYear / setFullYear / getMonth / setMonth / getDate / getDay / getHours / setHours / getMinutes / setMinutes / getSeconds / setSeconds / getMilliseconds / setMilliseconds / getTime / setTime / getTimezondOffset / toDateString / toTimeString / toISOString / toLocaleString / toLocaleTimeString
(function printNow() {
const today = new Date();
const dayNames = [
'(일요일)',
'(월요일)',
'(화요일)',
'(수요일)',
'(목요일)',
'(금요일)',
'(토요일)'
];
// getDay 메서드는 해당 요일(0 ~ 6)을 나타내는 정수를 반환한다.
const day = dayNames[today.getDay()];
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();
let hour = today.getHours();
let minute = today.getMinutes();
let second = today.getSeconds();
const ampm = hour >= 12 ? 'PM' : 'AM';
// 12시간제로 변경
hour %= 12;
hour = hour || 12; // hour가 0이면 12를 재할당
// 10미만인 분과 초를 2자리로 변경
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;
const now = `${year}년 ${month}월 ${date}일 ${day} ${hour}:${minute}:${second} ${ampm}`;
console.log(now);
// 1초마다 printNow 함수를 재귀 호출한다. 41.2.1절 "setTimeout / clearTimeout" 참고
setTimeout(printNow, 1000);
}());
Date를 활용한 시계 예시
RegExp
정규 표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어로, JS 고유 문법이 아니며 문자열을 대상으로 패턴 매칭 기능(검색 / 추출 / 치환)을 제공한다
- RegExp 메서드: exec / test / match
정규 표현식🔽
자주 사용되는 정규 표현식을 알아보자!
const url = 'https://example.com';
// 'http://' 또는 'https://'로 시작하는지 검사한다.
/^https?:\/\//.test(url); // -> true
/^(http|https):\/\//.test(url); // -> true
특정 단어로 시작하는지 검사
const fileName = 'index.html';
// 'html'로 끝나는지 검사한다.
/html$/.test(fileName); // -> true
특정 단어로 끝나는지 검사
const target = '12345';
// 숫자로만 이루어진 문자열인지 검사한다.
/^\d+$/.test(target); // -> true
숫자로만 이루어진 문자열인지 검사
const target = ' Hi!';
// 하나 이상의 공백으로 시작하는지 검사한다.
/^[\s]+/.test(target); // -> true
하나 이상의 공백으로 시작하는지 검사
const id = 'abc123';
// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~ 10자리인지 검사한다.
/^[A-Za-z0-9]{4,10}$/.test(id); // -> true
아이디로 사용 가능한지 검사
const email = 'ungmo2@gmail.com';
/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(email); // -> true
메일 주소 형식에 맞는지 검사
const cellphone = '010-1234-5678';
/^\d{3}-\d{3,4}-\d{4}$/.test(cellphone); // -> true
핸드폰 번호 형식에 맞는지 검사
const target = 'abc#123';
// A-Za-z0-9 이외의 문자가 있는지 검사한다.
(/[^A-Za-z0-9]/gi).test(target); // -> true
(/[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi).test(target); // -> true
target.replace(/[^A-Za-z0-9]/gi, ''); // -> abc123
특수 문자 포함 여부 검사
본 내용은 위키북스의 '모던 자바스크립트 Deep Dive'를 바탕으로 작성되었습니다.
'Languages > JavaScript' 카테고리의 다른 글
[우아한테크코스/프리코스] #2 숫자 야구 (0) | 2022.11.09 |
---|---|
[HUFS/GnuVil] #17 String, Symbol (0) | 2022.11.04 |
[HUFS/GnuVil] #15 배열 (0) | 2022.11.04 |
[우아한테크코스/프리코스] #1 온보딩 (0) | 2022.11.02 |
[HUFS/GnuVil] #14 ES6 함수의 추가 기능 (0) | 2022.10.18 |