js金额千分位的6种实现方法实例

 更新时间:2022年03月18日 09:07:30   作者:小前端爱coding  
在前端开发中经常会遇到这样一种需求,使用Javascript格式化数字进行输出,下面这篇文章主要给大家介绍了关于js金额千分位的6种实现方法,需要的朋友可以参考下

方法一 数组分割法

这种方法也是自己最容易想到的一种方式,通过将数组以点分割,然后按照3位一体进行字符的拼接

function format_with_array(number) {
  // 转为字符串,并按照.拆分
  const arr = (number + '').split('.');
  // 整数部分再拆分
  const int = arr[0].split('');
  // 小数部分
  const fraction = arr[1] || '';
  // 返回的变量
  let r = '';
  int.reverse().forEach(function (v, i) {
    // 非第一位并且是位值是3的倍数,添加“,”
    if (i !== 0 && i % 3 === 0) {
      r = v + ',' + r;
    } else {
      // 正常添加字符(这是好写法)
      r = v + r;
    }
  });
  // 整数部分和小数部分拼接
  return r + (!!fraction ? '.' + fraction : '');
}
// 测试用例
console.log(format_with_array(1234567893.99));

方法二 字符截取法

字符截取法,具体看看注释

function format_with_substring(number) {
  // 数字转为字符串,并按照 .分割
  let arr = (number + '').split('.');
  let int = arr[0] + '';
  let fraction = arr[1] || '';
  // 多余的位数
  let f = int.length % 3;
  // 获取多余的位数,f可能是0, 即r可能是空字符串
  let r = int.substring(0, f);
  // 每三位添加','金额对应的字符
  for (let i = 0; i < Math.floor(int.length / 3); i++) {
    r += ',' + int.substring(f + i * 3, f + (i + 1) * 3);
  }
  // 多余的位数,上面
  if (f === 0) {
    r = r.substring(1);
  }
  // 调整部分和小数部分拼接
  return r + (!!fraction ? '.' + fraction : '');
}
console.log(format_with_substring(12112123313.78));

方法三 求模法

这种方法按照 用1000求模取末尾3位,然后用除法判断是否还有剩余位数的方法去做的,这种方法性能也是最好的,推荐大家使用!

function format_with_mod(number) {
  let n = number;
  let r = '';
  let temp = '';
  do {
    // 求模的值, 用于获取高三位,这里可能有小数
    mod = n % 1000;
    // 值是不是大于1,是继续的条件
    n = n / 1000;
    // 高三位
    temp = ~~mod;
    // 1.填充: n > 1 循环未结束, 就要填充为比如 1 => 001
    // 不然temp = ~~mod的时候, 1 001, 就会变成 "11"
    // 2.拼接“,”
    r = (n >= 1 ? `${temp}`.padStart(3, '0') : temp) + (!!r ? ',' + r : '');
  } while (n >= 1);
  const strNumber = number + '';
  let index = strNumber.indexOf('.');
  // 拼接小数部分
  if (index >= 0) {
    r += strNumber.substring(index);
  }
  return r;
}
console.log(format_with_mod(1234567893.99));

方法四 正则表达式(先行断言)

说这种方法前,我们来了解下什么是先行断言吧!看例子。

有以下字符串: 我爱你 我爱 爱 爱你

如果要取出字,要求这个爱字后面有,这个时候就要这么写,这就是 先行断言

'我爱你 我爱 爱 爱你'.match(/爱(?=你)/g) // ["爱", "爱"]

如果要求字后面没有,那自然也有先行否定断言

'我爱你 我爱 爱 爱你'.match(/爱(?!你)/g) // ["爱", "爱"] ,因为匹配相同...

这个时候,如果要求字后面有,前面还要有,那就要用到后行断言了,如下:

'我爱你 我爱 爱 爱你'.match(/(?<=我)爱(?=你)/g) // ["爱"]

最后,如果要求爱字前面没有我,后面也没有我,那就要用到先行否定断言和**后行否定断言,**如下:

'我爱你 我爱 爱 爱你'.match(/(?<!我)爱(?!你)/g) // ["爱"]

所以正则表达式还是比较灵活的,接下来,让我们一起来瞅瞅正则表达式是如何来玩千分位的,上代码。

