Vue中金额、日期格式化插件@formatjs/intl的使用及说明

简介

@formatjs/intl 是一个用于处理数字、日期、货币等多种格式化需求的插件。可以在 Vue 中方便地使用它来对各种格式进行处理。

安装

在项目中安装@formatjs/intl：

npm install @formatjs/intl

同时，需要安装@formatjs/intl-relativetimeformat插件：

npm install @formatjs/intl-relativetimeformat

引入

通过 import 引入@formatjs/intl 中的不同模块（NumberFormat、DateTimeFormat、RelativeTimeFormat），可以快速处理不同的格式化需求。

import { NumberFormat, DateTimeFormat, RelativeTimeFormat } from '@formatjs/intl';

使用

Number Format（数字格式化）

可以使用 NumberFormat 模块快速将数字格式化成货币、百分比等形式。

const formatter = new NumberFormat('en-US', { style: 'currency', currency: 'USD' });

console.log(formatter.format(123.45)); // "$123.45"

其中，en-US 表示使用美式英语进行格式化，style 表示需要将数字格式化成什么形式，currency 表示使用哪种货币。

DateTime Format（日期时间格式化）

可以使用 DateTimeFormat 模块快速将日期时间格式化成各种形式（如：年月日、时分秒、完整时间等）。

const formatter = new DateTimeFormat('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });

console.log(formatter.format(new Date())); // "2021/12/05"

其中，zh-CN 表示使用中文进行格式化，year、month、day 表示需要显示哪些日期时间信息。

Relative Time Format（相对时间格式化）

可以使用 RelativeTimeFormat 模块快速将日期时间转换成相对时间形式（如：刚刚、5 分钟前、3 天前等）。

const formatter = new RelativeTimeFormat('zh-CN', { numeric: 'auto' });

console.log(formatter.format(-3, 'hour')); // "3小时前"

其中，zh-CN 表示使用中文进行格式化，numeric 表示日期时间信息是否需要数字形式，-3 表示时间是过去 3 个小时，'hour' 表示需要将时间格式化成相对于小时的形式。

示例

格式化成货币

<template>
  <div>
    <h3>格式化成货币</h3>
    <p>{{ price }}</p>
    <p>{{ formattedPrice }}</p>
  </div>
</template>

<script>
import { NumberFormat } from '@formatjs/intl';

export default {
  data() {
    return {
      price: 12345.6789,
    };
  },
  computed: {
    formattedPrice() {
      const formatter = new NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' });

      return formatter.format(this.price);
    },
  },
};
</script>

格式化成日期时间

<template>
  <div>
    <h3>格式化成日期时间</h3>
    <p>{{ date }}</p>
    <p>{{ formattedDate }}</p>
  </div>
</template>

<script>
import { DateTimeFormat } from '@formatjs/intl';

export default {
  data() {
    return {
      date: new Date(),
    };
  },
  computed: {
    formattedDate() {
      const formatter = new DateTimeFormat('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });

      return formatter.format(this.date);
    },
  },
};
</script>

以上代码中，分别使用 NumberFormat 和 DateTimeFormat 模块来格式化数字和日期时间，并且将结果显示在了网页中。我们可以在控制台中看到格式化结果的具体显示信息。