首页 > 编程语言 >JavaScript 格式化金额

JavaScript 格式化金额

时间:2023-05-26 10:23:03浏览次数:39  
标签:格式化 JavaScript 金额 formattedAmount currency amount toLocaleString const

JavaScript 格式化金额

一、使用 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);
    
  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() 方法在不同的浏览器和操作系统中可能存在差异,需要进行兼容性测试和兼容性处理。

二、 使用模板字符串 + toFixed + 正则替换

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

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

标签:格式化,JavaScript,金额,formattedAmount,currency,amount,toLocaleString,const
From: https://www.cnblogs.com/yuzhihui/p/17433979.html

相关文章

  • javascript设计模式-享元
    这是一种优化性能代码的模式,最适合解决因创建大量类似对象而累及性能的问题。对于那些可能一连几天也不会重新加载的大型应用系统非常有用。它用于减少应用程序所需要数量,通过将对象内部划分为内在数据和外在数据两类来实现。管理享元外在数据有许多方法:1、数据库;2、组合模式(利用......
  • 【深度剖析】JavaScript中块级作用域与函数作用域
    前言系列首发于公众号『前端进阶圈』,若不想错过更多精彩内容,请“星标”一下,敬请关注公众号最新消息。面试官必问系列:深入理解JavaScript块和函数作用域在JavaScript中,究竟是什么会生成一个新的作用域,只有函数才会生成新的作用域吗?那JavaScript其他结构能生成新的作用域吗?3.1......
  • laytpl( Layui 的一款轻量 JavaScript 模板引擎)
    laytpl 是Layui的一款轻量JavaScript模板引擎,在字符解析上有着比较出色的表现。laytpl是一款颠覆性的JavaScript模板引擎文档说明一、模版语法输出一个普通字段,不转义html:{{d.field}}输出一个普通字段,并转义html:{{=d.field}}JavaScript脚本:{{#JavaScriptstate......
  • python 格式化代码
    安装pre-commitsudoaptinstallpre-commit-yrepos:-repo:https://github.com/python/blackrev:23.3.0hooks:-id:blacklanguage_version:python3exclude:src/ratel/potargs:["--line-length","18......
  • JavaScript中的生成器函数(Generator Functions)
    简介:生成器函数(GeneratorFunctions)是JavaScript中的一种特殊类型函数,它允许开发者在函数内部产生多个值并逐步返回,与传统函数一次返回单个值的方式不同。本文将介绍生成器函数的特性、优缺点以及如何使用它们,并提供一些代码案例来说明其用法。特性:使用function\*关键字声明:生成......
  • 跟着hsp学springmvc--数字格式化介绍
    基本数据类型和字符串类型的自动转换<%@taglibprefix="form"uri="http://www.springframework.org/tags/form"%><%@pagecontentType="text/html;charset=UTF-8"language="java"%><html><head><title>Ti......
  • [Javascript] Generator with example - 1
    Differencebetween yieldand returnreturnset donetotrue/***Example1*/function*loggerator(){console.log("running");yield"paused";console.log("runningagain");return"stopped";}letlogger=......
  • javascript prototype and class
    js中的prototype绝对是js的一个重要知识点,有点像delegate的模式,和oop对象形式还是有些差别的,尽管可以做同样的事情。简要学习可以参见:https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes关于js的class和java的语法很像,参见:https://develope......
  • 碎片化学习前端之JavaScript(for...in 和 Object.keys() 的区别)
    前言JavaScript中遍历对象的方式主要有:for...in和Object.keys()两种方式。for...inletobj={name:'ming',age:18,}obj[Symbol('hello')]='world'obj.__proto__={gender:'man',job:'font-end'}f......
  • 一篇文章解密 - 如何在MyEclipse中使用JavaScript编写代码?
    MyEclipsev2022.1.0正式版下载MyEclipse技术交流群:742336981欢迎一起进群讨论JavaScript项目在MyEclipse2021及更高版本中,JavaScript支持对大多数JavaScript源代码都是开箱即用的——不需要特殊的JavaScriptEclipse项目或JavaScriptfacet。但是,我们建议使用jscon......