当前位置: 首页 > news >正文

分享几种js格式化金额的方法

一、使用 Intl.NumberFormat 构造函数

这是 JavaScript 中格式化金额的最常见方法。Intl.NumberFormat()构造函数接受两个参数:语言环境和选项。语言环境是为其格式化金额的语言和地区。选项是一组控制金额格式的属性。例如,可以使用样式属性来指定货币的格式,使用货币属性来指定要将金额格式化为的货币。

const amount = 1234567.89;
const locale = "en-US";
const options = {style: "currency",currency: "USD",
};const formattedAmount = new Intl.NumberFormat(locale, options).format(amount);console.log(formattedAmount); //$1,234,567.89

二、使用 Number.prototype.toLocaleString 方法

要格式化金额,可以使用 JavaScript 的 toLocaleString() 方法。该方法可以将数字转换为本地化的字符串表示形式,并可以指定货币符号、小数点和千位分隔符等格式。

代码如下:

  1. 美元

    const amount = 1234567.89;
    const formattedAmount = amount.toLocaleString("en-US", {style: "currency",currency: "USD",minimumFractionDigits: 2,maximumFractionDigits: 2,
    });
    console.log(formattedAmount); //$1,234,567.89
    
  2. 人民币

    const amount = 1234567.89;
    const formattedAmount = amount.toLocaleString("zh-CN", {style: "currency",currency: "CNY",minimumFractionDigits: 2,maximumFractionDigits: 2,
    });
    console.log(formattedAmount);
    

在这个示例中,将数字变量 amount 使用 toLocaleString() 方法转换为本地化的字符串表示形式,并指定了以下格式:

  • style: 'currency' 表示使用货币格式显示金额。
  • currency: 'USD' 表示使用美元符号作为货币符号。
  • minimumFractionDigits: 2 表示最少保留两位小数。
  • maximumFractionDigits: 2 表示最多保留两位小数。

通过这种方式,可以使用 JavaScript 快速简单地实现金额格式化效果。需要注意的是,toLocaleString() 方法在不同的浏览器和操作系统中可能存在差异,需要进行兼容性测试和兼容性处理。

三、 使用模板字符串 + Number.prototype.toFixed + 正则替换

const amount = 1234567.89;
const formattedAmount = `¥${amount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`;
console.log(formattedAmount);

在这个示例中,通过 toFixed 使金额保留两位小数,使用正则替换的方式增加千位分隔符,再使用模板字符串进行拼接。

相关文章:

分享几种js格式化金额的方法

一、使用 Intl.NumberFormat 构造函数 这是 JavaScript 中格式化金额的最常见方法。Intl.NumberFormat()构造函数接受两个参数:语言环境和选项。语言环境是为其格式化金额的语言和地区。选项是一组控制金额格式的属性。例如,可以使用样式属性来指定货币…...

圣墟传说H5手工端搭建架设教程

圣墟传说H5手工端搭建架设教程 大家好,我是艾西。今天给大家带来的游戏是由小说改编而来的大型玄幻MMORPG仙侠手游,也是比较老的游戏了虽然你可能没有怎么听过,但总会有一批喜欢的玩家热衷于它。 那么让我们直接进入正题开始操作&#xff1…...

编程(40)----------单例模式

在简单总结单例模式之前, 需要了解一下背景知识-----为何会有单例模式? 想象一个这样的场景, 打游戏的时候, 尝试很多次, 都未通关. 这种情况下是否会考虑查一下攻略? 一个好的攻略甚至可能连每一关的每一个场景由多少只怪物都说的清清楚楚. 再比如, 在以前上学的时候, 为了…...

Java开发 - 让你少走弯路的Redis主从实现单节点哨兵模式

前言 前一篇中,我们讲解了Redis主从的搭建方式,其实很简单呐有木有,都是配置,连句代码都没有,是不是感觉高估了Redis主从的搭建方式?哈哈,没关系,跟着博主,包你全会。今…...

Java的Atomic原子类

Java SDK 并发包里提供了丰富的原子类,我们可以将其分为五个类别,这五个类别提供的方法基本上是相似的,并且每个类别都有若干原子类。 对基本数据类型的变量值进行原子更新;对对象变量的指向进行原子更新;对数组里面的…...

离线语音控制新方案,NRK3303语音识别芯片在智能风扇的应用

随着科技的不断发展,智能家居已经成为人们日常生活中不可或缺的一部分,涌现出越来越多的智能设备,如智能门锁、智能灯泡、智能冰箱等,这些设备为人们的生活带来了更多的便利和创新。其中作为常见的风扇通过添加智能语音控制功能&a…...

在树莓派3B+上安装Pytorch1.7

在树莓派3B上安装Pytorch1.7(应该是最简单的方法了)_package libopenblas-dev has no installation cand_Chauncey_Wang的博客-CSDN博客由于项目要求,我需要在树莓派上安装pytorch这就有几个问题,首先吧,咱们和外面之间有一道长城&#xff0c…...

