【6】toLocaleString、toLocaleDateString、toLocaleTimeString等toLocale系列方法的使用及案例

一、介绍

在当今前端开发的领域里，快速、高效的项目构建工具以及使用最新技术栈是非常关键的。Vite+Vue3 组合为一体的项目实战示例专栏将带领你深入了解和掌握这一最新的前端开发工具和框架。

作为下一代前端构建工具，Vite 在开发中的启动速度和热重载方面具有突出的优势。而Vue3，则以更加简化的API和更高效的响应式系统为开发者带来了更加流畅的开发体验。结合使用Vite和Vue3，你将能够快速搭建稳定、高效的前端项目。

在这个专栏里，我们将通过100+个实战示例，详细介绍Vite+Vue3的各个方面。从项目的创建和配置开始，我们会一步一步地引导你使用Vite搭建项目的基本框架，并深入讲解Vue3的语法和特性。随后，我们将演示如何构建常见的前端组件、路由管理和状态管理，以及与后端API的交互等实际项目开发中常见的场景。

无论你是从零开始学习Vite+Vue3，还是希望进一步提升你的前端开发能力，本专栏都能为你提供实用的知识和实战经验。通过这100+个实战示例的学习，你将能够掌握Vite+Vue3的核心概念和技术，并能够在实际项目中灵活应用。

赶快加入我们吧，开始你的Vite+Vue3项目实战之旅！

二、它们是什么 ❔ ❔ ❔

toLocaleString、toLocaleDateString、toLocaleTimeString是JavaScript中的方法，用于将日期、时间或日期时间对象转换为本地化的字符串表示。以及toLocaleLowerCase() 方法根据本地主机的语言环境把字符串转换为小写。toLocaleUpperCase() 方法根据本地主机的语言环境把字符串转换为大写。大小写转换比较简单，我们就不做任何说明了。

三、使用它们的好处 ❔ ❔ ❔

使用这些方法的好处是可以根据用户所在地区的语言和时间格式来显示日期和时间，提供更好的用户体验。例如，在不同的地区，日期和时间的格式可能会有所不同，而使用这些方法可以根据用户的偏好或地区习惯显示日期和时间。

toLocaleString方法返回一个字符串，表示该日期时间对象的本地化表示。toLocaleDateString方法返回一个字符串，表示该日期对象的本地化表示。而toLocaleTimeString方法返回一个字符串，表示该时间对象的本地化表示。

四、toLocaleString的基本使用  

1、基本使用  

