.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 能够识别时区,但能访问一整套格式化库吗?🤯
文章来源:https://dev.to/siddharthshyniben/tolocalestring-one-of-the-most-undergraduate-javascript-features-lid