JS利用Intl解决前端日期和时间的格式化详解

 更新时间:2023年3月10日 16:34  点击:575 作者:了不起12138同志

简介

Intl 是一个全局对象,它的主要用途就是展示国际化信息,可以将字符串,数字和日期和时间转换为指定地区的格式。

在前端开发中,我们通常会使用第三方库来处理日期和数字的格式化,比如 numeral、dayjs、date-fns 等库,这些库包含了许多的功能,如果我们在项目中仅仅只使用了格式化的功能的话其实是可以不用引入这些库的,JavaScript 自带的 Intl API 即可满足格式化的需求。

构造

CollatorDateTimeFormatListFormatNumberFormatPluralRulesRelativeTimeFormat 是命名空间 Intl 中的构造函数。它们接受两个参数 - localesoptions。 locales 必须是符合 BCP 47 语言标记 的字符串或字符串数组。

locales 参数

其中 locales 中常用的有:

含义
zh-Hant用繁体字书写的中文
zh-Hans用简体字书写的中文
zh-cmn-Hans-CN中文,普通话,简体,用于中国
zh-Hans-CN简体中文,用于中国大陆
zh-yue-HK中文,广东话,香港特别行政区使用
cmn-Hans-CN简体中文,用于中国
yue-HK粤语,香港特别行政区使用
en-US美式英语 (US English)
en-GB英式英语 (British English)
ko-KR韩语
ja-JP日语

options 参数

options 参数必须是一个对象,其属性值在不同的构造函数和方法中会有所变化。如果 options 参数未提供或者为 undefined,所有的属性值则使用默认的。

Intl.NumberFormat

Intl.NumberFormat 对象能使数字在特定的语言环境下格式化。

const number = 123456.789

console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number))
// Expected output: "123.456,79 €"

// The Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number))
// Expected output: "¥123,457"

console.log(new Intl.NumberFormat('zh-CN', {}).format(number))
// "123,456.789"

常用 options 参数

style:要使用的格式样式,默认为 decimal

  • decimal 用于普通数字格式。
  • currency 用于货币格式。
  • percent 用于百分比格式。
  • unit 用于单位格式。

currency:用于货币格式的货币(没有默认值,如果 style 的值是 currency 则必须提供)。可能的值是 ISO 4217 货币代码,例如 CNY 代表人民币, USD 代表美元,EUR 代表欧元,JPY 代表日元。

currencyDisplay:如何以货币格式显示货币。可能的值是:

  • symbol 使用本地化的货币符号,例如 €。这是默认值。
  • narrowSymbol 使用简称($100 而不是 US$100)。
  • code 使用 ISO 货币代码。
  • name 使用本地化的货币名称,例如 dollar

currencySign:在许多区域设置中,记帐格式将数字括在括号中而不是添加减号。currencySign 通过将选项设置为 accounting 启用此格式。默认为 standard

unitunit 的格式中使用的单位,可能的值是核心单位标识符,如UTS #35,第 2 部分,第 6 节中所定义。从整个列表中选择了一部分单元用于 ECMAScript。一对简单单位 -per- 可以用组合成一个复合单位。没有默认值。如果是 styleunit,则必须指定该属性。

unitDisplayunit 用于格式化的单位格式化样式,默认为 short

  • long(例如 16 litres)
  • short(例如 16 l)
  • narrow(例如 16l)

notation:一种显示数值的格式。默认为 standard

  • standard 是正常的数字格式。
  • scientific:使用科学记数法表示,比如 4.5E5
  • engineering: 返回 10 的幂能够被 3 整除的科学计数表示(如果一个数小于 1000,则表示为 123 - 123E0,如果一个数大于 1000 小于 1000000,则表示为 45100 - 45.1E3)。
  • compact 是表示指数表示法的字符串,默认使用“短”格式。

compactDisplay:仅在 notationcompact 时使用。可以是 short(默认)或 long

