[ JavaScript ] Date, moment, string, number

하루입니다.

 

 

---

 

 

Date 객체와 날짜

참고할 분들 참고하세용

 

Date 객체

날짜와 시간정보를 표현하는 객체다.

 

• 시스템의 현재 날짜와 시간정보 표현하기

let now = new Date();

결과 : Tue May 24 2022 16:49:04 GMT+0900 (한국 표준시)

 

• 1970년 1월 1일 0시0분0초부터 현재시간까지를 1/1000초 단위로 나타내기

let unixTime = now.getTime();

결과 : 1653378544585

 

• 년월일시분초 찍기

console.log("년: " + now.getFullYear());
console.log("월: " + now.getMonth());
console.log("일: " + now.getDate());
console.log("시: " + now.getHours());
console.log("분: " + now.getMinutes());
console.log("초: " + now.getSeconds());

결과
년: 2022
월: 4
일: 24
시: 16
분: 49
초: 4

 

• 해당 시스템 환경에 맞게 날짜/시간/날짜와 시간정보 반환하는 메소드

로케일(Locale)은 사용자의 언어, 국가뿐 아니라 사용자 인터페이스에서 사용자가 선호하는 사항을 지정한 매개 변수의 모임이다. (출처: 위키백과)

let dateString = now.toLocaleDateString();
let timeString = now.toLocaleTimeString();
let localeString = now.toLocaleString();

결과
2022. 5. 24.
오후 4:49:04
2022. 5. 24. 오후 4:49:04

 

• 지정된 날짜에 해당하는 Date 객체 생성하기. (2000.1.1. 0시0분0초 만들 거)

Date객체 생성 후 년월일시분초를 setter 메소드로 설정한다.

let day = new Date();
day.setFullYear(2000);
day.setMonth(0);
day.setDate(1);
day.setHours(0);
day.setMinutes(0);
day.setSeconds(0);

 

• 위의 예시를 다양한 방법으로 만들어 보아요. 

let day2 = new Date(2000, 0, 1, 0, 0, 0);
let day3 = new Date(2000, 0, 1);
let day4 = new Date(Date.parse('2000. 1. 1 00:00:00'));
let day5 = new Date(Date.parse('2000. 1. 1'));
let day6 = new Date(Date.parse('2000-1-1'));

 

 

 

moment.js

날짜, 시간 관련 라이브러리이다. 아래 코드는 한국어로 표현된 국제화처리 라이브러리이다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/locale/ko.min.js"></script>

 

뜯어보면 이렇게 생겼다. 신기하다.

 

 

// 현재날짜와 시간정보가 포함된 객체 획득하기
let now = moment();

// 현재날짜와 시간정보를 다양한 형식의 텍스트로 변환할 수 있다.
console.log("현재 날짜: ", now.format('YYYY-MM-DD'))
console.log("현재 날짜: ", now.format('YYYY년 M월 D일'))
console.log("현재 날짜: ", now.format('YYYY년 M월 D일 dddd'))
console.log("현재 시간: ", now.format('a hh:mm:ss'))

// 현재 날짜를 기준으로 3일전 날짜 조회하기
let threeDaysAgo = moment().add(-3, 'd'); 
console.log("3일전: ", threeDaysAgo.format("YYYY-MM-DD"));

// 현재 날짜를 기준으로 1주일전 날짜 조회하기
let oneWeeksAgo = moment().add(-1, 'w');
console.log("1주일전: ", oneWeeksAgo.format("YYYY-MM-DD"));

// 현재 날짜를 기준으로 1개월전 날짜 조회하기
let oneMonthsAgo = moment().add(-1, 'M');
console.log("1주일전: ", oneMonthsAgo.format("YYYY-MM-DD"));

// 현재 날짜를 기준으로 3개월전 날짜 조회하기
let threeMonthsAgo = moment().add(-3, 'M');
console.log("1주일전: ", threeMonthsAgo.format("YYYY-MM-DD"));

// 두 날짜 사이의 간격을 조회하기
let anyDay = moment('2022-03-02');
console.log('지정된 날짜로부터 오늘까지 며칠이나 차이가 나는가? ', now.diff(anyDay, 'days'));
console.log('지정된 날짜로부터 오늘까지 몇 개월이나 차이가 나는가? ', now.diff(anyDay, 'months'));

결과물

 

 

 

String

• 자바스크립트의 문자열은 기본자료형(객체 아님)이다. 
• 문자열을 조작하기 위해 메소드를 사용하는 순간 String 객체가 된다. 
• String      ->  기본자료형
• String.~   ->  객체

String 객체의 주요 API
프로퍼티

• .length : 문자열의 길이를 반환한다.

주요 메소드

