Web 页面数据显示常会涉及到各种各样的数据格式化处理,其中,将金额加货币符号和大写转换就很常见。

1. 代码开发版实现方法

定义数据转换函数,页面进行调用。

1). 添加货币符号函数:

a. 获取待处理的值,判断是否为有效数值;

b. 将数值转换为字符串类型,定位在第一个数字前添加货币符号。

核心代码:

function currency (money){let val = money;if(val){val = '$'+val;return val;}}

function currency (money){ let val = money; if(val){ val = '$'+val; return val; } }

注:货币符号转换常需要同步做千分位格式处理,那就需要代码再分步处理数据小数点前后的内容核心代码如:var re=/(?=(?!(\b))(\d{3})+$)/g; money1= money1.replace(re,“,”);

2) . 大小写转换函数为例:

a. 定义最大处理金额;

b. 判断金额所属范围(>0、=0、<0), 将数值转换为字符串类型;

c. 分别处理小数点前后的金额,拼接返回。

核心代码:

 if (parseInt(IntegerNum, 10) > 0) { //获取整型部分转换var zeroCount = 0;var IntLen = IntegerNum.length;for (var i = 0; i < IntLen; i++) {var n = IntegerNum.substr(i, 1);var p = IntLen - i - 1;var q = p / 4;var m = p % 4;if (n == "0") {zeroCount++;}else {if (zeroCount > 0) {ChineseStr += cnNums\[0\];}zeroCount = 0; //归零ChineseStr += cnNums\[parseInt(n)\] + cnIntRadice\[m\];}if (m == 0 && zeroCount < 4) {ChineseStr += cnIntUnits\[q\];}}ChineseStr += cnIntLast;//整型部分处理完毕}if (DecimalNum != '') { //小数部分var decLen = DecimalNum.length;for (var i = 0; i < decLen; i++) {var n = DecimalNum.substr(i, 1);if (n != '0') {ChineseStr += cnNums\[Number(n)\] + cnDecUnits\[i\];}}}

if (parseInt(IntegerNum, 10) > 0) { //获取整型部分转换 var zeroCount = 0; var IntLen = IntegerNum.length; for (var i = 0; i < IntLen; i++) { var n = IntegerNum.substr(i, 1); var p = IntLen - i - 1; var q = p / 4; var m = p % 4; if (n == "0") { zeroCount++; } else { if (zeroCount > 0) { ChineseStr += cnNums\[0\]; } zeroCount = 0; //归零 ChineseStr += cnNums\[parseInt(n)\] + cnIntRadice\[m\]; } if (m == 0 && zeroCount < 4) { ChineseStr += cnIntUnits\[q\]; } } ChineseStr += cnIntLast; //整型部分处理完毕 } if (DecimalNum != '') { //小数部分 var decLen = DecimalNum.length; for (var i = 0; i < decLen; i++) { var n = DecimalNum.substr(i, 1); if (n != '0') { ChineseStr += cnNums\[Number(n)\] + cnDecUnits\[i\]; } } }

2. 更便捷多用的方法

使用内置数据显示转换功能的报表工具,通过简单的设置达到数据转换的效果。

1) 添加货币符号配置

2) 数值大写转换

具体操作可以参考玩转数据显示设置。

注:使用工具除了可以简单快捷实现上述转换外,还可以做更多的显示设置,比如:数值转中文,日期格式化等等。

如上两种情况相较而言,前者代码虽可以实现转换的需求,但要求开发者的逻辑思维一定要清晰,思路要明确,不然很可能因为考虑不够全面,导致转换不正确,且往往一个页面需要做数据格式化的处理的部分很多,每个都这么写就很麻烦,后续维护也困难。

Web 页面怎么加货币符号和大写转换相关推荐

  1. linux测试网页装载时间,使用curl测试web页面响应加载速度

    curl -o /dev/null -s -w %{http_code}:%{http_connect}:%{content_type}:%{time_namelookup}:%{time_redir ...

  2. IE8浏览器32位被360篡改为64位(OCX控件在web页面不能加载的问题)

    OCX控件在web页面不能加载的问题 IE8浏览器32位被360篡改为64位 解决办法: 除了在ie浏览器自定义项中设置启用,将C:\Program Files\Internet Explorer下的 ...

  3. html超出高度自动下一页,上滑web页面自动加载下一页

    移动端常常是通过向上滑动到页面底部自动加载下一页内容,而不是点击"下一页"按钮进行加载.这是一个演示了自动加载下一页的小demo. html: html> 向上滑动自动加载后 ...

  4. 数字加千分位分隔符,加货币符号,数字转百分数

    想必大家在做前端开发的过程中或多或少都会需要显示数字或是金钱,或是百分数,或是小数位取有效数字.Number.parseFloat(x).toFixed(2)或许可以解决取有效数字的问题,但是其他的就 ...

  5. 在index页面显示人民币货币符号-ruby on rails

    <td><%= number_to_currency product.price, unit: "¥" %></td> 转载于:https:// ...

  6. webview加载的页面和浏览器渲染的页面不一致_QQ音乐Android客户端Web页面通用性能优化实践...

    QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进行 Web ...

  7. jmeter压测学习11-模拟浏览器访问web页面

    前言 在做性能测试的时候,有时候我们希望测试用户访问一个web页面的加载时间,使用 jmeter 压测的话,需模拟浏览器的行为,加载整个页面的内容. 包含一些js,css,png图片资源等文件的加载. ...

  8. QQ音乐客户端Web页面通用性能优化实践

    导语 | QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进 ...

  9. QQ音乐Android客户端Web页面通用性能优化实践

    QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进行 Web ...

最新文章

  1. “AI开发者大会”早鸟票抢购倒计时开始~
  2. 腾讯 AI Lab副主任俞栋:过去两年基于深度学习的声学模型进展
  3. WPF与Win32互操作
  4. oracle,导入,导出数据
  5. Spring框架学习笔记(2)——IOCDI
  6. 排列与组合的Java递归实现 (参考)
  7. 一文读懂 HMM 模型和 Viterbi 算法
  8. python剑指offer替换空格_迷人的算法-剑指offer面试题5:替换空格
  9. PC软件开发技术之二:用C#开发基于自动化接口的OPC客户端
  10. 《Android 应用案例开发大全(第二版)》——2.3节案例的基本框架
  11. 由有理函数的广义积分引入,谈谈复变函数论中的留数
  12. ubuntu18.04播放MP4
  13. TFS2010用户解锁
  14. Javaweb —— JSP技术
  15. 数值代数中的数学原理及其证明(一)
  16. JS中阿拉伯数字转中文数字
  17. 如何生成Android的keystore文件
  18. 第一篇 消防法及相关法律法规与消防职业道德
  19. DAY5:《鸟叔的linux私房菜》
  20. SAP ABAP 官网文档

热门文章

  1. 免费分享百度快排发包技术+原理解析【SEO内行精品资料】
  2. es 定时备份 删除 与数据恢复
  3. Mutmap定位拟南芥的基因
  4. 上海python什么时候考试_上海python14期第二次阶段性考试
  5. 字体格式:ttf,woff,eot
  6. 云顶之弈机器人怎么拉人_云顶之弈:3青龙刀机器人无限拉人,3虚4斗已经找不到对手了...
  7. 普通话证书手把手入门考取流程
  8. 禾川HCQ PLC 改变IP地址
  9. 上位机软件-串口助手-带登陆界面
  10. Android 拍照功能详解