小说阅读网站系统模板下载,站长统计 网站统计,上海装修公司前十强,制作网站的技术一、介绍
在当今前端开发的领域里#xff0c;快速、高效的项目构建工具以及使用最新技术栈是非常关键的。ViteVue3 组合为一体的项目实战示例专栏将带领你深入了解和掌握这一最新的前端开发工具和框架。
作为下一代前端构建工具#xff0c;Vite 在开发中的启动速度和热重载…一、介绍
在当今前端开发的领域里快速、高效的项目构建工具以及使用最新技术栈是非常关键的。ViteVue3 组合为一体的项目实战示例专栏将带领你深入了解和掌握这一最新的前端开发工具和框架。
作为下一代前端构建工具Vite 在开发中的启动速度和热重载方面具有突出的优势。而Vue3则以更加简化的API和更高效的响应式系统为开发者带来了更加流畅的开发体验。结合使用Vite和Vue3你将能够快速搭建稳定、高效的前端项目。
在这个专栏里我们将通过100个实战示例详细介绍ViteVue3的各个方面。从项目的创建和配置开始我们会一步一步地引导你使用Vite搭建项目的基本框架并深入讲解Vue3的语法和特性。随后我们将演示如何构建常见的前端组件、路由管理和状态管理以及与后端API的交互等实际项目开发中常见的场景。
无论你是从零开始学习ViteVue3还是希望进一步提升你的前端开发能力本专栏都能为你提供实用的知识和实战经验。通过这100个实战示例的学习你将能够掌握ViteVue3的核心概念和技术并能够在实际项目中灵活应用。
赶快加入我们吧开始你的ViteVue3项目实战之旅
二、它们是什么 ❔ ❔ ❔
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.899console.log(-----------------, state.val1.toLocaleString(zh-cn))
// 千分位金额并且加上金额符号 ----------------- 12,345.679console.log(-----------------, state.val1.toLocaleString(zh-cn, {style: currency, currency: CNY}))
// 千分位金额并且加上金额符号并且保留一位小数 ----------------- ¥12,345.68console.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/27console.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:43console.log(-----------------, state.val2.toLocaleString(en-us))
// ----------------- 7/27/2023, 2:35:22 PMconsole.log(-----------------, state.val2.toLocaleString(zh-cn, {hour12:true}))
// ----------------- 2023/7/27 下午2:35:39console.log(-----------------, state.val2.toLocaleTimeString(zh-cn, {hour12: true}))
// ----------------- 下午2:35:44console.log(-----------------, state.val2.toLocaleTimeString(en-us))
// ----------------- 2:35:47 PMconsole.log(-----------------, state.val2.toLocaleTimeString())
// ----------------- 14:36:02console.log(-----------------, ABCD.toLocaleLowerCase())
// ----------------- abcdconsole.log(-----------------, abcd.toLocaleUpperCase())
// ----------------- ABCD
六、总结
用toLocaleString、toLocaleDateString、toLocaleTimeString方法可以根据用户所在地区的语言和时间格式来显示日期和时间提供更好的用户体验。
我是Etc.End。每一次进步都值得庆祝每一次努力都值得赞赏。不要忽视自己的成长每一步都是向前迈进的力量。如果我的文章对你有所帮助的话希望能留下你的点赞和收藏。。