Java性能权威指南-总结4

Java性能权威指南-总结4 Java性能调优工具箱操作系统的工具和分析CPU运行队列磁盘使用率网络使用率 Java监控工具基本的VM信息 Java性能调优工具箱 操作系统的工具和分析 CPU运行队列 快速小结 检查应用性能时,首先应该审查CPU时间。优化代码的目的是提升而不是…...

c语言全局变量和局部变量问题汇总

✅作者简介:嵌入式领域优质创作者,博客专家 ✨个人主页:咸鱼弟 🔥系列专栏:单片机设计专栏 📃推荐一款求职面试、刷题神器👉注册免费刷题 1、关键字static的作用是什么? 定义静态变…...

14.3:给定一个由字符串组成的数组strs,必须把所有的字符串拼接起来,返回所有可能的拼接结果中字典序最小的结果

给定一个由字符串组成的数组strs,必须把所有的字符串拼接起来,返回所有可能的拼接结果中字典序最小的结果 贪心写法 首先注意的一点是:如果两个字符串的长度相同,“abc”,“abd”,肯定是“abc”的字典序最…...

C++ 项目实战:跨平台的文件与视频压缩解压工具的设计与实现

C实战:跨平台文件与视频压缩解压工具的设计与实现 一、引言(Introduction)1.1 项目背景与目标1.2 技术选型:C、FFmpeg、libarchive、libzip、QtCFFmpeglibarchivelibzipQt 二、设计思路与框架(Design Philosophy and F…...

C和指针(二)数据

数据类型 1,C语言中仅有四种基本数据类型——整型、浮点型、指针、聚合类型(数组、结构等)。 2,整型包括字符、短整型、整型、长整型,且可以分为有符号和无符号两种版本。 1)长整型至少和整型一样长&#…...

PyTorch基础学习(一)

一.简介 PyTorch是一个基于Python的开源机器学习框架,它提供了丰富的工具和接口,用于构建和训练深度学习模型。PyTorch的主要特点包括: 动态计算图: PyTorch使用动态计算图,这意味着在模型构建过程中可以实时地进行计…...

chatgpt赋能python:Python代做:让您的网站更友好的SEO利器

Python代做:让您的网站更友好的SEO利器 如果您是一位网站管理员或者SEO工程师,您一定知道SEO对于网站的重要性。那么在SEO中,Python代做可以为您提供什么?在本文中,我们将通过介绍Python代做的技术和方法,…...

2022年都快结束了,还有人不会安卓录屏?在安卓上录制屏幕的的实现方式

前言 在我之前的文章 《以不同的形式在安卓中创建GIF动图》 中,我挖了一个坑,可以通过录制屏幕后转为 GIF 的方式来创建 GIF。只是当时我只是提了这么一个思路,并没有给出录屏的方式,所以本文的内容就是教大家如何通过调用系统 A…...

px rem em rpx 区别 用法

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em16px。那么12px0.75em,10px0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size62.5%,这就使em值变为 16px*62.5%10px, 这样12px1.2em, 10px1em, 也就是说只需要…...

忆享聚焦|ChatGPT、AI、网络数字、游戏……近期热点资讯一览

“忆享聚焦”栏目第十四期来啦!本栏目汇集近期互联网最新资讯,聚焦前沿科技,关注行业发展动态,筛选高质量讯息,拓宽用户视野,让您以最低的时间成本获取最有价值的行业资讯。 目录 行业资讯 1.科技部部长王志…...

[Daimayuan] 树(C++,动态规划,01背包方案数)

有一棵 n n n 个节点的以 1 1 1 号点为根的有根树。现在可以对这棵树进行若干次操作,每一次操作可以选择树上的一个点然后删掉连接这个点和它的儿子的所有边。 现在我们想知道对于每一个 k k k ( 1 ≤ k ≤ n 1≤k≤n 1≤k≤n),最少需要多少次操作能…...

如何选择源代码加密软件

(SDC沙盒)和DLP、文档加密、云桌面等,其优缺点做客观比较如下: 比较内容安全容器(SDC沙盒)DLP文档加密云桌面代表厂家*信达卖咖啡、赛门贴科亿*通、IP噶德、*盾、*途四杰、深*服设计理念以隔离容器加准入技术为基础,构…...

TO-B类软件产品差异化

产品差异化,是在市场众多同质化产品中,突出自身产品亮点的重要方式。对于客户来讲其选择是多种多样的,与其花费大量的时间研究每一家产品的特点,还不如直接选择品牌更大、价格更低的产品来的直接,因此显而易见的突出产…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号,此时,我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...

《Offer来了:Java面试核心知识点精讲》大纲

文章目录 一、《Offer来了:Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了:Java面试核心知识点精讲(原理篇)》技术文章大纲核心主题:Java基础原理与面试高频考点Java虚拟机(JVM)原理Java并发编程原理Jav…...

boost::filesystem::path文件路径使用详解和示例

boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类&#xff0c;封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解&#xff0c;包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...