• .toUpperCase() : 대문자로 변환된 문자열을 반환한다.
• .toLowerCase() : 소문자로 변환된 문자열을 반환한다.
• .split('구분문자') : 문자열을 기정된 구분문자를 기준으로 잘라서 배열에 저장한 다음 반환한다.
• .replace('찾는문자열', '대체할 새 문자열') : 문자열에 해당되는 부분을 찾아서 새 문자열로 대체한 다음 반환한다.
• .substring(begin, end) : 문자열에 지정된 구간의 부분 문자열을 반환한다. end가 생략되면 시작위치부터 문자열의 끝까지 구성된 부분 문자열을 반환한다.
• .substr(begin, length) : 문자열에 시작위치부터 길이만큼의 부분 문자열을 반환한다. length가 생략되면 시작위치부터 문자열의 끝까지 구성된 부분 문자열을 반환한다.
• .startWith('찾는 문자열') : 문자열이 지정된 문자열로 시작하면 true를 반환한다.
• .endWith('찾는 문자열') : 문자열이 지정된 문자열로 시작하면 false를 반환한다.
• .trim() : 문자열의 좌/우에 있는 불필요한 공백이 제거된 문자열을 반환한다.
• .includes('찾는 문자열') : 문자열에 찾는 문자열이 존재하면 true를 반환한다.

 

자바 String과 자바스크립트의 String
1. 문자열의 비교
자바  : 문자열.equals(문자열)
자.스 : 문자열 === 문자열

2. 문자열의 길이 조회
자바  : 문자열.length() (메소드임)
자.스 : 문자열.length   (프로퍼티임)

 

 

console.log("JavaScript string".length);
console.log("JavaScript string".toUpperCase());
console.log("JavaScript string".split(' '));
console.log("JavaScript string".replace('JavaScript', '자바스크립트'));
console.log("JavaScript string".includes('java'));

전체적으로 자바와 유사해서 많이 사용하는 기능 5개만 예시를 들었다.

 

결과

 

 

Number

• 넘버도 기본자료형, 객체형 모두 가능하다.
• let x = 10;                        number type
• let y = new Number(10)      y에 담겨있는 Object타입

 

 

Number객체의 주요 API
주요 메소드

• .toLocaleString() : 금액 표시하기에 유리하다. 숫자를 3자리마다 ,가 포함된 문자열로 반환한다.
• .toFixed(), toFixed(자릿수) : 숫자를 지정된 자리까지 반올림한다.
•         5.5678.toFixed()     ---> 6
•         5.5678.toFixed(2)   ---> 5.7
  
  

let num1 = 1000000;                 
let text1 = new Number(num1).toLocaleString();
let text2 = num1.toLocaleString();
console.log(text1, text2);

원래는 위처럼 적어야 하나, 아래처럼 적는 게 가능함. 
결과는 둘 다 1,000,000이다.

 

 

텍스트를 숫자로 변환하기

• parseInt('텍스트');        -> 정수
• parseFloat('텍스트');     -> 실수
• parseInt() parseFloat()는 자바스크립트의 글로벌 메소드이다. 
• parseInt() parseFloat()는 는 텍스트가 숫자로 시작하기만 하면 된다. 반대로 말하자면, 문자가 앞에 오면 변환되지 않는다. (알 수 없어요 자바스크립트의 세계 ... )
•         parseInt("123가나다라")     -> 123
•         parseInt("3.14가나다라")     -> 3.14
•         parseInt("가나다라123")     -> NaN

 

• isNaN(값)
• 값이 Not-A-Number면 true를 반환한다.
•         isNaN(123)           -> false
•         isNaN("123")         -> false
•         isNaN("가나다")      -> true

 

텍스트의 사칙연산

참고로 이 캡처의 제목은 why이다.

"123" + 10         -> "12310"
"123" + "10"       -> "12310"
"123" - 10          -> 113
"123" - "10"        -> 113
"123" * 10;         -> 1230       
"123" * "10"       -> 1230
"123" / 10;         -> 12.3
"123" / "10"       -> 12.3

• 숫자로 구성된 텍스트에 대해서 사칙연산을 수행할 때 덧셈 연산은 반드시 텍스트를 parseInt()나 parseFloat()를 사용해서 숫자로 변경한 다음 연산을 수행해야 한다.
• 아마도 (선생님의 추론에 입각하자면) 다른 건 문자열에 기능이 없지만 +는 문자열에 기능이 있어서 그런 게 아닌가라고 추측하셨는데 ... 그런가 싶다가도 일상생활에서 숫자를 굳이 문자 그대로 더하는 일이 뭐가 있나 싶기도 하고. 아무튼 +를 사용할 때는 주의하자 (귀찮아요)

 

 

 

---

 

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다. 

 

복습 끝!