maximumFractionDigits:最大分数位数(最多保留几位小数)

minimumFractionDigits:最小分数位数(最少保留几位小数)

maximumSignificantDigits:最多几位有效数字

例子

货币

const numbers = [245, 2345234.2345, 3456]

const formatter = new Intl.NumberFormat('zh-CN', {
  style: 'currency',
  currency: 'CNY',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
})

numbers.forEach((number) => {
  console.log(formatter.format(number))
})
// ¥245.00
// ¥2,345,234.23
// ¥3,456.00

new Intl.NumberFormat('cmn-Hans-CN', {
  style: 'currency',
  currency: 'CNY',
  currencyDisplay: 'name',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}).format(245) // 245.00人民币

new Intl.NumberFormat('cmn-Hans-CN', {
  style: 'currency',
  currency: 'CNY',
  currencyDisplay: 'name',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}).format(2345234.2345) // 2,345,234.23 人民幣

百分比

new Intl.NumberFormat('cmn-Hans-CN', { style: 'percent' }).format(34) // 3,400%

new Intl.NumberFormat('cmn-Hans-CN', { style: 'percent' }).format(0.34) // 34%

单位格式

new Intl.NumberFormat('cmn-Hans-CN', { style: 'unit', unit: 'kilometer-per-hour' }).format(4522) // 4,522 km/h

new Intl.NumberFormat('cmn-Hans-CN', {
  style: 'unit',
  unit: 'kilometer-per-hour',
  unitDisplay: 'long',
}).format(4522) // 每小时4,522公里

new Intl.NumberFormat('cmn-Hans-CN', {
  style: 'unit',
  unit: 'kilometer-per-hour',
  unitDisplay: 'narrow',
}).format(4522) // 4,522km/h

科学缩写

console.log(new Intl.NumberFormat('cmn-Hans-CN', { notation: 'scientific' }).format(452136)) // 4.521E5
console.log(new Intl.NumberFormat('cmn-Hans-CN', { notation: 'engineering' }).format(452136)) // 452.136E3
console.log(new Intl.NumberFormat('cmn-Hans-CN', { notation: 'compact' }).format(452136)) // 45万

Intl.DateTimeFormat

Intl.DateTimeFormat 对象能使日期和时间在特定的语言环境下格式化。

常用 options 参数

dateStyle:调用 format() 时使用的日期格式样式。可能的值包括:

  • full
  • long
  • medium
  • short(默认值)

timeStyle:调用 format() 时使用的时间格式样式。可能的值包括:

  • full
  • long
  • medium
  • short(默认值)

dayPeriod: 用于“早上”、“上午”、“中午”、“n”等日期时间段的格式样式。可能的值包括: narrow, short, long

timeZone: 时区,比如上海“Asia/Shanghai”,纽约是"America/New_York"

hourCycle: 要使用的小时周期(12小时制,24小时制) 值可以为:h11h12h23h24

weekday: 工作日的表示形式。可能的值为:

  • long(例如,Thursday)
  • short(例如,Thu)
  • narrow(例如,)。两个工作日可能 对于某些语言环境具有相同的窄样式(例如 的窄样式也是)。TTuesdayT

year: 年份的表示。可能的值为:

  • numeric(例如,2012)
  • 2-digit(例如,12)

month: 月份的表示。可能的值为:

  • numeric(例如,2)
  • 2-digit(例如,02)
  • long(例如,March)
  • short(例如,Mar)
  • narrow

day: 一天的表示。可能的值为:

  • numeric(例如,1)
  • 2-digit(例如,01)

hour: 小时的表示。可能的值为:

  • numeric(例如,1)
  • 2-digit(例如,01)

minute: 分钟的表示。可能的值为:

  • numeric(例如,1)
  • 2-digit(例如,01)

second: 秒的表示。可能的值为:

  • numeric(例如,1)
  • 2-digit(例如,01)

