迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

JavaScript 将数字格式化为货币字符串

作者:迹忆客 最近更新:2024/03/16 浏览次数:

数字以多种方式表示,例如日期/时间、货币、数字等等。当将其表示为货币值时,其影响会增加,并且变得更具可读性。例如,写为 10000 的货币价值的影响要远小于表示为 $ 10,000.00 的数字的影响。它告诉我们有关数字,不同的货币符号和不同的逗号分隔的更多信息。本教程讲解如何在 JavaScript 中将数字格式化为货币字符串。


使用 Intl.NumberFormat() 方法将数字格式化为 JavaScript 中的货币字符串

此方法用于以语言敏感格式表示数字,并根据提供的参数表示货币。它以两个参数作为输入:localesoptions

  1. locales:它指定语言和区域设置。它是由语言和区域(由短划线分隔)组合而成的小字符串。例如,en-IN 语言环境采用印度和英语的格式。从右起的第一个逗号将千位数分开,其余的以百位数为单位。
  2. options:这是一个由大量属性组成的对象,或者我们可以说选项。将数字格式化为货币字符串时,需要 3 主要选项。
  3. style:这只是我们数字格式的样式。根据使用情况,它可以具有 3 个不同的值,十进制,货币,百分比。在我们的例子中,我们将样式设置为 currency
  4. currency:它指定要在格式数字字符串之前包含的符号的货币类型,例如,美元和欧元。
  5. minimumFractionDigits:指定格式化字符串中小数点后显示的最小位数。
const money = 10000;
const currency = function(number) {
  return new Intl
      .NumberFormat(
          'en-IN',
          {style: 'currency', currency: 'INR', minimumFractionDigits: 2})
      .format(number);
};
console.log(currency(money));

上面的代码有助于将给定的数字转换为印度货币字符串。


使用 toLocaleString() 方法将数字格式化为 JavaScript 中的货币字符串

此方法与 Intl.NumberFormat() 本质上相同,但是由于其处理多个项目的速度较慢而通常不使用。对于单个项目,两种方法的速度相似。它具有与 Intl.NumberFormat() 相同的参数。由于两种方法的内部实现方式不同,因此速度有所不同。

const number = 2000;
number.toLocaleString(
    'en-IN', {style: 'currency', currency: 'INR', minimumFractionDigits: 2})
console.log(number);

上面的代码有助于将给定的数字转换为印度货币字符串。


使用 Numeral.js 库将数字格式化为 JavaScript 中的货币字符串

Numeral.js 是用于数字格式化的最广泛使用的库之一。要使用此库将数字格式设置为货币字符串,我们首先创建一个数字实例。该库使用的标准数据类型在执行格式化之前将数字或字符串转换为数字。之后,我们可以使用 format() 函数指定货币格式。

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

上面的代码用于在浏览器中包含 Numeral.js 库。

var number = 1000;
var myNumeral = numeral(number);
var currencyString = myNumeral.format('$0,0.00');

我们创建了一个数字,然后调用了格式化函数以将数字格式化为带有 2 个小数点的美元。上面的代码提供了一种更简洁的方法来指定货币格式。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便