function format_with_regex(number) {
  return !(number + '').includes('.')
    ? // 就是说1-3位后面一定要匹配3位
      (number + '').replace(/\d{1,3}(?=(\d{3})+$)/g, (match) => {
        return match + ',';
      })
    : (number + '').replace(/\d{1,3}(?=(\d{3})+(\.))/g, (match) => {
        return match + ',';
      });
}
console.log(format_with_regex(1243250.99));

第四行 d{1,3} 数字出现1-3次,后面紧紧跟随着3个数字,如1243250,首先243前面有1,符合条件所以是1,243;后面250前面是243符合条件,所以是1,243,250

方法五 通过Intl.NumberFormat

这种方法是我在往上无意种发现的,使用这种方式会导致函数不断的初始化,会导致性能上的问题。

function format_with_Intl(
  number,
  minimumFractionDigits,
  maximumFractionDigits
) {
  minimumFractionDigits = minimumFractionDigits || 2;
  minimumFractionDigits = maximumFractionDigits || 2;
  maximumFractionDigits = Math.max(
    minimumFractionDigits,
    maximumFractionDigits
  );
  return new Intl.NumberFormat('en-us', {
    maximumFractionDigits: maximumFractionDigits || 2,
    minimumFractionDigits: minimumFractionDigits || 2,
  }).format(number);
}
console.log(format_with_Intl(123456789.98));

方法六 number.toLocaleString方式

这个是通过js带的api来的,和方法五一样会有性能上的问题。

function format_with_toLocalString(
  number,
  minimumFractionDigits,
  maximumFractionDigits
) {
  minimumFractionDigits = minimumFractionDigits || 2;
  minimumFractionDigits = maximumFractionDigits || 2;
  maximumFractionDigits = Math.max(
    minimumFractionDigits,
    maximumFractionDigits
  );
  return number.toLocaleString('en-us', {
    maximumFractionDigits: maximumFractionDigits || 2,
    minimumFractionDigits: minimumFractionDigits || 2,
  });
}
console.log(format_with_toLocalString(123456789.58));

总结

到此这篇关于js金额千分位的6种实现方法的文章就介绍到这了,更多相关js 金额千分位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js调用父框架函数与弹窗调用父页面函数的简单方法

    js调用父框架函数与弹窗调用父页面函数的简单方法

    下面小编就为大家带来一篇js调用父框架函数与弹窗调用父页面函数的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 常用的js验证和数据处理总结

    常用的js验证和数据处理总结

    遇到需要对数据及表单验证的,我相信大家都像我一样,喜欢在网上找相关的方法,因为自己写的话,是比较耗时的。今天就给大家分享一下,自己在工作中总结的一些常用的js。
    2016-08-08
  • js拼接字符串时如何在中间加上空格

    js拼接字符串时如何在中间加上空格

    这篇文章主要介绍了js拼接字符串时如何在中间加上空格的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 在微信小程序中保存网络图片

    在微信小程序中保存网络图片

    这篇文章主要介绍了在微信小程序中保存网络图片,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • JS将光标聚焦在文本最后的实现代码

    JS将光标聚焦在文本最后的实现代码

    这篇文章主要介绍了JS将光标聚焦在文本最后的方法,需要的朋友可以参考下
    2014-03-03
  • JavaScript中的this例题实战总结详析

    JavaScript中的this例题实战总结详析

    使用JavaScript开发的时候,很多人多多少少都会被this的指向问题搞蒙圈,下面这篇文章主要给大家介绍了关于JavaScript中this例题实战的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • layer.open提交子页面的form和layedit文本编辑内容的方法

    layer.open提交子页面的form和layedit文本编辑内容的方法

    今天小编就为大家分享一篇layer.open提交子页面的form和layedit文本编辑内容的方法,具有好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js中事件对象和事件委托的介绍

    js中事件对象和事件委托的介绍

    今天小编就为大家分享一篇关于js中事件对象和事件委托的介绍,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Zepto实现密码的隐藏/显示

    Zepto实现密码的隐藏/显示

    本文主要介绍了js中隐藏/显示密码的Zepto的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • JavaScript继承定义与用法实践分析

    JavaScript继承定义与用法实践分析

    这篇文章主要介绍了JavaScript继承定义与用法,结合实例形式分析了JavaScript面向对象程序设计中基类的定义、原型继承以及调用父类构造函数等相关操作技巧,需要的朋友可以参考下
    2018-05-05

最新评论