toLocaleString(locales?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;

2、参数说明

2.1、locales：表示一个字符串数组，用于指定要使用的地区或语言环境，可以是BCP 47语言标记。  

简体中文(中国)	zh-cn
繁体中文(香港)	zh-hk
繁体中文(台湾地区)	zh-tw
英语(美国)	en-us
英语(香港)	en-hk
英语(全球)	en-ww

2.2、options：可选参数，表示一个对象，用于设置格式化选项。  

localeMatcher	指定在选择地区时使用的匹配算法，可以是"lookup"（默认）或"best fit"。如果是"lookup"，则会根据locales参数中的排序选择地区。如果是"best fit"，则会根据一些更复杂的规则选择地区。
style	指定要格式化的类型，可以是"decimal"（数字，默认）、「currency」（货币）、「percent」（百分比）、「unit」（单位）。不同类型会有不同的格式化规则。
currency	只有在style为"currency"时才需要，表示要使用的货币代码。
currencyDisplay	指定货币显示的方式，可以是"symbol"（货币符号，默认）、"code"（货币代码）或"name"（货币名称）。
useGrouping	指定是否使用分组分隔符（千位分隔符），默认为true。
minimumIntegerDigits	指定整数部分的最小显示位数，不足时会在前面补0。
minimumFractionDigits	指定小数部分的最小显示位数，不足时会在后面补0。
maximumFractionDigits	指定小数部分的最大显示位数，超过时会进行舍入。
minimumSignificantDigits	指定数字的最小有效数字位数。
maximumSignificantDigits	指定数字的最大有效数字位数。

3、使用案例  

console.log('-----------------', 123456.8989.toLocaleString('zh-cn'))
// => ----------------- 123,456.899

console.log('-----------------', state.val1.toLocaleString('zh-cn'))
// 千分位金额，并且加上金额符号 => ----------------- 12,345.679

console.log('-----------------', state.val1.toLocaleString('zh-cn', {style: 'currency', currency: 'CNY'}))
// 千分位金额，并且加上金额符号，并且保留一位小数 => ----------------- ¥12,345.68

console.log('-----------------', state.val1.toLocaleString('zh-cn', {style: 'currency', currency: 'CNY', maximumFractionDigits: 1}))
// => ----------------- ¥12,345.7

五、toLocaleDateString()和toLocaleTimeString()  

1、基本使用  

toLocaleDateString(locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;

2、toLocaleDateString和toLocaleTimeString参数说明  

2.1 locale  

可选参数，表示要使用的语言环境，默认值为执行代码的当前地区。可以使用BCP 47语言标记，如"en-US"表示美国英语，"zh-CN"表示中国简体中文等。

2.2 options  

可选参数，一个包含以下属性的对象：

timeZone	指定要应用于日期的时区，默认值为执行代码的当前时区。
weekday	如"long"表示完整的星期几名称，如"short"表示缩写的星期几名称，如"narrow"表示仅使用一个字符的星期几名称。
year	如"numeric"表示数字形式的年份，如"2-digit"表示两位数形式的年份。
month	如"numeric"表示数字形式的月份，如"2-digit"表示两位数形式的月份，如"long"表示完整的月份名称，如"short"表示缩写的月份名称，如"narrow"表示仅使用一个字符的月份名称。
day	如"numeric"表示数字形式的日期，如"2-digit"表示两位数形式的日期。
minute	如"numeric"表示数字形式的分钟，如"2-digit"表示两位数形式的分钟。
second	如"numeric"表示数字形式的秒数，如"2-digit"表示两位数形式的秒数。
hour12	指定是否使用12小时制还是24小时制来表示时间。如果设置为true，则返回的时间字符串将使用12小时制（例如，下午5:30 PM），如果设置为false，则返回的时间字符串将使用24小时制（例如，17:30）
formatMatcher	是否使用宽松匹配或严格匹配来解析和格式化日期和时间。如果设置为"basic"，则使用宽松匹配；如果设置为"best fit"，则使用严格匹配。
era	是否包含纪元信息（例如，公元前/公元后）在日期字符串中。如果设置为"narrow"，则仅显示短格式纪元（例如，BC/AD）；如果设置为"short"，则显示短格式纪元，如(-5000/-4000AD)；如果设置为"long"，则显示长格式纪元（例如，公元前5000年/公元后4000年）。
timeZoneName	是否包含时区名称在时间字符串中。如果设置为"short"，则显示短格式时区名称，例如（PST）；如果设置为"long"，则显示长格式时区名称，例如（Pacific Standard Time）；如果设置为"none"，则不包含时区名称。
localeMatcher	在解析和格式化日期和时间时使用哪种匹配策略。如果设置为"lookup"，则使用最佳匹配的语言环境；如果设置为"best fit"，则使用最佳匹配的语言环境，并尽可能接近用户的首选语言。
hour	指定要返回的时间字符串中是否包含小时部分。

2.3 使用案例  

console.log('-----------------', state.val2.toLocaleDateString('zh-cn'))
// => ----------------- 2023/7/27

console.log('-----------------', state.val2.toLocaleDateString('en-us'))
// => ----------------- 7/27/2023

3、toLocaleTimeString使用  

3.2、使用案例  

console.log('-----------------', state.val2.toLocaleString('zh-cn'))
// => ----------------- 2023/7/27 14:34:43

console.log('-----------------', state.val2.toLocaleString('en-us'))
// => ----------------- 7/27/2023, 2:35:22 PM

console.log('-----------------', state.val2.toLocaleString('zh-cn', {hour12:true}))
// => ----------------- 2023/7/27 下午2:35:39

console.log('-----------------', state.val2.toLocaleTimeString('zh-cn', {hour12: true}))
// => ----------------- 下午2:35:44

console.log('-----------------', state.val2.toLocaleTimeString('en-us'))
// => ----------------- 2:35:47 PM

console.log('-----------------', state.val2.toLocaleTimeString())
// => ----------------- 14:36:02

console.log('-----------------', 'ABCD'.toLocaleLowerCase())
// => ----------------- abcd

console.log('-----------------', 'abcd'.toLocaleUpperCase())
// => ----------------- ABCD

六、总结  

用toLocaleString、toLocaleDateString、toLocaleTimeString方法可以根据用户所在地区的语言和时间格式来显示日期和时间，提供更好的用户体验。

我是Etc.End。每一次进步都值得庆祝，每一次努力都值得赞赏。不要忽视自己的成长，每一步都是向前迈进的力量。如果我的文章对你有所帮助的话，希望能留下你的点赞和收藏。。