[JavaScript] 숫자, 가격, 날짜 사용하기 편리한 메서드

숫자 간결하게 나타내기

ko

const views = 9744642;

const formatter = new Intl.NumberFormat(`ko`);
const formatter2 = new Intl.NumberFormat(`ko`, {
    notation: 'compact'
});

console.log(formatter.format(views));   // 9,744,642
console.log(formatter2.format(views));  // 974만

en

const views = 9744642;
const views2 = 154270;

const formatter = new Intl.NumberFormat(`en`);
const formatter2 = new Intl.NumberFormat(`en`, {
    notation: 'compact'
});
const formatter3 = new Intl.NumberFormat(`en`, {
    notation: 'compact'
});
const formatter4 = new Intl.NumberFormat(`en`, {
    notation: 'compact',
    compactDisplay: 'long'
});

console.log(formatter.format(views));   // 9,744,642
console.log(formatter2.format(views2)); // 154K
console.log(formatter3.format(views));  // 9.7M
console.log(formatter4.format(views));  // 9.7 million

브라우저 언어에 맞춰서 표시하기

const formatter = new Intl.NumberFormat(navigator.language);
// ko -> 974만
// en -> 9.7M

ko, en을 표시하는 곳에 navigator.language를 적어주면 브라우저에 설정된 언어를 확인하고 맞춰서 출력해 줍니다.

가격 표시하기

ko

const price = 10000;

const formatter = new Intl.NumberFormat('ko', {
    style: 'currency',
    currency: 'krw',
    notation: 'compact'
});
const formatter2 = new Intl.NumberFormat('ko', {
    style: 'currency',
    currency: 'krw'
});

console.log(formatter.format(price));  // ₩1만
console.log(formatter2.format(price)); // ₩10,000

en

const price = 10000;

const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'usd',
    notation: 'compact'
});
const formatter2 = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'usd'
});

console.log(formatter.format(price));  // $10K
console.log(formatter2.format(price)); // $10,000.00

시간 표시하기

ko

const formatter = new Intl.RelativeTimeFormat('ko', {
    numeric: 'auto'
});
console.log(formatter.format(1, 'day'));  // 내일
console.log(formatter.format(2, 'day'));  // 모레
console.log(formatter.format(-1, 'day')); // 어제
console.log(formatter.format(-2, 'day')); // 그저께

const formatter2 = new Intl.RelativeTimeFormat('ko');
console.log(formatter2.format(1, 'day'));  // 1일 후
console.log(formatter2.format(2, 'day'));  // 2일 후
console.log(formatter2.format(-1, 'day')); // 1일 전
console.log(formatter2.format(-2, 'day')); // 2일 전

en

const formatter = new Intl.RelativeTimeFormat('en', {
    numeric: 'auto'
});
console.log(formatter.format(1, 'day'));  // tomorrow
console.log(formatter.format(2, 'day'));  // in 2 days
console.log(formatter.format(-1, 'day')); // yesterday
console.log(formatter.format(-2, 'day')); // 2 days ago

const formatter2 = new Intl.RelativeTimeFormat('en');
console.log(formatter2.format(1, 'day'));  // in 1 day
console.log(formatter2.format(2, 'day'));  // in 2 day
console.log(formatter2.format(-1, 'day')); // 1 day ago
console.log(formatter2.format(-2, 'day')); // 2 day ago

날짜 계산하기

new Date에 월을 적는 monthIndex는 1~12를 적는 게 아니라 0부터 시작이기 때문에 0~11을 적어야 합니다.

const formatter = new Intl.RelativeTimeFormat('ko', {
    numeric: 'auto'
});
const today = new Date();
const started = new Date(2021, 6, 28);
const daysPassed = Math.ceil((started - today) / (1000 * 60 * 60 * 24));
console.log(`블로그 운영 시작일: ${formatter.format(daysPassed, 'day')}`);
// 블로그 운영 시작일: 532일 전

날짜/시간 제대로 포맷하기

날짜

const date = new Date(2021, 1, 28);
console.log(date.toLocaleDateString('ko')); // 2021. 2. 28
console.log(date.toLocaleDateString());     // 2/28/2021

const formatter = new Intl.DateTimeFormat('ko').format(date);
const formatter2 = new Intl.DateTimeFormat('en').format(date);
console.log(formatter);  // 2021. 2. 28
console.log(formatter2); // 2/28/2021

날짜/시간

const date = new Date(2021, 1, 28);
console.log(date.toLocaleDateString('ko', {
    minute: 'numeric',
    hour: 'numeric',
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    weekday: 'long'
})); 
// 2021년 2월 28일 일요일 오전 12:00

weekday: 'short' // (일)