Локализация даты, времени и чисел в JS при помощи .toLocaleString

0
318
views
javascript logo

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

×

Метод .toLocaleString — один из тех методов JavaScript, на которые редко обращают внимание. Я наткнулся на него, блуждая по сайту MDN, и с тех пор использую практически в каждом своем проекте.

В этой короткой статье я расскажу вам о .toLocaleString и о том, чем он может быть вам полезен.

.toLocaleString предназначен для форматирования даты и времени

.toLocaleString — это метод объекта Date. Он используется для перевода даты и числа в формат, специфический для определенного региона.

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!

От редакции Techrocks: возможно, вас также заинтересует статья «15 библиотек JavaScript, о которых стоит знать».

А еще с помощью этого метода можно форматировать числа!

.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

Опять же, это избавляет от необходимости использовать кучи библиотек для форматирования чисел!

Для меня знакомство с методом .toLocaleString стало одним из самых неожиданных открытий в JavaScript.

Перевод статьи «.toLocaleString, one of the most underrated JavaScript features».

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here