javascript 将数字转成货币类型( 1000 => ¥1,000.00)

本文介绍了一个用于将数值转换为特定货币格式的JavaScript函数。该函数接受三个参数:要转换的数值、保留的小数位数及货币符号。通过使用正则表达式等技术实现了数值的千位分隔及保留指定小数位数的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

function currency (value, decimals, currency) {  
  var _reg = /(\d{3})(?=\d)/g;
  value = parseFloat(value);
  if(!isFinite(value) || (!value && value !== 0)) return ''; 
  decimals = decimals || 2;
  currency = currency || '¥';

  var stringVal = Math.abs(value).toFixed(decimals);//去符号四舍五入
  var _int = decimals ? stringVal.slice(0, -1 - decimals) : stringVal;//取整数部分
  var i = _int.length % 3;
  var head = i > 0 ? (_int.slice(0, i) + (_int.length > 3 ? ',' : '')) : ''//判断整数部分是否刚好能够被3整除
  var _float = decimals ? stringVal.slice(-1 - decimals) : '';//取出小数部分
  var sign = value < 0 ? '-' : '';//判断正负数
  return sign + currency + head + _int.slice(i).replace(_reg, '$1,') + _float;//拼接最后的值
}  

var str = '11211234567890.0262213121';  
currency(str, 2, '¥');

<template> <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"/> <el-table-column label="产品名称" width="220"> <template #default="scope"> <div class="product-name-wrapper"> <el-link type="primary" :underline="false" @click="goToProductDetail(scope.row.id)"> <span >{{ scope.row.name }}</span> <span style="color: brown;" >※点击进入详细画面</span> </el-link> </div> </template> </el-table-column> <el-table-column property="categoryName" label="产品分类"width="120"/> <el-table-column property="price" label="产品单价"width="120"/> <el-table-column property="createAt" label="生产日期"width="250"/> <el-table-column property="price" label="单价"width="120"/> <el-table-column property="stock" label="库存"width="120"/> <el-table-column label="购买数量" width="180"> <template #default="scope"> <div> <el-input-number v-model="scope.row.number" :min="0" :max="scope.row.stock" size="small" controls-position="right"/> </div> </template> </el-table-column> <el-table-column label="合计" width="120"> <template #default="scope"> {{ scope.row.price * scope.row.number }} </template> </el-table-column> <el-table-column label="操作" width="180"> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.$index,scope.row)"> 编辑 </el-button> <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)"> 删除 </el-button> </template> </el-table-column> </el-table> <div class="summary"> <span>总金额:</span> <span >{{ allAmount }}</span> </div> </template> <script setup> import productApi from '@/api/products' import { ref, computed } from 'vue'; const tableData = ref([]); const router = useRouter(); const user = "aaa" const allcheckbox = ref([]) const goToProductDetail = (productId) => { router.push(`/home/test${productId}`) } const handleEdit = (index, row) => { console.log(index, row) } // 实际删除操作 const handleDelete = (index, row) => { tableData.value.splice(index, 1); }; function handleSelectionChange(selection) { allcheckbox.value = selection } // 获取商品数据 function getProduct() { productApi.getAll(user).then(res => { tableData.value = res.data.map(item => ({ ...item, number: item.number || 0, })); }); } const allAmount = computed(()=>{ let totle = 0 allcheckbox.value.forEach(item=>{ if(item.sum){ totle+=item.sum } }) return totle }) onMounted(() => { getProduct(); }); </script> <style> .summary { float: right; margin-top: 50px; margin-right: 500px; } </style> 总金额加算为什么不好使
07-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值