.toLocaleString, 가장 과소평가된 JavaScript 기능 중 하나

.toLocaleString 및 그 친구들은 JavaScript의 가장 과소평가된 기능 중 일부입니다. 나는 MDN을 통해 몇 가지 다른 방황을 통해 그것들을 알게 되었고 그 이후로 모든 프로젝트처럼 그것들을 사용했습니다.

여기서는 자신의 코드에서 어떻게 사용할 수 있는지 보여드리겠습니다.

.toLocaleString은 형식 지정을 위한 것입니다.

.toLocaleString는 날짜와 숫자에 있는 메서드로, 로캘별 방식으로 형식을 지정하는 데 사용됩니다.

new Date().toLocaleString()
// => 24/4/2022, 10:40:00 am

기본적으로 브라우저의 로케일을 사용하지만 locale 매개변수를 사용하여 다른 로케일을 지정할 수 있습니다.

console.log(new Date().toLocaleString('en-US'))
// => 4/24/2022, 10:40:00 AM
console.log(new Date().toLocaleString('en-GB'))
// => 24/04/2022, 10:40:00
console.log(new Date().toLocaleString('ko-KR'))
// => 2022. 4. 24. 오전 10:40:49

날짜 형식을 지정하여 출력을 추가로 사용자 정의할 수 있습니다.

console.log(new Date().toLocaleString('en-US', {
    year: 'numeric',
    weekday: 'long',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    hour12: false,
}))
// => Sunday, April 24, 2022 at 10:40:00

console.log(new Date().toLocaleString('en-US', {
    dateStyle: 'full',
}))
// => Sunday, April 24, 2022

console.log(new Date().toLocaleString('en-US', {
    dateStyle: 'full',
    timeStyle: 'full',
}))
// => Sunday, April 24, 2022 at 10:40:00 AM India Standard Time

console.log(new Date().toLocaleString('en-US', {
    calendar: 'indian',
}))
// => 2/4/1944 Saka, 10:40:00 AM
// I don't know what that means either

console.log(new Date().toLocaleString('en-US', {
    dayPeriod: 'long',
}))
// => in the morning

console.log(new Date().toLocaleString('en-US', {
    era: 'long',
    dayPeriod: 'long',
    weekday: 'long',
    month: 'long',
    year: 'numeric',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    fractionalSecondDigits: 3,
    timeZoneName: 'long',
}))
// => Sunday, April 24, 2022 Anno Domini at 10:00:00.124 in the morning India Standard Time

이렇게 하면 코드에서 Moment.js와 같은 날짜 형식 지정 라이브러리가 완전히 필요하지 않습니다!

숫자도!

.toLocaleString는 또한 숫자에 있는 메서드로, 로캘별 방식으로 형식을 지정하는 데 사용됩니다.

console.log(10000000..toLocaleString())
// => 10,000,000

평소와 같이 locale 매개변수를 사용하여 다른 로케일을 지정할 수 있습니다.

console.log(10000000..toLocaleString('ar-EG'))
// => ١٠٬٠٠٠٬٠٠٠
// Another language I know

이것도 옵션이 있습니다.

// currency
10000..toLocaleString('en-US', {style: 'currency', currency: 'USD'})
// => $10,000.00

10000..toLocaleString('en-US', {style: 'currency', currency: 'USD', currencyDisplay: 'name'})
// => 10,000.00 US dollars

(-11.29).toLocaleString('en-US', {style: 'currency', currency: 'USD', currencySign: 'accounting'})
// => ($11.29)

(-11.29).toLocaleString('en-US', {style: 'currency', currency: 'USD', currencySign: 'standard'})
// => -$11.29

// scientific
10000..toLocaleString('en-US', {notation: 'scientific'})
// => 1E4

10000..toLocaleString('en-US', {notation: 'compact'})
// => 10K
1234..toLocaleString('en-US', {notation: 'compact'})
// => 1.2K

1234..toLocaleString('en-US', {notation: 'engineering'})
// => 1.234E3

1234..toLocaleString('en-US', {notation: 'engineering', signDisplay: 'always'})
// => +1.234E3

0.55.toLocaleString('en-US', {style: 'percent'})
// => 55%

1234..toLocaleString('en-US', {style: 'unit', unit: 'liter'})
// => 1,234 L

1234..toLocaleString('en-US', {style: 'unit', unit: 'liter', unitDisplay: 'narrow'})
// => 1,234L

다시 한 번 이것은 숫자 서식 지정을 위한 수많은 라이브러리가 필요하지 않게 해줍니다!


그것은 저에게 가장 놀라운 JavaScript 순간 중 하나였습니다. 물론 JavaScript가 시간대를 인식하고 있지만 전체 서식 지정 라이브러리에 액세스할 수 있다는 것은 알고 있습니다. 🤯