小程序数字逢三位逗号分割

好久没有写教程了

最近写了一个数字三位逗号分割的小方法

写的很啰嗦,不过可以用。后续我再完善把~


用代码之前要清楚的三点

1、此数字包括负数和小数

2、是直接在小程序的wxml中使用

3、我没有做很多测试,可能会有各种奇怪的需求(比如说美元要把$写在负号后面)


话不多说直接上代码!

这段代码要写在wxs文件里!!

var threeNum = function (num) {  //参数是数字
  var thisNum = (num || 0).toString().split('.');//判断如果有小数点就分割这个数为一个数组
  var num = thisNum[0]; //截取小数点前面的部分保存
  var fuNum = thisNum[0]; //如果是负数先保存备用
  var result = ''; //最后结果
  if (fuNum<0){
    num = num.slice(1); //是负数先把负号截取掉
  }
  while (num.length > 3) {  //循环每三位添加一个逗号
    result = ',' + num.slice(-3) + result;
    num = num.slice(0, num.length - 3);
  }
  if (num) {result = num + result;} 
  if (fuNum < 0) { result = '-' + result } //负数加上负号
  if (thisNum[1]) { result = result + '.' + thisNum[1];} //拼接上小数
  return result;
}

module.exports = {
  threeNum:threeNum
}

在wxml文件中引入

<wxs module="common" src="common.wxs"></wxs>

在wxml文件中直接使用

<view>{{common.threeNum(num)}}</view>

如果有问题希望大家可以指正~小女子接受各种批评建议~~~

### Vue 中实现小数的千分位格式化 在 Vue.js 中可以通过多种方式来实现金额的小数部分保留两位并进行千分位格式化。以下是几种常见的解决方案: #### 方法一:使用正则表达式手动处理 通过字符串操作和正则表达式,可以轻松实现整数部分的千分位分割以及小数部分的截取。 ```javascript function formatCurrency(value) { if (value === null || value === undefined || isNaN(value)) return ''; let num = parseFloat(value).toFixed(2); // 保留两位小数[^1] let parts = num.toString().split('.'); let intPart = parts[0]; let decimalPart = parts.length > 1 ? '.' + parts[1] : ''; // 对整数部分应用千分位分隔符 intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ','); return `${intPart}${decimalPart}`; } ``` 此函数会先将数值转换为固定两位小数的形式,随后利用正则表达式对整数部分添加千分位分隔符[^2]。 --- #### 方法二:使用 `toLocaleString` API JavaScript 提供了一个内置的方法 `toLocaleString()` 来完成货币格式化的功能。该方法支持国际化设置,并能自动处理千分位分隔符和小数点位置。 ```javascript function formatCurrency(value) { if (value === null || value === undefined || isNaN(value)) return ''; return new Number(value).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } ``` 上述代码中,`minimumFractionDigits` 和 `maximumFractionDigits` 参数用于指定最小和最大显示的小数位数。这种方法不仅简单易用,还具有良好的跨浏览器兼容性[^3]。 --- #### 方法三:结合 Ant Design 组件库 如果项目已经引入了 Ant Design,则可以直接使用其 `<InputNumber>` 或其他组件的相关属性来进行格式化。 ```vue <template> <a-input-number v-model="amount" :formatter="value => value && value.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')" :parser="value => value && value.replace(/,/gi, '')" style="width: 100%" /> </template> <script> export default { data() { return { amount: '' }; } }; </script> ``` 在此示例中,`formatter` 属性负责展示时的格式化逻辑,而 `parser` 则用来解析用户输入的内容以便保存原始数据形式。 --- ### 总结 以上三种方案各有优劣: - **正则表达式**适合轻量级场景,无需依赖额外库; - **`toLocaleString`** 更加简洁高效,尤其适用于多语言环境下的开发需求; - 如果正在使用 Ant Design UI 库的话,推荐采用官方提供的控件特性以减少自定义编码工作量。 无论选用哪种方式,请务必考虑边界条件测试(如负数、非数字字符等),从而提升程序健壮性和用户体验。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花贝是只猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值