.toLocaleString,最被低估的 JavaScript 功能之一

2025-05-27

.toLocaleString,最被低估的 JavaScript 功能之一

.toLocaleString和它的朋友们是 JavaScript 中最被低估的特性之一。我是在 MDN 上浏览了几次后才发现它们的,之后几乎在每个项目中都用到了它们。

在这里,我将向您展示如何在您自己的代码中使用它们。

.toLocaleString用于格式化

.toLocaleString是一种存在于日期和数字上的方法,用于以特定于语言环境的方式格式化它们。

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

默认情况下,它将使用浏览器的语言环境,但您可以使用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
Enter fullscreen mode Exit fullscreen mode

您可以通过指定日期格式进一步自定义输出。

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
Enter fullscreen mode Exit fullscreen mode

这完全消除了代码中对 Moment.js 等日期格式化库的需求!

还有数字!

.toLocaleString也是数字上的一种方法,用于以特定于语言环境的方式格式化数字。

console.log(10000000..toLocaleString())
// => 10,000,000
Enter fullscreen mode Exit fullscreen mode

与往常一样,您可以使用locale参数指定不同的语言环境。

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

这个也有选项。

// 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
Enter fullscreen mode Exit fullscreen mode

再一次,这消除了对大量数字格式化库的需求!


对我来说,这是最让我惊讶的 JavaScript 时刻之一。当然,我知道 JavaScript 能够识别时区,但能访问一整套格式化库吗?🤯

文章来源:https://dev.to/siddharthshyniben/tolocalestring-one-of-the-most-undergraduate-javascript-features-lid
PREV
使用 react-query 进行更清晰的数据获取
NEXT
你不知道的 JavaScript JSON 的 5 个秘密特性🤯