使用过滤器，把后端数据加千分位逗号，科学计数法

2023-12-16 00:20:53

简介

在后端开发中，我们经常会遇到需要将数据格式化为千分位逗号或科学计数法的情况。例如，我们需要将商品的价格显示为千分位逗号格式，或者将一个非常大的数字显示为科学计数法格式。

千分位逗号

千分位逗号是一种将数字每三位一组，并用逗号分隔的表示方式。例如，数字1234567890将被表示为123,456,789。

在JavaScript中，我们可以使用toLocaleString()方法将数字转换为千分位逗号格式。例如：

const number = 1234567890;
const formattedNumber = number.toLocaleString();
console.log(formattedNumber); // 123,456,789

科学计数法

科学计数法是一种将数字表示为a×10^b的形式，其中a是一个介于1和10之间的数字，b是一个整数。例如，数字1234567890将被表示为1.23456789×10^9。

在JavaScript中，我们可以使用toExponential()方法将数字转换为科学计数法格式。例如：

const number = 1234567890;
const formattedNumber = number.toExponential();
console.log(formattedNumber); // 1.23456789e+9

使用过滤器

在前端开发中，我们可以使用过滤器来将后端数据转换为千分位逗号或科学计数法格式。例如，在Vue.js中，我们可以使用v-filter指令来实现这一点。

<template>
  <div>
    <p>{{ item.double | numberFormat('1,000.00') }}</p>
    <p>{{ item.doubleNum | exponential }}</p>
  </div>
</template>

<script>
import { numberFormat, exponential } from 'filters';

export default {
  filters: {
    numberFormat,
    exponential,
  },
  data() {
    return {
      item: {
        double: 1234567890.123456,
        doubleNum: 1234567890123456789,
      },
    };
  },
};
</script>