Languages/JavaScript

[HUFS/GnuVil] #16 Number, Math, Date, RegExp

성중 2022. 11. 4. 16:18

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

 

정규 표현식🔽

 

정규 표현식 - JavaScript | MDN

정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있습니다. String의 match(), matchA

developer.mozilla.org

 

자주 사용되는 정규 표현식을 알아보자!

 

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' 바탕으로 작성되었습니다.