JS如何将数字转换成千分位显示并保留两位小数

首先介绍一下使用到的JS方法

parseFloat()

parseFloat() 函数可解析一个字符串，并返回一个浮点数。

该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

语法：parseFloat(string)

注意：

字符串中只返回第一个数字。
开头和结尾的空格是允许的。
如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

举例：

使用 parseFloat() 来解析不同的字符串：

document.write(parseFloat("10") + " ");

document.write(parseFloat("10.33") + " ");

document.write(parseFloat("34 45 66") + " ");

document.write(parseFloat(" 60 ") + " ");

document.write(parseFloat("40 years") + " ");

document.write(parseFloat("He was 40") + " ");

以上实例输出结果:

10
10.33
34
60
40
NaN

toFixed()

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

语法：number.toFixed(x)

举例：

把数字转换为字符串，结果的小数点后有指定位数的数字：

var num = 5.56789;
var n=num.toFixed(2);

n 输出结果:

5.57

toLocaleString()

将当前对象以格式化后的字符串值形式返回

语法:obiect.toLocaleString()

object 为 数组对象（Array）时，则将每个数组元素转换为字符串，并将这些字符串之间以指定的分隔符拼接起来后返回

举例：

var arr =[a,b,c,d];

arr.toLocaleString();

arr 输出结果：

a,b,c,d

object 为 时间/日期对象（time/date）时,返回一个以当前区域设置的长默认格式编写的日期字符串

举例：

根据本地时间把 Date 对象转换为字符串：

var d=new Date();
var n=d.toLocaleString();

n 输出结果:

2022/6/2 15:20:24

当object 为数字（Number）时，产生一个表示该Number值的千分位格式字符串

举例：

var num = 123456789;

num.toLocaleString();

num 输出结果：

132,456,789

完整的方法如下

     //将数字转换成金额显示
      toMoney(num) {
        if (num) {
          if (isNaN(num)) {
            this.$message.error('金额中含有不能识别的字符')
            return
          }
          num = typeof num == 'string' ? parseFloat(num) : num //判断是否是字符串如果是字符串转成数字
          num = num.toFixed(2) //保留两位
          num = parseFloat(num) //转成数字
          num = num.toLocaleString() //转成金额显示模式
          //判断是否有小数
          if (num.indexOf('.') == -1) {
            num = num + '.00'
          } else {
            num = num.split('.')[1].length < 2 ? num + '0' : num
          }
          return num //返回的是具有千分位格式并保留2位小数的字符串
        } else {
          return (num = null)
        }
      },

JS如何将数字转换成千分位显示并保留两位小数

parseFloat()

toFixed()

toLocaleString()

猜你喜欢