Метод .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».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]