前端保留两位小数（数字-浮点-字符串）

需求：

正常来讲后台是做了限制的，一般金额都会是int类型的，但是前端有时候格式不对时会出错。

让金额保留两位小数，由于拿到金额数据类型的不确定性，需要对不符合格式的金额进行限制。

封装的通用方法的代码：

下面是一个封装的通用方法：

function formatAmount(amount) {
  // 通过 Number 类型转换将金额转为数字类型
  const parsedAmount = Number(amount);

  if (isNaN(parsedAmount)) {
    // 如果无法解析为数字，则返回''
    return '';
  }

  // 使用 toFixed 方法保留两位小数
  const fixedAmount = parsedAmount.toFixed(2);

  // 使用正则表达式匹配金额格式，只允许数字和小数点
  const regex = /^\d+(\.\d{1,2})?$/;
  if (!regex.test(fixedAmount)) {
    // 金额格式不符合要求，返回''
    return '';
  }

  // 返回格式化后的金额字符串
  return fixedAmount;
}

过程：

• 这个方法接受一个参数 amount，可以是字符串、整数或浮点数类型的金额。首先，通过 Number 类型转换将金额转为数字类型 parsedAmount。如果无法解析为数字，则返回空字符串。
• 接下来，使用 toFixed 方法保留两位小数，得到格式化后的金额 fixedAmount。
• 然后，使用正则表达式 /^\d+(\.\d{1,2})?$/ 进行匹配，该正则表达式表示只允许数字和小数点，并且小数点后最多可以有两位数字。如果金额格式不符合要求，则返回空字符串。
• 最后，如果金额格式符合要求，则返回格式化后的金额字符串 fixedAmount。

使用：

可以在 Vue 项目中使用该方法对金额进行格式化和限制。例如：

<template>
  <div>
    <input v-model="amount" @input="formatAndRestrictAmount" type="text" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: ''
    }
  },
  methods: {
    formatAndRestrictAmount() {
      this.amount = formatAmount(this.amount);
    }
  }
}
</script>

在该方法中，将输入的金额经过 formatAmount 方法进行格式化和限制，并将结果赋值给 amount 属性，从而实现金额的统一格式化和限制功能。

总结：

这个可以确保不管输入的金额是字符串、整数还是浮点数类型，都能够正确地格式化为保留两位小数的金额字符串，并对不符合格式的金额进行限制。