fractionalSecondDigits: 用于表示秒小数部分的位数(其他的数字将被截断)。可能的值为:

  • 0: 小数部分全部丢弃。
  • 1: 小数部分表示为 1 位数字。为 例如.736 的格式为 .7
  • 2:小数部分表示为 2 位数字。为 例如 .736 的格式为 .73
  • 3:小数部分表示为 3 位数字。为 例如 .736 的格式为 .736

例子

const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
console.log(new Intl.DateTimeFormat('zh-CN').format(date)); // "2012/12/20"
console.log(new Intl.DateTimeFormat('zh-CN', { 
  dateStyle: 'full', 
  timeStyle: 'long', 
  timeZone: 'Asia/Shanghai' 
}).format(date)); // “2012年12月20日星期四 GMT+8 11:00:00”
console.log(new Intl.DateTimeFormat('zh-CN', { 
  dateStyle: 'full', 
  timeStyle: 'short', 
  timeZone: 'Asia/Shanghai' 
}).format(date)); // “2012年12月20日星期四 11:00”
console.log(new Intl.DateTimeFormat('zh-CN', { 
  year: 'numeric', 
  month: '2-digit', 
  day: '2-digit' 
}).format(date)); // “2012/12/20”

到此这篇关于JS利用Intl解决前端日期和时间的格式化详解的文章就介绍到这了,更多相关JS Intl解决日期时间格式化内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

原文出处:https://juejin.cn/post/7207769757571514426

[!--infotagslink--]

相关文章

  • 在java中获取List集合中最大的日期时间操作

    这篇文章主要介绍了在java中获取List集合中最大的日期时间操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-15
  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
  • 教你怎么用Java获取国家法定节假日

    这篇文章主要介绍了教你怎么用Java获取国家法定节假日,文中有非常详细的代码示例,对正在学习java的小伙伴们有非常好的帮助,需要的朋友可以参考下...2021-04-23
  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
  • .NET/C# 使用Stopwatch测量运行时间

    这篇文章主要介绍了.NET/C# 使用Stopwatch测量运行时间,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
  • mysql中获取一天、一周、一月时间数据的各种sql语句写法

    创建表:复制代码 代码如下:create table if not exists t( id int, addTime datetime default '0000-00-00 00:00:00′)添加两条初始数据:insert t values(1, '2012-07-12 21:00:00′);insert t values(2, '2012-07...2014-05-31
  • Nest.js参数校验和自定义返回数据格式详解

    这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
  • JS日期加减,日期运算代码

    一、日期减去天数等于第二个日期function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() +...2015-11-08
  • js实现调用网络摄像头及常见错误处理

    这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
  • php计算两个日期相差天数的方法

    本文实例讲述了php计算两个日期相差天数的方法。...2015-03-15
  • JS实现随机生成验证码

    这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
  • JS实现响应鼠标点击动画渐变弹出层效果代码

    这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
  • NodeJS实现阿里大鱼短信通知发送

    本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
  • 浅析AngularJS Filter用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
  • 常用的日期时间正则表达式

    常用的日期时间正则表达式 下面收藏了大量的日期时间正则匹配函数,包括分钟,时间与秒都能达到。 正则表达式 (?n:^(?=d)((?<day>31(?!(.0?[2469]|11))|30(?!.0?2)|29(...2016-11-25
  • PostgreSQL 字符串处理与日期处理操作

    这篇文章主要介绍了PostgreSQL 字符串处理与日期处理操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-01
  • vue开发之moment的介绍与使用

    moment是一款多语言支持的日期处理类库, 在vue中如何使用呢?这篇文章主要给大家介绍了关于vue之moment使用的相关资料,需要的朋友可以参考下...2021-05-13
  • js实现列表按字母排序

    这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
  • NODE.JS加密模块CRYPTO常用方法介绍

    使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式,可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash(哈希),hmac(密钥哈希),cipher...2014-06-07